"header-1"
Bootstrap 4.0.0 Snippet by sahildesigner

Post to Facebook Tweet this

<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 ----------> <!doctype html> <html> <head> <meta charset="utf-8"> <title>my-web-site</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <!--header start--> <section> <header> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="logo"> <a href=""><img src="img/logo.PNG" alt=""></a> </div> </div> <div class="col-sm-8"> <div class="nav-ber"> <ul> <li><a href="">SPECIAL OFFERS</a></li> <li><a href="">DESTINATIONS</a></li> <li><a href="">HOTEL BRANDS</a></li> <li><a href="">MEMBERSHIP BENEFITS</a></li> <li><a href="">FIND LOCAL EXPERIENCES</a></li> </ul> </div> </div> </div> </div> </header> </section> <!--header end--> <!--banner start--> <section class="banner"> <div class="container-fluid header-botton"> <div class="tt"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="header-search"> <input type="search" placeholder="Find Hotels by"> <i class="fa fa-search" aria-hidden="true"></i> </div> </div> <div class="col-sm-6"> <div class="header-bottom-nav"> <ul> <li><a href="">MEMBER SIGN-IN</a></li> <li><a href="">JOIN DISCOVERY</a></li> <li><a href="">MY RESERVATIONS</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="banner-inner"> <p>ENJOY AWE-INSPIRING VIEWS OF THE BLUE RIDGE MOUNTAINS</p> <h2>Explore Local Experiences in Portugal</h2> <i class="fa fa-chevron-right" aria-hidden="true"></i> </div> </div> </div> </div> </section> <!--banner end--> <!--MEMBERSHIP start--> <section class="membership"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="membership-inner text-center"> <h3>IT’S MORE THAN A MEMBERSHIP. IT’S YOUR WINDOW TO THE WORLD.<br><span><i class="fa fa-angle-down" aria-hidden="true"></i></span></h3> <p><strong>DISCOVERY</strong> is a one-of-a-kind loyalty programme that gives you recognition and benefits across <br>35 hotel brands with 550 hotels in 76 countries, and rewards you with Local Experience awards,<br> authentic activities that help you connect to the culture and local traditions of each destination.</p> </div> </div> </div> </div> </section> <!--MEMBERSHIP end--> <!--HOTEL BRANDS start--> <section class="hotel-brands"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="hotel-brands-inner"> <img src="img/Double-Tier-Night-Credits_bw_promo_banner.jpg" alt="" style="width:100%"> <h3>DOUBLE TIER NIGHT CREDITS</h3> <p>We are rewarding you now and into next<br> year! Register to earn double night credits.</p> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> </div> <div class="col-sm-6"> <div class="hotel-brands-inner"> <img src="img/1.jpg" alt="" style="width:100%"> <h3>DOUBLE TIER NIGHT CREDITS</h3> <p>We are rewarding you now and into next<br> year! Register to earn double night credits.</p> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="hotel-brands-inner"> <img src="img/2.jpg" alt="" style="width:100%"> <h3>DOUBLE TIER NIGHT CREDITS</h3> <p>We are rewarding you now and into next<br> year! Register to earn double night credits.</p> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> </div> <div class="col-sm-6"> <div class="hotel-brands-inner"> <img src="img/3.jpg" alt="" style="width:100%"> <h3>DOUBLE TIER NIGHT CREDITS</h3> <p>We are rewarding you now and into next<br> year! Register to earn double night credits.</p> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="hotel-brands-inner"> <img src="img/4.jpg" alt="" style="width:100%"> <h3>DOUBLE TIER NIGHT CREDITS</h3> <p>We are rewarding you now and into next<br> year! Register to earn double night credits.</p> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> </div> <div class="col-sm-6"> <div class="hotel-brands-inner"> <img src="img/5.jpg" alt="" style="width:100%"> <h3>DOUBLE TIER NIGHT CREDITS</h3> <p>We are rewarding you now and into next<br> year! Register to earn double night credits.</p> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> </div> </div> </div> </section> <!--HOTEL BRANDS end--> <!--SHARE YOUR MEMORIES start--> <section class="share-memories"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="share-memories-inner"> <h2>SHARE YOUR MEMORIES</h2> </div> </div> </div> </div> </section> <!--SHARE YOUR MEMORIES end--> <!--DISCOVERYLOYALTY start--> <section class="discoveryloyalty"> <div class="container"> <div class="row"> <div class="col-sm-5"> <div class="discoveryloyalty-inner"> <h2>DISCOVERYLOYALTY</h2> <button type="button" class="btn btn-info"><i class="fa fa-facebook-square" aria-hidden="true"></i>  Like</button> <button type="button" class="btn btn-info"><i class="fa fa-instagram" aria-hidden="true"></i>  Follow</button> <button type="button" class="btn btn-info"><i class="fa fa-camera-retro" aria-hidden="true"></i>  + Photo</button> </div> </div> <div class="col-sm-7"> <div class="discoveryloyalty-inner"> <p>Share your best travel memories with us using #DISCOVERYLoyalty so the whole world can see the amazing places and things you’ve seen while staying within DISCOVERY hotels.</p> </div> </div> </div> </div> </section> <!-- DISCOVERYLOYALTY end--> <!-- carousel start--> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="slider"> <div> <ul> <li><a href=""><img src="img/15.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/11.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/12.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/13.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/16.jpg" alt="" style="width:200px; height:200x;"></a></li> </ul> </div> <div> <ul> <li><a href=""><img src="img/14.jpg" alt="" style="width:200px; height:200x;"></a></li> <li><a href=""><img src="img/15.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/16.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/12.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/13.jpg" alt="" style="width:200px; height:200px;"></a></li> </ul> </div> <div> <ul> <li><a href=""><img src="img/17.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/16.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/19.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/12.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/13.jpg" alt="" style="width:200px; height:200px;"></a></li> </ul> </div> <div> <ul> <li><a href=""><img src="img/20.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/21.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/22.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/12.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/13.jpg" alt="" style="width:200px; height:200px;"></a></li> </ul> </div> <div> <ul> <li><a href=""><img src="img/23.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/24.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/11.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/12.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/13.jpg" alt="" style="width:200px; height:200px;"></a></li> </ul> </div> <div> <ul> <li><a href=""><img src="img/12.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/13.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/14.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/20.jpg" alt="" style="width:200px; height:200px;"></a></li> <li><a href=""><img src="img/21.jpg" alt="" style="width:200px; height:200px;"></a></li> </ul> </div> </div> </div> </div> </div> </section> <!-- carousel end--> <!-- footer start--> <section class="footer"> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="footer-inner"> <img src="img/GHA-Site-Template.png" alt=""> </div> </div> <div class="col-sm-6"> <div class="footer-inner"> <p><a href="">SITE MAP  |  ABOUT GHA  |  PRESS  |  SUPPORT & F.A.Q |  USCONTACT US</a></p> </div> </div> <div class="col-sm-3"> <div class="footer-inner"> <a href=""><img src="img/Capture.PNG" alt=""></a> </div> </div> </div> </div> </section> <!-- footer end--> </body> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script> new WOW().init(); </script> <script> $(document).ready(function(){ $('.slider').bxSlider(); }); </script> </html>
body{ font-family: 'Open Sans', sans-serif;} h1,h2,h3,h4,h5{font-family: 'Roboto', sans-serif;} a:hover{ text-decoration:none;} /*header start*/ header{ background:#2e2c2c; padding:30px 0px;} header .logo header .nav-ber ul{ padding:0px; margin:0px;} header .nav-ber ul li{ display:inline-block; margin-left:5px; list-style:none} header .nav-ber ul li a{ color:#fff; padding:3px;} /*header end*/ /*banner start*/ .banner{ padding:0px; background:url(../img/download.jpg) no-repeat; background-size:cover; padding-bottom:500px;} .banner .header-search input[type="search"]{ width:100%; padding:10px; border:0px; position:relative;} .banner .header-search .fa-search { position: absolute; z-index: 11; right: 26px; top: 10px; color: #000; font-size: 20px; opacity: 0.5; } .header-botton{ background:rgba(0, 0, 0, 0.52); padding:30px 0px;} .banner .header-bottom-nav{} .banner .header-bottom-nav ul{ padding:0px; margin:0px;} .banner .header-bottom-nav ul li{ list-style:none; display:inline-block; margin-left:10px;} .banner .header-bottom-nav ul li a{ color:#ac9760; padding:5px;} .banner-inner{ position:absolute; z-index:111; right:0px; background:rgba(46, 44, 44, 0.71); top:150px; color:#fff; padding:15px 15px 0px 45px;} .banner-inner p{ padding-bottom:0px !important;} .banner-inner h2{ padding-top:0px !important; line-height:0px; padding-bottom:20px;} .banner-inner .fa-chevron-right { position: absolute; left: 10px; font-size: 40px; color: #fff; top: 30px; } /*banner end*/ /*membership start*/ .membership{ padding:100px 0px;} .membership-inner{} .membership-inner p{ font-size:18px;} /*membership end*/ /*hotel-brands start*/ .hotel-brands{ padding:100px 0px; background:#ebebeb;} .hotel-brands-inner{ padding:0px 0px 20px 0px; position:relative;margin-bottom:50px; margin-left:15px; margin-right:15px; background:#fff; } .hotel-brands-inner p,h3{ padding-left:25px;} .hotel-brands-inner .fa-angle-right { position: absolute; color: #000; right: 30px; bottom: 40px; z-index: 22; font-size: 55px; background: #afafaf; padding: 6px 20px; border-radius: 100%; } /*hotel-brands end*/ /*SHARE YOUR MEMORIES start*/ .share-memories{ background:url(../img/UGC_homepage_block_landing_block_header.jpg) no-repeat; background-size:100%; background-position:center;} .share-memories-inner{ padding:100px 0px;} .share-memories-inner h2{ font-size:40px; color:#fff; padding-top:15px;} /*SHARE YOUR MEMORIES end*/ /*DISCOVERYLOYALTY start*/ .discoveryloyalty{ padding:100px 0px;} .discoveryloyalty-inner h2{ margin-bottom:35px;} .discoveryloyalty-inner p{ padding-top:40px;} /*DISCOVERYLOYALTY end*/ .slider{} .slider ul{ padding:0px; margin:0;} .slider ul li{ display:inline-block; list-style:none; width: 200px; height: 200px; margin-left:19px; } .footer{ background:#3a3637; padding:15px 0px;} .footer p{ padding-top:30px;}

Related: See More

Now UI Kit Angular
Resize & Fixed Header (shrinking header)
Header Curtain Effect
Left Sideways Panel Header

Questions / Comments: