<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="main-screen">
<!-- Side Menu -->
<div class='float-menu pr-2 py-3' id="float-menu">
<a href="#" class="menu-icon" id="menu-handle">
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
</a>
<div class="content-block">
<!-- Heading section -->
<div class="head mb-5 mt-0">
<div class="col-md-10 mx-auto">
<h2 class="text-uppercase">About Us</h1>
<p class="lead">Creating a better world requires teamwork, partnerships, and collaboration</p><p>We need an entire army of companies to work together to build a better world within the next few decades. This means corporations must embrace the benefits of cooperating with one another.</p>
<p>The best teamwork comes from men who are working independently toward one goal in unison.</p>
<hr>
<!-- Team Section -->
<h3 class="mb-3">Board Members</h3>
<p>Individual commitment to a group effort - that is what makes a team work, a company work, a society work, a civilization work.</p>
<div class="team-block row">
<div class="col-sm-4 col-md-4 mb-3">
<div class="member-box anim-lf t-bottom">
<img class="img-fluid" src="https://grafreez.com/wp-content/temp_demos/coming-soon-demo/assets/img/t-member-01.jpg" alt="">
<div class="overlay-content">
<h4 class="text-white ml-3 my-0">Jim Gorden</h4>
<p class="text-white ml-3 mb-3">Developer</p>
<span class="socail-l ml-3 mb-3">
<a href="#" class="mr-2"><i class="fa fa-facebook box-circle-solid"></i></a>
<a href="#" class="mr-2"><i class="fa fa-twitter box-circle-solid"></i></a>
<a href="#"><i class="fa fa-dribbble box-circle-solid"></i></a>
</span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 mb-3">
<div class="member-box anim-lf t-bottom">
<img class="img-fluid" src="https://grafreez.com/wp-content/temp_demos/coming-soon-demo/assets/img/t-member-02.jpg" alt="">
<div class="overlay-content">
<h4 class="text-white ml-3 my-0">Peyton Warren</h4>
<p class="text-white ml-3 mb-3">UI/UX</p>
<span class="socail-l ml-3 mb-3">
<a href="#" class="mr-2"><i class="fa fa-facebook box-circle-solid"></i></a>
<a href="#" class="mr-2"><i class="fa fa-twitter box-circle-solid"></i></a>
<a href="#"><i class="fa fa-dribbble box-circle-solid"></i></a>
</span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 mb-3">
<div class="member-box anim-lf t-bottom">
<img class="img-fluid" src="https://grafreez.com/wp-content/temp_demos/coming-soon-demo/assets/img/t-member-03.jpg" alt="">
<div class="overlay-content">
<h4 class="text-white ml-3 my-0">Craig Thompson</h4>
<p class="text-white ml-3 mb-3">Manager</p>
<span class="socail-l ml-3 mb-3">
<a href="#" class="mr-2"><i class="fa fa-facebook box-circle-solid"></i></a>
<a href="#" class="mr-2"><i class="fa fa-twitter box-circle-solid"></i></a>
<a href="#"><i class="fa fa-dribbble box-circle-solid"></i></a>
</span>
</div>
</div>
</div>
</div>
<hr>
<!-- Contact Form -->
<h3>Contact Us</h3>
<p>The meeting of two personalities is like the contact of two chemical substances: if there is any reaction, both are transformed.</p>
<div class="contact-form">
<form>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<input type="text" class="form-control pl-0" id="firstname" placeholder="First Name">
</div>
<div class="form-group col-md-6 col-sm-6">
<input type="text" class="form-control pl-0" id="lastname" placeholder="Last Name">
</div>
<div class="form-group col-md-6 col-sm-6">
<input type="text" class="form-control pl-0" id="email" placeholder="Email Address">
</div>
<div class="form-group col-md-6 col-sm-6">
<input type="phone" class="form-control pl-0" id="phone" placeholder="Phone no.">
</div>
</div>
<div class="form-group">
<textarea class="form-control pl-0" placeholder="Write your message..." onfocus="this.placeholder=''" onblur="this.placeholder='Write your message...'"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Send me email notifications too
</label>
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary px-4">Submit</button>
</div>
</form>
</div>
<hr>
<!-- Footer Section -->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6 copyright">©<script type="text/javascript">document.write(new Date().getFullYear());</script> <a href="https://grafreez.com">Grafreez.com</a></div>
<div class="col-sm-6 col-md-6 text-right ml-auto credit">Created with <i class="fa fa-heart"></i></div>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="container animated zoomIn">
<div class="row">
<!-- Top header -->
<nav class="navbar navbar-expand-lg bg-transparent top-nav">
<a class="navbar-brand mx-auto brand-deco" href="#">GraFreez</a>
</nav>
<!-- Heading Section -->
<div class="heading-sec text-center">
<div class="col-lg-8 col-md-12 mx-auto">
<h1 class="text-uppercase">Coming Soon</h1>
<p>Our website is under construction. We build <strong>Awesome Bootstrap Templates</strong> for you. Download our free and premium templates.</p>
</div>
</div>
<!-- Countdown Timer -->
<div class="countdown-sec mb-4">
<div id="timer"></div>
</div>
<!-- Notification Section -->
<div class="contact-sec mb-5">
<div class="col-md-7 mx-auto subscribe-box my-2 text-center">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Get Notification!
</button>
</div>
<!-- Social Section -->
<div class="col-md-9 mx-auto social-box mt-5">
<div class="social-container text-center">
<span class="social-icon">
<i class="fa fa-facebook-f"></i>
</span>
<span class="social-icon">
<i class="fa fa-twitter"></i>
</span>
<span class="social-icon">
<i class="fa fa-google-plus"></i>
</span>
<span class="social-icon">
<i class="fa fa-linkedin"></i>
</span>
<span class="social-icon">
<i class="fa fa-pinterest-p"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
<script src="https://grafreez.com/wp-content/temp_demos/coming-soon-demo/demo-02/js/jquery.timezz.min.js" type="text/javascript"></script>
<script>
// Countdown Timer Script
$('#timer').timezz({
'date' : 'February 5, 2019 00:00:00',
'days' : 'Days',
'hours' : 'Hrs',
'minutes' : 'Min',
'seconds' : 'Sec'
});
// Menu Sidebar
$(function(){
$("#menu-handle").click(function(){
$("#float-menu").toggleClass("show");
});
});
//Menu Scrollbar
$(function(){
$('.content-block').slimScroll({
height: '100%',
size: '6px',
alwaysVisible: true
});
});
// Animated menu icon script
$(document).ready(function(){
$('#nav-icon1').click(function(){
$(this).toggleClass('open');
});
});
//Remove Placeholder text on focus
jQuery(document).ready(function()
{
jQuery('input').each(function()
{
if (jQuery(this).attr('placeholder') && jQuery(this).attr('placeholder') != '')
{
jQuery(this).attr( 'data-placeholder', jQuery(this).attr('placeholder') );
}
});
jQuery('input').focus(function()
{
if (jQuery(this).attr('data-placeholder') && jQuery(this).attr('data-placeholder') != '')
{
jQuery(this).attr('placeholder', '');
}
});
jQuery('input').blur(function()
{
if (jQuery(this).attr('data-placeholder') && jQuery(this).attr('data-placeholder') != '')
{
jQuery(this).attr('placeholder', jQuery(this).attr('data-placeholder'));
}
});
});
</script>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
body,html{
height: 100%;
}
body{
font-family: 'Lato', sans-serif;
}
/*==========General==========*/
h1,h2,h3,h4,h5,h6{
font-weight: 700;
}
a{
color: #fff;
}
.btn{
border-radius: 0;
text-transform: uppercase;
color: #fff;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.btn:focus{
box-shadow: none;
}
.btn-primary{
background-color: #00cec9;
border-color: #00cec9;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active{
background-color: #098c87;
border-color: #098c87;
}
.form-control{
border-radius: 0;
border:none;
border-bottom: 2px solid #666;
}
.form-control:focus{
box-shadow: none;
}
/*==========Main Wrapper==========*/
.main-screen{
background-image: url(https://grafreez.com/wp-content/temp_demos/coming-soon-demo/demo-02/img/body-bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 140%;
overflow: hidden;
}
.main-screen:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 0;
opacity: 0.55;
background-color: #000;
}
/*==========Floating Menu==========*/
.float-menu{
width: 50%;
height: 100%;
background-color: #fff;
position: absolute;
left:-50%;
transition: 0.3s ease-in;
top: 0;
z-index: 9999;
}
.float-menu.show{
left: 0
}
.float-menu .menu-icon{
position: absolute;
right: -83px;
top: 43px;
transition: 0.3s ease-in;
z-index: 99999;
}
.float-menu.show .menu-icon{
right: unset;
left: 20px;
top: 20px;
}
.float-menu .content-block{
float: left;
width: 100%;
color: #232323;
}
.float-menu h2{
font-weight: 700;
}
.float-menu p{
font-weight: 400
}
/*====Animated Menu Icon===*/
#nav-icon1{
width: 50px;
height: 20px;
position: relative;
margin: -8px auto 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span{
display: block;
position: absolute;
height: 2px;
width: 67%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1){
top: 0px;
}
#nav-icon1 span:nth-child(2){
top: 11px;
}
#nav-icon1 span:nth-child(3){
top: 22px;
}
#nav-icon1.open span{
background: #00cec9;
}
#nav-icon1.open span:nth-child(1){
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2){
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3){
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/*===Our Member Block===*/
.member-box{
width:100%;
float:left;
position:relative;
overflow:hidden
}
.member-box h4{
}
.member-box:hover> img{
transform: scale(1.05);
transition:1s ease-in;
}
.member-box img{
transition:0.3s ease-in;
}
.member-box.t-bottom .overlay-content{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.member-box.t-center .overlay-content{
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
}
.member-box i.box-circle-solid{
padding: 0;
width: 35px;
height: 35px;
text-align: center;
line-height: 40px;
border: 1px solid #fff;
border-radius: 50%;
line-height: 35px;
transition:0.4s ease-in;
}
.member-box i.box-circle-solid:hover{
background-color: #00cec9;
border-color: #00cec9;
color: #fff;
}
/*===Member Hover Animation===*/
.member-box.anim-lf .overlay-content{
position:absolute;
background-color:rgba(0,0,0,0.6);
left:-100%;
bottom:0;
width: 100%;
height:100%;
transition:0.4s ease-in;
}
.member-box.anim-lf:hover>.overlay-content{
left:0;
transition:0.4s ease-in;
}
/*====Footer Section===*/
footer{
float: left;
width: 100%;
padding: 15px 0;
color: #232323;
bottom: 0;
}
footer a{
color: #00cec9;
}
/*==========Top Brand Block==========*/
.top-nav{
float: left;
width: 100%;
color: #fff;
margin: 40px 0;
position: relative;
z-index: 2;
}
.top-nav .navbar-brand{
font-weight: 600;
font-size: 23px;
}
.top-nav .navbar-brand:hover{
color: #fff;
}
.top-nav .brand-deco{
border: 1px solid #00cec9;
padding-left: 20px;
padding-right: 20px;
color: #00cec9;
}
.top-nav .brand-deco:hover{
border: 1px solid #00cec9;
background-color: #00cec9;
color: #fff;
}
/*==========Main Content Section==========*/
.heading-sec{
float: left;
width: 100%;
color: #fff;
padding: 30px;
position: relative;
z-index: 2;
}
.heading-sec h1{
font-weight: 700;
font-size: 52px;
}
.heading-sec strong{
color: #00cec9;
}
/*==========Countdown Block==========*/
.countdown-sec{
float: left;
width: 100%;
position: relative;
z-index: 2;
color: #fff;
text-align: center;
}
.countdown-sec #timer{
float: left;
width: 100%
}
.countdown-sec #timer span{
font-size: 55px;
position: relative;
line-height: normal;
padding: 10px 20px 0;
display: inline-block;
font-weight: 700;
}
.countdown-sec #timer span i{
font-style: normal;
font-size: 20px;
font-weight: normal;
position: absolute;
width:50%;
text-align: center;
left: 50%;
margin-left: -25%;
top: -10px;
color: #fff;
opacity: 0.7;
}
/*==========Notification and Social Media==========*/
.contact-sec{
float: left;
width: 100%;
position: relative;
z-index: 2;
}
.contact-sec .subscribe-box .btn{
padding:8px 20px;
}
.contact-sec .social-container{
width: 80%;
margin: 0 auto;
}
.contact-sec .social-icon{
border: 1px solid #efefef;
color: #efefef;
font-size: 20px;
width: 40px;
display: inline-block;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
margin: 0 5px;
}
.contact-sec .social-icon:hover{
color: #fff;
background-color: #00cec9;
border-color: #00cec9;
transition: .25s ease-in;
-webkit-transition: .25s ease-in;
-moz-transition: .25s ease-in;
}
/*===Notification Modal===*/
.custom-modal .modal-header{
border-radius: 0;
background-color: #fff;
position: relative;
}
.custom-modal .modal-header h5{
color: #00cec9;
margin: 0 auto;
font-size: 1.6rem;
font-weight: 700;
}
.custom-modal .modal-header .close{
position: absolute;
right: 10px;
top: 4px;
outline: none
}
.custom-modal .modal-footer{
justify-content: center;
}
.action-sec{background-color:#4E3C31; float:left; width:100%;}
.action-sec h2{color:#fff; margin-bottom:20px;}
/*==========Responsive Media Queries==========*/
@media only screen and (max-width: 900px){
.float-menu{
width:100%;
left: -100%;
}
}
@media only screen and (max-width: 768px){
.heading-sec h1{
font-size: 45px;
}
.heading-sec{
padding-left: 0px;
padding-right: 0px;
}
}
@media only screen and (max-width: 575px){
footer .copyright,footer .credit{
width: 50%;
font-size: 13px;
}
}
@media only screen and (max-width: 574px){
.countdown-sec #timer span{
font-size: 55px;
width: 50%;
float: left;
margin-bottom: 40px;
}
