<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="xuzo-carousel xuzo-fade-carousel xuzo-slide" data-ride="xuzo-carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <div class="xuzo-overlay"></div> <!-- Wrapper for slides --> <div> <div class="xuzo-item xuzo-slides xuzo-active"> <div class="xuzo-slide-1"></div> <div class="xuzo-hero"> <hgroup> <h1>We are creative</h1> <h3>Get start your next awespme project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> </div> </div>

/* Fade content bs-carousel with hero headers Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.xuzo-com Image credits: unsplash.xuzo-com */ /********************************/ /* Fade Bs-carousel */ /********************************/ .xuzo-fade-carousel { position: relative; height: 100vh; } .xuzo-fade-carousel .xuzo-carousel-inner .xuzo-item { height: 100vh; } .xuzo-fade-carousel .xuzo-carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .xuzo-fade-carousel .xuzo-carousel-indicators > li.xuzo-active { width: 10px; height: 10px; opacity: 1; } /********************************/ /* Hero Headers */ /********************************/ .xuzo-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); } .xuzo-hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .xuzo-fade-carousel .xuzo-carousel-inner .xuzo-item .xuzo-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; } .xuzo-fade-carousel .xuzo-carousel-inner .xuzo-item.xuzo-active .xuzo-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; } /********************************/ /* Overlay */ /********************************/ .xuzo-overlay { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #080d15; opacity: .7; } /********************************/ /* Custom Buttons */ /********************************/ .xuzo-btn.xuzo-btn-lg {padding: 10px 40px;} .xuzo-btn.xuzo-btn-hero, .xuzo-btn.xuzo-btn-hero:hover, .xuzo-btn.xuzo-btn-hero:focus { color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /********************************/ /* Slides backgrounds */ /********************************/ .xuzo-fade-carousel .xuzo-slides .xuzo-slide-1, .xuzo-fade-carousel .xuzo-slides .xuzo-slide-2, .xuzo-fade-carousel .xuzo-slides .xuzo-slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .xuzo-fade-carousel .xuzo-slides .xuzo-slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } .xuzo-fade-carousel .xuzo-slides .xuzo-slide-2 { background-image: url(https://ununsplashimgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .xuzo-fade-carousel .xuzo-slides .xuzo-slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .xuzo-hero { width: 980px; } } @media screen and (max-width: 640px){ .xuzo-hero h1 { font-size: 4em; } }