Loading...

Elements Top Promo bar

Top Promo bar

Top Promo bar 1
HTML Code:
<!--Topbar-->
<div class="top-info-bar style1 d-none d-lg-block d-md-block">
   <div class="topBar-slider-style1 alert fade show" role="alert">
      <div class="item text-uppercase text-center d-flex align-items-center justify-content-center">
         <a href="#">Purchase This Incredible Template Now! Sale end In</a>
         <!--Countdown Timer-->
         <div class="promo-counter days-time" data-countdown="2024/10/01"></div>
         <!--End Countdown Timer-->
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
      <div class="item text-center d-flex align-items-center justify-content-center">
         Up to <b class="mx-2" style="color:#2170b1;">80% Off</b> on entire store! hurry up! <a href="shop-left-sidebar.html" class="btn btn-small mx-2">Shop Now</a> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
   </div>
</div>
<!--End Topbar--> 
Top Promo bar 2
HTML Code:
<!--Topbar-->
<div class="top-info-bar style1">
   <div class="topBar-slider-style2 alert fade show" role="alert">
      <div class="item text-uppercase text-center d-flex-center justify-content-center">
         LIMITED TIME OFFER! SALE WILL END SOON
         <!--Countdown Timer-->
         <div class="promo-counter days-time" data-countdown="2024/10/01"></div>
         <!--End Countdown Timer-->
         <a href="shop-left-sidebar.html" class="btn btn-small lh-1 text-transform-none d-md-block d-lg-block d-none">Shop Now</a>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
   </div>
</div>
<!--End Topbar--> 
Top Promo bar 3
HTML Code:
<!--Topbar-->
<div class="top-info-bar style1 style2">
   <div class="topBar-slider-style1 alert fade show" role="alert">
      <div class="item text-center d-flex flex-wrap align-items-center justify-content-center">
         SALE end in <span class="promo-counter" data-countdown="2024/10/01"></span> UP TO <span class="mx-1" style="color:#fff06b;">80% OFF</span> ON THE ENTIRE STORE! <span class="mx-1" style="color:#fff06b;">hurry up!</span><a href="shop-right-sidebar.html" class="btn btn-small rounded ms-2 text-capitalize d-none d-md-block">Shop Now</a>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
      <div class="item text-center d-flex flex-wrap align-items-center justify-content-center">
         <span class="mx-1" style="color:#fff06b;">FREE SHIPPING</span> ON U.S. ORDERS OVER <span class="mx-1" style="color:#fff06b;">$100!</span> GET YOUR FREE ORDER NOW!
         <button type="button" class="btn-close text-white" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
   </div>
</div>
<!--End Topbar--> 
Top Promo bar 4
HTML Code:
<!--Topbar-->
<div class="top-info-bar style1" style="color:#ffffff;background-color:#000000;">
   <div class="topBar-slider-style2 alert fade show" role="alert">
      <div class="item text-uppercase text-center d-flex-center justify-content-center">
         <!--Countdown Timer-->
         <div class="promo-counter days-time" data-countdown="2024/10/01"></div>
         <!--End Countdown Timer-->
         USE CODE <span class="mx-1" style="color:#f4be74;"><b>OPTMAL10</b></span> TO SAVE 10% ON WINTER COLLECTION
         <a href="shop-left-sidebar.html" class="btn-link text-decoration-underline ms-1 ms-lg-2">SHOP NOW</a>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
   </div>
</div>
<!--End Topbar--> 
Top Promo bar 5
promo-bg1 FLAT 50% OFF ON THE CLASSIC WATCH COLLECTION! LIMITED TIME OFFER! Hurry up!
promo-bg2 UP TO 80% OFF ON THE ENTIRE STORE! SALE WILL END SOON IN : Shop Now
HTML Code:
<!--Promo Info Bar-->
<div class="top-info-bar style1bg">
   <div class="topBar-slider-style1">
      <div class="bg-size item text-center d-flex flex-wrap align-items-center justify-content-center" style="min-height:90px;">
         <img class="bg-img blur-up lazyload" data-src="assets/images/demo13-promo-bg1.jpg" src="assets/images/demo13-promo-bg1.jpg" alt="promo-bg1" title="" />
         <b class="me-1">FLAT 50% OFF</b> ON THE <b class="mx-1">CLASSIC WATCH</b> COLLECTION! LIMITED TIME OFFER! <b class="mx-1" style="color:#ffbb6c;">Hurry up!</b>
      </div>
      <div class="bg-size item text-center d-flex flex-wrap align-items-center justify-content-center" style="min-height:90px;">
         <img class="bg-img blur-up lazyload" data-src="assets/images/demo13-promo-bg2.jpg" src="assets/images/demo13-promo-bg2.jpg" alt="promo-bg2" title="" />
         <b class="me-1" style="color:#ffbb6c;">UP TO 80% OFF</b> ON THE ENTIRE STORE! SALE WILL END SOON IN : <span class="promo-counter days-time mx-1" data-countdown="2024/10/01"></span> <a href="shop-top-filter.html" class="btn btn-small text-capitalize d-none d-md-block">Shop Now</a>
      </div>
   </div>
</div>
<!--End Promo Info Bar-->
Top Promo bar 6
HTML Code:
<!--Topbar-->
<div class="top-info-bar style1" style="color:#ffffff;background-color:#85b935;">
   <div class="topBar-slider-style2 alert fade show" role="alert">
      <div class="item text-uppercase text-center d-flex-center justify-content-center" style="min-height:36px;">
         FREE DELIVERY OVER $59, SAME DAY DELIVERY AVAILABLE FOR ORDERS PLACED BY 2:00 PM
         <button type="button" class="btn-close h-auto" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
   </div>
</div>
<!--End Topbar--> 
Top Promo bar 7
HTML Code:
<!--Topbar-->
<div class="top-info-bar style1" style="color:#ffffff;background-color:#c92532;">
   <div class="topBar-slider-style2 alert fade show" role="alert">
      <div class="item text-center d-flex flex-wrap align-items-center justify-content-center" style="font-size:13px;">
         SALE END IN 
         <div class="promo-counter days-time text-uppercase" data-countdown="2024/10/01"></div>
         UP TO <span class="mx-2" style="color:#ffd900;">80% OFF</span> <a href="shop-right-sidebar.html" class="btn btn-small text-capitalize d-none d-md-inline-flex">Shop Now</a>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="an an-times-l"></i></button>
      </div>
   </div>
</div>
<!--End Topbar-->
HTML Code:
<!--Topbar-->
<div class="marquee-text">
   <div class="top-info-bar">
      <div class="fl-1 info-text">
         <a href="#;">DUE TO LOCKDOWNS ACROSS THE COUNTRY, PLEASE EXPECT A DELAY IN PICKUP OR DELIVERY OF YOUR ORDERS. WE REGRET THE INCONVENIENCE CAUSED.</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">GREAT VARIETY TO CHOOSE FROM AT GREAT PRICES</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">RENOVATE YOUR HOME BY UPGRADING TO NEW DESIGNS</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">DUE TO LOCKDOWNS ACROSS THE COUNTRY, PLEASE EXPECT A DELAY IN PICKUP OR DELIVERY OF YOUR ORDERS. WE REGRET THE INCONVENIENCE CAUSED.</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">GREAT VARIETY TO CHOOSE FROM AT GREAT PRICES</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">RENOVATE YOUR HOME BY UPGRADING TO NEW DESIGNS</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">DUE TO LOCKDOWNS ACROSS THE COUNTRY, PLEASE EXPECT A DELAY IN PICKUP OR DELIVERY OF YOUR ORDERS. WE REGRET THE INCONVENIENCE CAUSED.</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">GREAT VARIETY TO CHOOSE FROM AT GREAT PRICES</a>
      </div>
      <div class="fl-1 info-text">
         <a href="#;">RENOVATE YOUR HOME BY UPGRADING TO NEW DESIGNS</a>
      </div>
   </div>
</div>
<!--End Topbar-->