Loading...

Elements Top Info bar

Elements Top Info bar

HTML Code:
<div class="top-info-bar">
   <div class="row mx-0 topBar-slider">
      <div class="item d-flex flex-row justify-content-lg-start justify-content-center justify-content-md-center justify-content-sm-center col-12 col-sm-6 col-md-4 col-lg-4 text-uppercase">
         <a href="#">Cash On Delivery Available</a>
      </div>
      <div class="item d-flex flex-row justify-content-center justify-content-md-center justify-content-sm-center col-12 col-sm-6 col-md-4 col-lg-4 text-uppercase center">
         <a href="#">Free Shipping On Order Over $100</a>
      </div>
      <div class="item d-flex flex-row justify-content-lg-end justify-content-center justify-content-md-center justify-content-sm-center col-12 col-sm-6 col-md-4 col-lg-4 text-uppercase">
         <a href="#">Buy Now Pay Later</a>
      </div>
   </div>
</div>
Top Info bar 2
HTML Code:
<div class="top-bar">
   <div class="container-fluid">
      <div class="inner d-flex align-items-center">
         <div class="col-4 col-sm-4 col-md-4 col-lg-4 d-none d-lg-flex d-md-flex">
            <span class="d-inline me-1">Follow Us:</span>
            <ul class="social-icons list-inline align-items-center">
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-facebook" aria-hidden="true"></i><span class="tooltip-label">Facebook</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-twitter" aria-hidden="true"></i><span class="tooltip-label">Twitter</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-pinterest-p" aria-hidden="true"></i><span class="tooltip-label">Pinterest</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-instagram" aria-hidden="true"></i><span class="tooltip-label">Instagram</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-tiktok" aria-hidden="true"></i><span class="tooltip-label">TikTok</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-whatsapp" aria-hidden="true"></i><span class="tooltip-label">Whatsapp</span></a></li>
            </ul>
         </div>
         <div class="col-12 col-sm-12 col-md-4 col-lg-4 text-center">
            FREE SHIPPING on order above $99
         </div>
         <div class="col-4 col-sm-4 col-md-4 col-lg-4 d-none d-lg-block d-md-block text-right">
            <p class="phone-no m-0 px-2 d-inline-block"><a href="tel:4400(111)044833" class="d-flex align-items-center"><i class="an an-phone-l me-2"></i> <span class="pno">+440 0(111) 044 833</span></a></p>
            <p class="m-0 d-inline email-id d-inline-block"><a href="mailto:sales@yourstorename.com" class="d-flex align-items-center"><i class="an an-envelope-l me-2"></i> <span class="eno">sales@yourstore.com</span></a></p>
         </div>
      </div>
   </div>
</div> 
Top Info bar 3
Store Time : 10AM – 11PM. Sunday Closed
Free Shipping World Wide
HTML Code:
<!--Topbar-->
<div class="top-info-bar">
   <div class="container">
      <div class="row">
         <div class="item fw-600 d-flex flex-row justify-content-lg-start justify-content-center justify-content-md-center justify-content-sm-center col-12 col-sm-12 col-md-12 col-lg-4">
            Store Time : 10AM – 11PM. Sunday Closed
         </div>
         <div class="item fw-600 d-flex flex-row justify-content-center justify-content-md-center justify-content-sm-center col-12 col-sm-6 col-md-4 col-lg-4 center d-none d-lg-flex">
            Free Shipping World Wide
         </div>
         <div class="item fw-600 d-flex flex-row justify-content-lg-end justify-content-center justify-content-md-center justify-content-sm-center col-12 col-sm-6 col-md-4 col-lg-4 d-none d-lg-flex">
            <ul class="toplinks list-inline m-0">
               <li class="list-inline-item"><a href="faqs-style1.html">Help & Faqs</a></li>
               <li class="list-inline-item"><a href="contact-style1.html">Contact Us</a></li>
            </ul>
         </div>
      </div>
   </div>
</div>
<!--End Topbar-->
Top Info bar 4
HTML Code:
<div class="top-bar" style="background:#ea895f;">
   <div class="container">
      <div class="inner d-flex align-items-center">
         <div class="col-12 col-sm-12 col-md-4 col-lg-4 text-left">
            <p class="phone-no m-0 px-2 d-inline-block"><a href="tel:4400(111)044833" class="d-flex align-items-center"><i class="an an-phone-l me-2"></i> <span class="pno">+440 0(111) 044 833</span></a></p>
            <p class="m-0 d-inline email-id d-inline-block d-md-none d-lg-inline-block"><a href="mailto:sales@yourstorename.com" class="d-flex align-items-center"><i class="an an-envelope-l me-2"></i> <span class="eno">sales@yourstore.com</span></a></p>
         </div>
         <div class="col-12 col-sm-12 col-md-4 col-lg-4 d-none d-lg-block d-md-block text-center">
            FREE SHIPPING on order above $99
         </div>
         <div class="col-12 col-sm-12 col-md-4 col-lg-4 d-none d-lg-flex d-md-flex justify-content-end">
            <span class="d-inline me-1 d-none">Follow Us:</span>
            <ul class="social-icons list-inline align-items-center">
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-facebook" aria-hidden="true"></i><span class="tooltip-label">Facebook</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-twitter" aria-hidden="true"></i><span class="tooltip-label">Twitter</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-instagram" aria-hidden="true"></i><span class="tooltip-label">Instagram</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-linkedin" aria-hidden="true"></i><span class="tooltip-label">Linkedin</span></a></li>
               <li class="list-inline-item"><a href="#" target="_blank"><i class="an an-whatsapp" aria-hidden="true"></i><span class="tooltip-label">Whatsapp</span></a></li>
            </ul>
         </div>
      </div>
   </div>
</div> 
Top Info bar 5
FREE SHIPPING ON U.S. ORDERS OVER $100
HTML Code:
<!--Topbar-->
<div class="top-bar" style="background:#b3ccaf;">
    <div class="container">
        <div class="inner d-flex align-items-center text-uppercase">
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 d-none d-lg-block d-md-block">
                <b>FREE SHIPPING</b> ON U.S. ORDERS OVER <b>$100</b>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-lg-6 text-center text-md-end">
                <p class="phone-no m-0 px-2 d-inline-block"><a href="tel:4400(111)044833" class="d-flex align-items-center"><i class="an an-phone-l me-2"></i> <span class="pno">+440 0(111) 044 833</span></a></p>
                <p class="m-0 d-inline email-id d-inline-block"><a href="mailto:sales@yourstorename.com" class="d-flex align-items-center"><i class="an an-envelope-l me-2"></i> <span class="eno">sales@yourstore.com</span></a></p>
            </div>
        </div>
    </div>
</div>
<!--End Topbar-->