<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar nav-vk"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand logo" href="#"><img src="http://vivekbisht.com/img/logo.png" alt=""></a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#Home"> Home </a></li> <li><a href="#About"> About </a></li> <li><a href="#Services"> Services </a></li> <li><a href="#Packages"> Packages </a></li> <li><a href="#Contact"> Contact </a></li> </ul> </div> </div> </div> <!-- slider --> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> <h1>We are creative</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-2"></div> <div class="hero"> <hgroup> <h1>We are smart</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> <h1>We are amazing</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); *{ margin:0; padding:0; } body{ min-height:2000px; font-family: 'Josefin Sans', sans-serif; font-size:22px; } .nav-vk{ border-radius: 0px; background: #159957; background: -webkit-linear-gradient(to left, #155799, #159957); background: linear-gradient(to left, #155799, #159957); padding:10px 0; margin:0; } .logo { z-index: 999; width: 200px; height: auto; background: #fff; position: absolute; top: -5px; } .logo img{ width:100%; } .nav-vk li{ margin-right:5px; } .nav-vk li:before{ content:" "; position:absolute; top:0; left:0; width:100%; height:100%; transform:skew(-25deg); border:2px solid #FFf; margin-right:5px; } .nav-vk li:hover:before{ background:#fff; } .nav-vk li:hover a { color:#999; } .nav > li > a{ color:#fff; } .nav > li > a:focus, .nav > li > a:hover { text-decoration: none; background-color: transparent; } /* slider */ .fade-carousel { position: relative; height: 100vh; min-height:550px; } .fade-carousel .carousel-inner .item { height: 100vh; min-height:550px; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; } .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /********************************/ /* Custom Buttons */ /********************************/ .btn.btn-lg {padding: 10px 40px;} .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /********************************/ /* Slides backgrounds */ /********************************/ .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3 { height: 100vh; min-height:550px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .slides .slide-1 { background-image: url('https://picsum.photos/1600/1000?image=1033'); } .fade-carousel .slides .slide-2 { background-image: url('https://picsum.photos/1600/1000?image=1050'); } .fade-carousel .slides .slide-3 { background-image: url('https://picsum.photos/1600/1000?image=1037'); } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } }