April 10, 2026

Bootstrap Carousel

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,600,700,800,900|Roboto:300,400,500');
/* vietnamese */
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
body { font-family: 'Roboto', sans-serif; font-size: 1rem; }
* { margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 { font-family: 'Anton'; } 
        /* slider */
.slide { background: url(banner-3.jpg) center fixed no-repeat; background-size: cover;  width: 100%;}
.slide .item { height: 100vh;}
.carousel-caption { position: inherit;     margin-top: 10%; text-align: center;}
.carousel-caption  h2 { font-size: 10em; text-transform: uppercase; text-align: center; margin-top: .5em;   }
.carousel-caption h4 { font-weight: 400; text-transform: uppercase; font-size: 2.5em;}
.bg-danger { background: #f00; color: #fff; display: inline-block; font-size: 2em; text-shadow: none; padding: 4px 8px;}
 .order-now { color: #fff;  background: #F44336;  border-radius: 0px; font-size: 2.5em; padding: 10px 60px;  border-radius: 40px; font-family: 'Anton'; letter-spacing: 1px; font-weight: 100; margin-top: 40px;}
.order-now:hover { color: #fff;}
.black-overlay { position: absolute;  top: 0; left: 0;  width: 100%;  height: 100vh;  background: transparent; }
.black-overlay.opac5 { background: url(overlay-pattern.png) rgba(0,0,0,.58)!important; z-index: -1; }
.carousel-caption h5 {     font-weight: 300;     font-family: roboto;   font-size: 2em; line-height: 30px; margin-top: 30px;}

@media (max-width:990px) {
.carousel-caption { position: inherit;     margin-top: 15%; text-align: center;}
h1 { font-size: 8em; text-align: center;}
}a
<div id="myCarousel" class="carousel slide " data-ride="carousel" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="black-overlay opac5"></div>
        <div class="container">
        <div class="carousel-caption"> 
        <h2 class="wow slideInUp"><span class="wow slideInUp">Web Design</span>  <span class=""> Service</span></h2>
        <h4> What kind of design is the Best for you</h4>
        <h5>Our Web Design Service is to bring Life & Direction to your business Concept or Vision. WTE team spends considerable time & effort to understand your Business needs in depth. Our professionals would come up with some very good sample designs best suited for your Business. By interacting with you, we further narrow down to the final design.</h5>
        <button class=" btn order-now wow rollIn">Explore Now</button>
        </div>
        </div>
        </div>
        <div class="item">
            <div class="black-overlay opac5"></div>
        <div class="container">
            <div class="carousel-caption"> 
                <h2 class="wow slideInUp"><span class="wow slideInUp">Seo </span>  <span class="">Services</span></h2>
                <h4>is your website giving you the good return on your Investment.? </h4>
                <h5>Ever wondered why the brand that acts as your competitor is getting more attention than you? Ever thought why you never appear in the first or the second page of the search? Have you ever considered optimizing your brand, or your website?</h5>
                <button class=" btn order-now wow rollIn">Explore Now</button>
                </div>
        </div>
        </div>
        <div class="item">
          <div class="black-overlay opac5"></div>
        <div class="container">
            <div class="carousel-caption"> 
                <h2 class="wow slideInUp"><span class="wow slideInUp">Affiliate  </span>  <span class="">Marketing</span></h2>
                <h4> We assure you of total satisfaction. </h4>
                <h5>   For individuals looking to profit on the web, affiliate marketing is a well-known decision. This is by and large seen as a generally safe choice in light of the fact that there is no compelling reason to make any forthright financing.</h5>
                <button class=" btn order-now wow rollIn">Explore Now</button>
                </div>
        </div>
        </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
        </div><!-- /.carousel -->

 

.carousel-caption { position: inherit; margin-top: 20%; text-align: center;} h1 { font-size: 5em; text-align: center;} }

 

 @import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,600,700,800,900|Roboto:300,400,500');
/* vietnamese */
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
body { font-family: 'Roboto', sans-serif; font-size: 1rem; }
* { margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 { font-family: 'Anton'; } 
        /* slider */
.slide { background: url(banner-3.jpg) center fixed no-repeat; background-size: cover;  width: 100%;}
.slide .item { height: 100vh;}
.carousel-caption { position: inherit;     margin-top: 10%; text-align: center;}
.carousel-caption  h2 { font-size: 10em; text-transform: uppercase; text-align: center; margin-top: .5em;   }
.carousel-caption h4 { font-weight: 400; text-transform: uppercase; font-size: 2.5em;}
.bg-danger { background: #f00; color: #fff; display: inline-block; font-size: 2em; text-shadow: none; padding: 4px 8px;}
 .order-now { color: #fff;  background: #F44336;  border-radius: 0px; font-size: 2.5em; padding: 10px 60px;  border-radius: 40px; font-family: 'Anton'; letter-spacing: 1px; font-weight: 100; margin-top: 40px;}
.order-now:hover { color: #fff;}
.black-overlay { position: absolute;  top: 0; left: 0;  width: 100%;  height: 100vh;  background: transparent; }
.black-overlay.opac5 { background: url(overlay-pattern.png) rgba(0,0,0,.58)!important; z-index: -1; }
.carousel-caption h5 {     font-weight: 300;     font-family: roboto;   font-size: 2em; line-height: 30px; margin-top: 30px;}

@media (max-width:990px) {
.carousel-caption { position: inherit;     margin-top: 15%; text-align: center;}
h1 { font-size: 8em; text-align: center;}
}
@media (max-width:767px) {
.carousel-caption { position: inherit;     margin-top: 20%; text-align: center;}
h1 { font-size: 5em; text-align: center;}
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *