"Coming Soon Template"
Bootstrap 4.0.0 Snippet by grafreez

<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; }

Related: See More


Questions / Comments: