Navigation :

Premium Carousel

 <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-interval="7000">
     <div class="carousel-inner carousel-inner-height">
         <div class="carousel-item active"> <img class="d-block w-100" src="images/tiger-3264048_1920.jpg" alt="First slide"> </div>
     <div class="carousel-item"> <img class="d-block w-100" src="images/vintage-1872682_1920.jpg" alt="Second slide"> </div>
     <div class="carousel-item"> <img class="d-block w-100" src="images/tattoo-3268988_1920.jpg" alt="Third slide"> </div>
     <!--FIXED CAPTIONS-->
     <div class="carousel-caption  row text-left">
           <div class="main-title col-md-12">
         <h1 class="h1_bold_huge">Your<br>
               MAIN CAROUSEL TITLE</h1>
       </div>
           <div class="main-subtitle col-md-12">
         <h5>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h5>
       </div>
           <div class="caro-buttons col-md-12">
         <button type="button" class="btn btn-default btn-hover-slide text-uppercase">Rates and Prices</button>
         <button type="button" class="btn btn-default btn-hover-slide2 d-none d-md-block text-uppercase">Special offers</button>
       </div>
           <div class="caro-features col-md-12 d-none d-lg-block">
         <div class="row">
               <div class="col-lg">
             <div class="media mb-5">
                   <div class="mid-icons"><img class="img-fluid" src="/images/icons8-collect-80White.png"/></div>
                   <div class="media-body">
                 <h4 class="mt-0">Fast and precise</h4>
                 <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
               </div>
                 </div>
           </div>
               <div class="col-lg">
             <div class="media mb-5">
                   <div class="mid-icons"><img  class="img-fluid" src="/images/icons8-e-commerce-100White.png"/></div>
                   <div class="media-body">
                 <h4 class="mt-0">Save Money</h4>
                 <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
               </div>
                 </div>
           </div>
               <div class="col-lg">
             <div class="media mb-5">
                   <div class="mid-icons"><img  class="img-fluid" src="/images/icons8-increase-80White.png"/></div>
                   <div class="media-body">
                 <h4 class="mt-0">Better Sale</h4>
                 <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
               </div>
                 </div>
           </div>
             </div>
       </div>
         </div>
     <!--CAPTIONS END-->
 </div>
       <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>



   DEMO

.h1_bold_huge { font-size: 70px; font-weight: 800; font-family: ‘Montserrat’, sherif; margin-left: -4px; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } .main-title { text-shadow: 1px 1px rgba(83,83,83,1.00); } .main-subtitle { text-shadow: 1px 1px 1px rgba(87,87,87,1.00); font-family: ‘Open Sans’, sherif; } .caro-buttons { margin-top: -5px; } .caro-buttons > button { margin-top: 30px; font-family: ‘Montserrat’, sherif; font-weight: 500; border-radius: 0px; } .btn-hover-slide{ display: inline-block; position: relative; padding-top: 0.8em; padding-right: 1.5em; padding-left: 1.5em; padding-bottom: 0.8em; z-index: 0; background-color: rgba(215,58,60,1.00); margin-right: 20px; color: rgba(255,255,255,1.00); border-width: 0px; border-radius: 0px; float: left; } .btn-hover-slide:hover{ display: inline-block; position: relative; padding-top: 0.8em; padding-right: 1.5em; padding-left: 1.5em; padding-bottom: 0.8em; z-index: 0; color: #FFFFFF !important; } .btn-hover-slide:before { content: “”; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(59,102,112,1.00); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out; } .btn-hover-slide:hover:before{transform: scaleX(1);} .btn-hover-slide2{ display: inline-block; position: relative; padding-top: 0.8em; padding-right: 1.5em; padding-left: 1.5em; padding-bottom: 0.8em; z-index: 0; background-color: rgba(58,160,114,1.00); color: rgba(255,255,255,1.00); border-width: 0px; } .btn-hover-slide2:hover{ display: inline-block; position: relative; padding-top: 0.8em; padding-right: 1.5em; padding-left: 1.5em; padding-bottom: 0.8em; z-index: 0; color: #FFFFFF !important; } .btn-hover-slide2:before { content: “”; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(59,102,112,1.00); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out; } .btn-hover-slide2:hover:before{transform: scaleX(1);} .mid-icons { margin-top: 0px; margin-right: 15px; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; width: 80px; background-position: center top; background-size: cover; background-clip: content-box; background-repeat: no-repeat; background-origin: content-box; height: 80px; } .caro-features { margin-top: 30px; border-top: thin solid rgba(255,255,255,1.00); padding-top: 15px; padding-left: 0px; margin-left: 15px; } .media-body > p { font-family: ‘Montserrat’, sherif; font-size: 13px; font-weight: 500; text-shadow: 1px 1px rgba(75,75,75,1.00); } .media-body > h4 { font-family: ‘Montserrat’, sherif; font-size: 18px; text-shadow: 1px 1px rgba(75,75,75,1.00); font-weight: 500 !important; } .full-screen { background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width:440px){ .h1_bold_huge { font-size: 46px; font-weight: 800; font-family: ‘Montserrat’, sherif; margin-left: -4px; text-transform: uppercase; } .carousel-caption { margin-bottom: 5vh;} .main-subtitle > h5 { text-shadow: 1px 1px 1px rgba(87,87,87,1.00); font-family: ‘Open Sans’, sherif; font-size: 16px;}} @media (max-width:1440px){ .carousel-caption { margin-bottom: 0vh;}} @media (width:1920px){ .carousel-caption { margin-bottom: 7%; }<br /> } .media { } .media:hover { }