"nav-ber-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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animate.css"> </head> <body> <!--/*slier start*/--> <section class="banner"> <header> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="logo"> <a href=""><img src="img/logo.png" alt="loho"></a> </div> </div> <div class="col-sm-8 hidden-xs"> <div class="nav-ber text-right"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Features</a></li> <li><a href="">Price</a></li> <li><a href="">Contact</a></li> <li><a href="" class="login">Login</a></li> </ul> </div> </div> </div> </div> </header> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="slider-left"> <img src="img/b.png" alt="slider" class="google-search"> </div> </div> <div class="col-sm-8 hidden-xs"> <div class="slider-right"> <h2>Gummi Bears Marzipan Caramels.</h2> <p>Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing. Cookie chupa chups cake dessert lollipop marzipan donut apple pie. Cookie cotton candy oat cake sweet roll topping apple pie marzipan. </p> <div class="slider-button"> <a href="" class="slider-button-1">PURCHASE NOW</a> <a href="" class="slider-button-1 bt">learn More</a> </div> </div> </div> </div> </div> </section> <!--/*slier end*/--> <!--/*about start*/--> <section class="about"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="about-left"> <h3>ABOUT US</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. .</p> <div class="about-nav"> <ul> <li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-dribbble" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li> </ul> </div> </div> </div> <div class="col-sm-5"> <div class="about-right text-center"> <img src="img/about.png" alt=""> </div> </div> </div> </div> </section> <!--/*about end*/--> <!--/*Title Goes Here start*/--> <section class="title-goes-here"> <div class="container"> <div class="row text-center"> <div class="col-sm-4"> <div class="title-goes-here-inner-box"> <img src="img/chat.png" alt=""> <h4>Title Goes Here</h4> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p> </div> </div> <div class="col-sm-4"> <div class="title-goes-here-inner-box"> <img src="img/title-2.png" alt=""> <h4>Title Goes Here</h4> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p> </div> </div> <div class="col-sm-4"> <div class="title-goes-here-inner-box"> <img src="img/title-3.png" alt=""> <h4>Title Goes Here</h4> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat </p> </div> </div> </div> </div> </section> <!--/*Title Goes Here end*/--> <!--/*Lorem Ipsum Dolor Sit Amet start*/--> <section class="sit-amet-start text-center"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="sit-amet-start-inner"> <h3>Lorem Ipsum Dolor Sit Amet</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p> <img src="img/google-search.png" alt="" class="google-search"> </div> </div> </div> </div> </section> <!--/*Lorem Ipsum Dolor Sit Amet end*/--> <!--/*SELECT THE PRICE THAT YOU LIKE start*/--> <section class="economy-section"> <div class="container text-center"> <div class="row"> <div class=" col-sm-offset-2 col-sm-8 text-center"> <h3>SELECT THE PRICE THAT YOU LIKE</h3> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper<br> suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> <div class="row"> <div class="col-sm-offset-3 col-sm-2"> <div class="economy a"> <h4>ECONOMY</h4> <ul> <li>2GB</li> <li>200MB</li> <li>UNLIMITED</li> <li>1 Members</li> <li>1 e-Mail accounts</li> <li><a href="">SIGN UP</a></li> </ul> </div> </div> <div class="col-sm-2"> <div class="economy b"> <h4>ECONOMY</h4> <ul> <li>2GB</li> <li>200MB</li> <li>UNLIMITED</li> <li>1 Members</li> <li>1 e-Mail accounts</li> <li><a href="">SIGN UP</a></li> </ul> </div> </div> <div class="col-sm-2"> <div class="economy c"> <h4>ECONOMY</h4> <ul> <li>2GB</li> <li>200MB</li> <li>UNLIMITED</li> <li>1 Members</li> <li>1 e-Mail accounts</li> <li><a href="">SIGN UP</a></li> </ul> </div> </div> </div> </div> </section> <!--/*SELECT THE PRICE THAT YOU LIKE end*/--> <!--/*CONTACT US start*/--> <section class="contact"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h3>CONTACT US</h3> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="contact-left"> <p><span><i class="fa fa-map-marker" aria-hidden="true"></i></span><span>Doori 7 Street, Block 15B No.1C Polda I Beringin Raya Bandar Lampung </span></p> <form> <input type="text" class="input-type" placeholder="YOUR NAME*"> <input type="email" class="input-type" placeholder="YOUR EMAIL*"> <input type="text" class="input-type" placeholder="Choose your Subject "> </form> </div> </div> <div class="col-sm-6"> <div class="contact-right"> <p><span></span><i class="fa fa-phone" aria-hidden="true"></i><span>(0271) 123 - 456</span><span><i class="fa fa-envelope-o" aria-hidden="true"></i></span> <span>company-email@gmail.com</span></p> <textarea rows="7" placeholder="Your Message"></textarea> <div class="text-right"> <a href="" class="submit">submit</a> </div> </div> </div> </div> </div> </section> <!--/*CONTACT US end*/--> <!--/*footer start*/--> <section class="footer text-center"> <div class="container"> <div class="row"> <div class="col-sm-12"> <p>©2013 - 2014 Flat App. All right reserved.</p> </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> new WOW().init(); </script> <script> </script> </html>
body{ font-family: 'Open Sans', sans-serif;} h1,h2,h3,h4,h5{font-family: 'Roboto', sans-serif;} a:hover{ text-decoration:none;} .banner{ background:url(../img/banner-bg.png) no-repeat; background-size:cover;} /* header star*/ .banner header{ padding:20px 0px;} .banner .nav-ber{} .banner .nav-ber ul { padding:0px; margin:0px;} .banner .nav-ber ul li{ list-style:none; display:inline-block; padding:0px 10px;} .banner .nav-ber ul li a{ text-decoration:none; padding:5px 10px; color:#fff;} .banner .nav-ber ul li .login{ background:#e76e66;} /* header end*/ /* slider star*/ .banner .slider-right{ color:#fff; padding-right:245px; margin-top:100px;} .banner .slider-right h2{ margin-bottom:30px;} .banner .slider-right,.slider-left{ padding-top:100px;} .banner .slider-right .slider-button{ margin-top:35px;} .banner .slider-right .slider-button-1{ color:#fff; background:#e76e66; padding:5px 10px;} .banner .slider-right .bt{ background:#dda56c; margin-left:11px; position:relative;} .banner .slider-right .bt:before{ color:#000; content: "or";background: #fff;padding: 3px 6px;border-radius: 100%;position: absolute;z-index: 11;left: -20px;bottom: 2px;} /* slider end*/ /*about start*/ .about{ padding:120px 0px 80px 0px; background:#ffffff; position:relative;} .about:before { content: ''; position: absolute; bottom: -100px; background: url(../img/Untitled-1-1.png) no-repeat; background-size: 100%; width: 100%; padding: 50px 0px; z-index: 111; left: 0px; } .about-nav{ } .about-nav ul{ padding:0px; margin:0px;} .about-nav ul li{ list-style:none; display:inline-block;} .about-nav ul li a{ text-decoration:none; color:#fff; margin-right:10px;} .about-nav ul li a .fa-twitter{ background:#49c8f5; padding:10px;} .about-nav ul li a .fa-facebook{ background:#3b5a9b; padding:10px;} .about-nav ul li a .fa-dribbble{ background:#ef5b93; padding:10px;} .about-nav ul li a .fa-pinterest-p{ background:#ed2e2e; padding:10px;} .about-nav ul li a .fa{ transition:2s;} .about-nav ul li a:hover .fa{transform:scale(1.3)} /*about end*/ /*Title Goes Here start*/ .title-goes-here{ background:#f6f6f7; padding:80px 0px 80px 0px; position:relative} .title-goes-here:before { content: ''; position: absolute; /* top: 0px; */ background: url(../img/Untitled-2.png) no-repeat; background-size: 100%; /* top: -13px; */ width: 100%; padding: 50px; bottom: -100px; z-index: 111; } .title-goes-here .title-goes-here-inner-box{ padding:0px 45px;} /*Title Goes Here end*/ /*sit-amet-start*/ .sit-amet-start{ background:#dda56c; padding:80px 0px 0px 0px; position:relative;} .sit-amet-start:before { content: ''; position: absolute; bottom: -90px; background: url(../img/Untitled-1.png) no-repeat; background-size: 100%; width: 100%; padding: 45px; left: 0px; }.sit-amet-start .sit-amet-start-inner{ position:relative;} .sit-amet-start .sit-amet-start-inner p{ padding-bottom:50px;} .sit-amet-start .sit-amet-start-inner:before{ content:''; position:absolute; top: 55%;left:0; background:url(../img/right-arrow.png) no-repeat; width:50px; padding:20px;} .sit-amet-start .sit-amet-start-inner:after{ content:''; position:absolute; top: 55%;right:0; background:url(../img/right-l.png) no-repeat; width:50px; padding:20px;} /*sit-amet- end*/ /*economy-section start*/ .economy-section{ padding:80px 0px;} .economy-section p{ padding-bottom:50px;} .economy{ background:#6cbfa1;} .economy h4{ background:#1b7e5a; padding:30px 0px; position:relative; } .economy.b{background:#f3aea8;} .economy.b h4{background:#e76e66;} .economy.c{background:#9bc9d4;} .economy.c h4{background:#579aa9;} .economy h4:after{ content:'5$'; position:absolute; background:#166549; border-radius:100%; left:40%; padding:10px;top:50px;} .economy.b h4:after{ content:'5$'; position:absolute; background:#b95752; border-radius:100%; left:40%; padding:10px;top:50px;} .economy.c h4:after{ content:'5$'; position:absolute; background:#457b87; border-radius:100%; left:40%; padding:10px;top:50px;} .economy ul{ padding:0px ; margin:0px;} .economy ul li{ list-style:none; margin:10px 0px;} .economy ul li a{text-decoration:none; background:#1b7e5a; color:#fff; padding:10px 15px; display:inline-block; margin:20px 0px;} .economy.b ul li a{ background:#e76e66;} .economy.c ul li a{ background:#579aa9;} /*economy-section end*/ /*CONTACT US start*/ .contact{ padding:80px 0px; background:#2e2e2e; color:#fff; position:relative;} .contact:before{ content:''; position:absolute; top:0px; background:url(../img/Untitled-3.png) no-repeat; background-size:100%; top: -91px; width:100%; padding:50px;} .contact h3{ margin-bottom:50px;} .contact span{ margin-left:10px;} .contact-left{} .contact-left .input-type{ border-radius:5px; display:block; padding:10px 10px; width:100%; border:1px solid #eeeeee; margin-bottom:15px;} .contact-right textarea{ border-radius:5px; display:block; padding:10px 10px; width:100%; border:1px solid #eeeeee; } .contact-right .submit{ background:#e76e66; padding:10px; text-decoration:none; border-radius:5px; color:#fff;display: inline-block;margin-top: 20px;} /*CONTACT US end*/ /*footer start*/ .footer{ padding:20px 0px; background:#171717; color:#fff;} /*footer end*/ @media(max-width:767px){ .contact:before{ display:none; content:''; position:absolute; top:0px; background:url(../img/Untitled-3.png) no-repeat; background-size:100%; top: -91px; width:100%; padding:50px} .google-search{ width:100%} .about-right{ margin-top:30px;} .economy{ margin-bottom:30px;} .economy h4:after{ left:44%;} .economy.b h4:after{ left:44%;} .economy.c h4:after{ left:44%;} .about-nav { /* margin: auto; */ text-align: center; margin: 30px; } .about h3{ text-align:center;} .title-goes-here .title-goes-here-inner-box { padding: 0px 45px; /* margin-bottom: 30px; */ margin-top: 40px; } }

Related: See More

Material Dashboard Pro

Questions / Comments: