"bootstrap 5 landing page"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--================= Font Family =================--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!--================= Bootstrap =================--> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!--================= Font Awesome =================--> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"> <!--================= Slick Slider =================--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /> <!--================= Css =================--> <link href="css/slicknav.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <!-- Page Preloder --> <div id="preloder"> <div class="custom-loader"></div> </div> <!-- Responsive Sidebar --> <div class="offcanvas-menu-overlay"></div> <div class="offcanvas-menu-wrapper"> <div class="offcanvas__close">+</div> <ul class="offcanvas__widget"> <li><span class="search-switch"><i class="fa-solid fa-magnifying-glass"></i></span></li> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span> <div class="tip">2</div> </a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span> <div class="tip">2</div> </a></li> </ul> <div class="offcanvas__logo"> <a href="./index.html"><img src="images/logo.svg" alt="" class="img-fluid"></a> </div> <div id="mobile-menu-wrap"></div> <div class="offcanvas__auth"> <a href="#">Login</a> <a href="#">Register</a> </div> </div> <!-- Header --> <header class="header"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col-xl-3 col-lg-2"> <div class="header__logo"> <a href="./index.html"><img src="images/logo.svg" alt=""></a> </div> </div> <div class="col-xl-6 col-lg-7"> <nav class="header__menu"> <ul> <li class="active"><a href="./index.html">Home</a></li> <li><a href="#">Women’s</a></li> <li><a href="#">Men’s</a></li> <li><a href="#">Kid’s</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Pages</a> <ul class="dropdown"> <li><a href="#">Pages 1</a></li> <li><a href="#">Pages 2</a></li> <li><a href="#">Pages 3</a></li> <li><a href="#">Pages 4</a></li> </ul> </li> <li><a href="./contact.html">Contact</a></li> </ul> </nav> </div> <div class="col-lg-3"> <div class="header__right"> <div class="header__right__auth"> <a href="#">Login</a> <a href="#">Register</a> </div> <ul class="header__right__widget"> <li><span class="search-switch"><i class="fa-solid fa-magnifying-glass"></i></span></li> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span> <div class="tip">2</div> </a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span> <div class="tip">2</div> </a></li> </ul> </div> </div> </div> <div class="canvas__open"> <i class="fa fa-bars"></i> </div> </div> </header> <!-- Banner --> <section class="banner"> <div class="container h-100"> <div class="row h-100 align-items-center"> <div class="col-lg-12"> <div class="banner_img"> <div class="row h-100 align-items-center"> <div class="col-6"> <div class="banner_text"> <h1>Women’s fashion</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt cilisis.</p> <a href="#">Shop now</a> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="banner_sm_img banner_sm_1"> <div class="row h-100 align-items-center"> <div class="col-6"> <div class="banner_text"> <h2>Men’s fashion</h2> <p>159 items</p> <a href="#">Shop now</a> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="banner_sm_img banner_sm_2"> <div class="row h-100 align-items-center"> <div class="col-6"> <div class="banner_text"> <h2>Kid’s fashion</h2> <p>159 items</p> <a href="#">Shop now</a> </div> </div> </div> </div> </div> </div> </section> <!-- Product --> <section class="product spad"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="section-title"> <h4>New product</h4> <a href="">Show all</a> </div> </div> </div> <div class="row property__gallery" id=""> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p4.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p2.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p3.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> </div> </div> </section> <!-- Collection --> <section class="collection spad"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="collection__slider"> <div class="collection__text"> <span>Men's Collection</span> <h2>The Men's Jacket</h2> <a href="#">Shop now</a> </div> <div class="collection__text"> <span>Men's Collection</span> <h2>The Men's Shoes</h2> <a href="#">Shop now</a> </div> <div class="collection__text"> <span>Men's Collection</span> <h2>The Men's Jeans</h2> <a href="#">Shop now</a> </div> <div class="collection__text"> <span>Men's Collection</span> <h2>The Men's Jacket</h2> <a href="#">Shop now</a> </div> </div> </div> </div> </div> </section> <!-- Product --> <section class="product spad"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="section-title"> <h4>Men's product</h4> <a href="">Show all</a> </div> </div> </div> <div class="row property__gallery" id=""> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/b.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/b2.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/b33.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/b5.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> </div> </div> </section> <!-- Product --> <section class="product"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="section-title"> <h4>Women's product</h4> <a href="">Show all</a> </div> </div> </div> <div class="row property__gallery" id=""> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p.jpg);"> <div class="label sale">sale</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p4.jpg);"> <div class="label sale">sale</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p2.jpg);"> <div class="label sale">sale</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/p3.jpg);"> <div class="label sale">Sale</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> </div> </div> </section> <!-- Product --> <section class="product spad"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12"> <div class="section-title"> <h4>Kid's product</h4> <a href="">Show all</a> </div> </div> </div> <div class="row property__gallery" id=""> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/k.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/k2.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/k.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product__item"> <div class="product__item__pic set-bg" style="background-image: url(images/k2.jpg);"> <div class="label new">New</div> <ul class="product__hover"> <li><a href="#"><span><i class="fa-solid fa-heart"></i></span></a></li> <li><a href="#"><span><i class="fa-solid fa-bag-shopping"></i></span></a></li> </ul> </div> <div class="product__item__text"> <h6><a href="#">Buttons tweed blazer</a></h6> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product__price">$ 59.0</div> </div> </div> </div> </div> </div> </section> <!-- Instagram --> <section class="instagram"> <div class="container-fluid"> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-4 p-0"> <div class="instagram__item set-bg" style="background-image: url(images/1.jpg);"> <div class="instagram__text"> <i class="fa-brands fa-instagram"></i> <a href="#">@ ShopStop</a> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-4 p-0"> <div class="instagram__item set-bg" style="background-image: url(images/2.jpg);"> <div class="instagram__text"> <i class="fa-brands fa-instagram"></i> <a href="#">@ ShopStop</a> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-4 p-0"> <div class="instagram__item set-bg" style="background-image: url(images/3.jpg);"> <div class="instagram__text"> <i class="fa-brands fa-instagram"></i> <a href="#">@ ShopStop</a> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-4 p-0"> <div class="instagram__item set-bg" style="background-image: url(images/4.jpg);"> <div class="instagram__text"> <i class="fa-brands fa-instagram"></i> <a href="#">@ ShopStop</a> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-4 p-0"> <div class="instagram__item set-bg" style="background-image: url(images/5.jpg);"> <div class="instagram__text"> <i class="fa-brands fa-instagram"></i> <a href="#">@ ShopStop</a> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-4 p-0"> <div class="instagram__item set-bg" style="background-image: url(images/6.jpg);"> <div class="instagram__text"> <i class="fa-brands fa-instagram"></i> <a href="#">@ ShopStop</a> </div> </div> </div> </div> </div> </section> <!-- Services --> <section class="services spad"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="services__item"> <i class="fa fa-car"></i> <h6>Free Shipping</h6> <p>For all oder over $99</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="services__item"> <i class="fa-solid fa-money-bill"></i> <h6>Money Back Guarantee</h6> <p>If good have Problems</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="services__item"> <i class="fa-solid fa-headset"></i> <h6>Online Support 24/7</h6> <p>Dedicated support</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="services__item"> <i class="fa-solid fa-lock"></i> <h6>Payment Secure</h6> <p>100% secure payment</p> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-7"> <div class="footer__about"> <div class="footer__logo"> <a href="./index.html"><img src="images/logo.svg" alt="" class="img-fluid"></a> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt cilisis.</p> <div class="footer__payment"> <a href="#"><img src="img/payment/payment-1.png" alt=""></a> <a href="#"><img src="img/payment/payment-2.png" alt=""></a> <a href="#"><img src="img/payment/payment-3.png" alt=""></a> <a href="#"><img src="img/payment/payment-4.png" alt=""></a> <a href="#"><img src="img/payment/payment-5.png" alt=""></a> </div> </div> </div> <div class="col-lg-2 col-md-3 col-sm-5"> <div class="footer__widget"> <h6>Quick links</h6> <ul> <li><a href="#">About</a></li> <li><a href="#">Blogs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-3 col-sm-4"> <div class="footer__widget"> <h6>Account</h6> <ul> <li><a href="#">My Account</a></li> <li><a href="#">Orders Tracking</a></li> <li><a href="#">Checkout</a></li> <li><a href="#">Wishlist</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-8 col-sm-8"> <div class="footer__newsletter"> <h6>NEWSLETTER</h6> <form action="#"> <input type="text" placeholder="Email"> <button type="submit" class="site-btn">Subscribe</button> </form> <div class="footer__social"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-pinterest"></i></a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="footer__copyright__text"> <p>Copyright © 2022 All rights reserved</p> </div> </div> </div> </div> </footer> <!--================= Scripts =================--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.slicknav.js"></script> <script src="js/main.js"></script> </body> </html>
/*------------------------------------------------------------------ [Table of contents] 1. Template default CSS 2. Helper Css 3. Header Section 4. Categories Section 5. Product Section 6. Banner Section 7. Countdown Section 8. Instagram 9. Contact 10. Footer Style -------------------------------------------------------------------*/ /*----------------------------------------*/ /* Template default CSS /*----------------------------------------*/ html, body { height: 100%; font-family: "Montserrat", sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; color: #111111; font-weight: 400; font-family: "Montserrat", sans-serif; } h1 { font-size: 60px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { font-size: 14px; font-family: "Montserrat", sans-serif; color: #666666; font-weight: 400; line-height: 24px; margin: 0 0 15px 0; } img { max-width: 100%; } input:focus, select:focus, button:focus, textarea:focus { outline: none; } a{ text-decoration: none; outline: none; } a:hover, a:focus { text-decoration: none; outline: none; } ul, ol { padding: 0; margin: 0; } /*--------------------- Helper CSS -----------------------*/ .section-title { margin-bottom: 45px; display: flex; align-items: center; justify-content: space-between; } .section-title h4 { color: #111111; font-weight: 600; text-transform: uppercase; position: relative; display: inline-block; } .section-title a { font-size: 14px; color: #ca1515; text-transform: uppercase; font-weight: 600; position: relative; padding: 0 0 3px; display: inline-block; text-decoration: none; } .section-title a:after { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ca1515; content: ""; } .set-bg { background-repeat: no-repeat; background-size: cover; background-position: top center; } .spad { padding-top: 100px; padding-bottom: 100px; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6, .text-white p, .text-white span, .text-white li, .text-white a { color: #fff; } /* buttons */ .primary-btn { display: inline-block; font-size: 14px; text-transform: uppercase; font-weight: 600; padding: 12px 30px 10px; color: #ffffff; background: #ca1515; } .site-btn { font-size: 14px; color: #ffffff; background: #ca1515; font-weight: 600; border: none; text-transform: uppercase; display: inline-block; padding: 12px 30px; border-radius: 0; } /* Preloder */ #preloder { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999999; background: #ffffff; } .custom-loader { width:12px; height:12px; position: relative; } .custom-loader::before, .custom-loader::after { content:""; position: absolute; inset:0; border-radius:50%; background:#ca1515; } .custom-loader::before { box-shadow: -24px 0 #ca1515; animation:d8-1 1s infinite linear; } .custom-loader::after { transform: rotate(0deg) translateX(24px); animation:d8-2 1s infinite linear; } .custom-loader { position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; } @keyframes d8-1 { 100%{transform:translateX(24px)} } @keyframes d8-2 { 100%{transform:rotate(-180deg) translateX(24px)} } .spacial-controls { position: fixed; width: 111px; height: 91px; top: 0; right: 0; z-index: 999; } .spacial-controls .search-switch { display: block; height: 100%; padding-top: 30px; background: #323232; text-align: center; cursor: pointer; } .search-model { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #ffffff; z-index: 99999; } .search-model-form { padding: 0 15px; } .search-model-form input { width: 500px; font-size: 40px; border: none; border-bottom: 2px solid #dddddd; background: 0 0; color: #999; } .search-close-switch { position: absolute; width: 50px; height: 50px; background: #333; color: #fff; text-align: center; border-radius: 50%; font-size: 28px; line-height: 28px; top: 30px; cursor: pointer; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*----------------------------------------*/ /* Header CSS /*----------------------------------------*/ .header { background: #ffffff; -webkit-box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1); box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1); } .header__logo { padding: 26px 0; } .header__logo a { display: inline-block; } .header__logo img{ max-width:125px; } .header__menu { padding: 30px 0 27px; text-align:center; } .header__menu ul li { list-style: none; display: inline-block; margin-right: 40px; position: relative; } .header__menu ul li.active a:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .header__menu ul li:hover a:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .header__menu ul li:hover .dropdown { top: 27px; opacity: 1; visibility: visible; } .header__menu ul li:last-child { margin-right: 0; } .header__menu ul li .dropdown { position: absolute; left: 0; top: 56px; width: 150px; background: #111111; text-align: left; padding: 2px 0; z-index: 9; opacity: 0; visibility: hidden; -webkit-transition: all, 0.3s; -o-transition: all, 0.3s; transition: all, 0.3s; } .header__menu ul li .dropdown li { display: block; margin-right: 0; } .header__menu ul li .dropdown li a { font-size: 14px; color: #ffffff; font-weight: 400; padding: 8px 20px; text-transform: capitalize; } .header__menu ul li .dropdown li a:after { display: none; } .header__menu ul li a { font-size: 15px; text-transform: uppercase; color: #111111; font-weight: 500; display: block; padding: 2px 0; position: relative; text-decoration:none; } .header__menu ul li a:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #ca1515; content: ""; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .header__right { text-align: right; padding: 30px 0 27px; } .header__right__auth { display: inline-block; margin-right: 25px; } .header__right__auth a { font-size: 15px; color: #111111; position: relative; margin-right: 8px; text-decoration: none; font-weight: 500; } .header__right__auth a:last-child { margin-right: 0; } .header__right__auth a:last-child:after { display: none; } .header__right__auth a:after { position: absolute; right: -8px; top: -2px; content: "/"; font-size: 15px; } .header__right__widget { display: inline-block; } .header__right__widget li { list-style: none; display: inline-block; font-size: 18px; color: #111111; margin-right: 20px; cursor: pointer; } .header__right__widget li:last-child { margin-right: 0; } .header__right__widget li a { font-size: 18px; color: #111111; position: relative; } .header__right__widget li a .tip { position: absolute; right: -5px; top: -11px; height: 18px; width: 18px; background: #ca1515; font-size: 10px; font-weight: 500; color: #ffffff; line-height: 18px; text-align: center; border-radius: 50%; } .offcanvas-menu-wrapper { display: none; } .canvas__open { display: none; } /*--------------------------------- Banner css -----------------------------*/ .banner_img { background-image: url('../images/category-1.png'); background-size: cover; height: 638px; padding-left: 70px; background-repeat: no-repeat; background-size: cover; background-position: top center; margin-bottom: 30px; } .banner_text h1 { font-family: "Cookie", cursive; color: #111111; margin-bottom: 5px; } .banner_text p { margin-bottom: 15px; } .banner_text a { font-size: 14px; color: #111111; text-transform: uppercase; font-weight: 600; position: relative; padding: 0 0 3px; display: inline-block; text-decoration:none; } .banner_text a:after { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ca1515; content: ""; } .banner { margin-top: 30px; } .banner_sm_1{ background-image: url('../images/category-12.png'); } .banner_sm_2{ background-image: url('../images/kid.png'); } .banner_sm_img{ background-size: cover; height: 314px; padding-left: 70px; background-repeat: no-repeat; background-size: cover; background-position: top center; margin-bottom: 0; } .banner_sm_img h2 { font-family: "Cookie", cursive; color: #111111; margin-bottom: 0; font-size: 28px; } .banner_sm_img p { margin-bottom: 10px; } /*--------------------------------- product css -----------------------------*/ .product__item:hover .product__hover li { opacity: 1; top: 0; } .product__item.sale .product__item__pic .label { background: #ca1515; } .product__item.sale .product__item__text .product__price { color: #ca1515; } .product__item__pic { height: 360px; position: relative; overflow: hidden; } .product__item__pic .label { font-size: 12px; color: #ffffff; font-weight: 500; display: inline-block; padding: 2px 8px; text-transform: uppercase; position: absolute; right: 10px; top: 10px; } .product__item__pic .label.new { background: #36a300; } .product__item__pic .label.stockout { background: #111111; } .product__item__pic .label.stockblue { background: #0066bd !important; } .product__item__pic .label.sale { background: #ca1515; } .product__hover { position: absolute; left: 0; width: 100%; bottom: 30px; text-align: center; } .product__hover li { list-style: none; display: inline-block; margin-right: 10px; position: relative; top: 100px; opacity: 0; } .product__hover li:nth-child(1) { -webkit-transition: all 0.4s ease 0.1s; -o-transition: all 0.4s ease 0.1s; transition: all 0.4s ease 0.1s; } .product__hover li:nth-child(2) { -webkit-transition: all 0.4s ease 0.15s; -o-transition: all 0.4s ease 0.15s; transition: all 0.4s ease 0.15s; } .product__hover li:nth-child(3) { -webkit-transition: all 0.4s ease 0.2s; -o-transition: all 0.4s ease 0.2s; transition: all 0.4s ease 0.2s; } .product__hover li:last-child { margin-right: 0; } .product__hover li:hover a { background: #ca1515; } .product__hover li:hover a span { color: #ffffff; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .product__hover li a { font-size: 18px; color: #111111; display: block; height: 45px; width: 45px; background: #ffffff; line-height: 48px; text-align: center; border-radius: 50%; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; } .product__hover li a span { position: relative; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transition: all, 0.3s; -o-transition: all, 0.3s; transition: all, 0.3s; display: inline-block; } .product__item__text { text-align: center; padding-top: 22px; } .product__item__text h6 a { font-size: 14px; color: #111111; font-weight:500; } .product__item__text .rating { line-height: 18px; margin-bottom: 5px; } .product__item__text .rating i { font-size: 10px; color: #e3c01c; margin-right: -4px; } .product__item__text .rating i:last-child { margin-right: 0; } .product__item__text .product__price { color: #111111; font-weight: 600; } .product__item__text .product__price span { font-size: 14px; color: #b1b0b0; text-decoration: line-through; margin-left: 4px; } /*--------------------------------- Banner css -----------------------------*/ .collection { background-color: #f4f4f4; } .collection__text span { font-size: 18px; color: #ca1515; text-transform: uppercase; } .collection__text { text-align: center; } .collection__text h2 { font-size: 80px; color: #111111; font-family: "Cookie", cursive; margin-bottom: 15px; } .collection__text a { font-size: 14px; color: #111111; text-transform: uppercase; font-weight: 700; position: relative; padding: 0 0 3px; display: inline-block; } .collection__text a:after { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ca1515; content: ""; } .collection__slider .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; margin-top: 25px; } .collection__slider .slick-dots li { margin: 0 0.25rem; } .collection__slider .slick-dots button { display: block; width: 0.6rem; height: 0.6rem; padding: 0; border: none; border-radius: 100%; background-color: #ddd; text-indent: -9999px; } .collection__slider .slick-dots li.slick-active button { background-color: #ca1515; } /*--------------------- Instagram -----------------------*/ .instagram__item { height: 320px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; } .instagram__item:hover:after { opacity: 1; } .instagram__item:hover .instagram__text { opacity: 1; visibility: visible; } .instagram__item:after { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.9); content: ""; opacity: 0; z-index: -1; -webkit-transition: all, 0.3s; -o-transition: all, 0.3s; transition: all, 0.3s; } .instagram__text { text-align: center; opacity: 0; visibility: hidden; -webkit-transition: all, 0.3s; -o-transition: all, 0.3s; transition: all, 0.3s; } .instagram__text i { font-size: 30px; color: #0d0d0d; } .instagram__text a { font-size: 16px; color: #0d0d0d; font-weight: 500; display: block; margin-top: 10px; } /*--------------------- Breadcrumb -----------------------*/ .breadcrumb-option { padding-top: 100px; background: #f4f4f4; padding-bottom: 100px; } .breadcrumb__links a { font-size: 15px; font-weight: 500; color: #ca1515; margin-right: 18px; display: inline-block; position: relative; } .breadcrumb__links a:after { position: absolute; right: -14px; top: 0; content: ""; font-family: "FontAwesome"; } .breadcrumb__links a i { margin-right: 5px; } .breadcrumb__links span { font-size: 15px; font-weight: 500; color: #888888; display: inline-block; } /*--------------------- Categories -----------------------*/ .categories { overflow: hidden; margin-top: 10px; } .categories .container-fluid { padding-right: 5px; } .categories__item { height: 314px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 30px; margin-bottom: 10px; margin-right: 10px; } .categories__item.categories__large__item { height: 638px; padding-left: 70px; } .categories__item.categories__large__item .categories__text { max-width: 480px; } .categories__item.categories__large__item .categories__text p { margin-bottom: 15px; } .categories__text h1 { font-family: "Cookie", cursive; color: #111111; margin-bottom: 5px; } .categories__text h4 { color: #111111; font-weight: 700; } .categories__text p { margin-bottom: 10px; } .categories__text a { font-size: 14px; color: #111111; text-transform: uppercase; font-weight: 600; position: relative; padding: 0 0 3px; display: inline-block; } .categories__text a:after { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ca1515; content: ""; } /*--------------------- Shop -----------------------*/ .shop { padding-top: 70px; padding-bottom: 80px; } .sidebar__categories { margin-bottom: 50px; } .sidebar__categories .section-title { margin-bottom: 35px; } .sidebar__categories .section-title h4 { font-size: 18px; } .categories__accordion .card { border: none; border-radius: 0; padding-bottom: 12px; border-bottom: 1px solid #f2f2f2 !important; margin-bottom: 12px; } .categories__accordion .accordion-header.active .accordion-button { background-color: #fff; color: #111; } .categories__accordion .accordion-button { color: #111; font-size:14px; outline:0; box-shadow:none; } .categories__accordion .accordion-item { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,.125) !important; border: none; } .categories__accordion .accordion-button:not(.collapsed) { color: #111; background-color: #fff; } .categories__accordion .accordion-button::after { width: 0.75rem; height: 0.75rem; background-size: 0.75rem; } .categories__accordion .card:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none !important; } .categories__accordion .card-heading { cursor: pointer; } .categories__accordion .card-heading a { font-size: 14px; font-weight: 500; color: #111111; display: block; } .categories__accordion .card-body { padding-left: 0; padding-top: 6px; padding-bottom: 0; } .categories__accordion .card-body li { list-style: none; position: relative; padding-left: 16px; } .categories__accordion .card-body li:before { position: absolute; left: 4px; top: 14px; height: 1px; width: 4px; background: #666666; content: ""; } .categories__accordion .card-body li a { font-size: 14px; color: #666666; line-height: 30px; } .categories__accordion .card-heading a:after, .categories__accordion .card-heading>a.active[aria-expanded=false]:after { content: ""; font-size: 14px; font-family: "FontAwesome"; color: #666666; position: absolute; right: 30px; top: 0px; } .categories__accordion .card-heading.active a:after { content: ""; font-size: 14px; font-family: "FontAwesome"; color: #666666; position: absolute; right: 30px; top: -1px; } .categories__accordion .card-heading a[aria-expanded=true]:after, .categories__accordion .card-heading>a.active:after { content: ""; font-size: 14px; font-family: "FontAwesome"; color: #666666; position: absolute; right: 30px; top: -1px; } .sidebar__filter { position: relative; margin-bottom: 60px; } .sidebar__filter .section-title { margin-bottom: 50px; } .sidebar__filter .section-title h4 { font-size: 18px; } .sidebar__filter a { font-size: 14px; color: #0d0d0d; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; display: inline-block; padding: 5px 16px 5px 24px; border: 2px solid #ca1515; position: absolute; right: 0; bottom: -5px; border-radius: 2px; } .filter-range-wrap .range-slider .price-input { position: relative; } .filter-range-wrap .range-slider .price-input p { font-size: 16px; color: #0d0d0d; font-weight: 500; display: inline-block; margin-bottom: 0; } .filter-range-wrap .range-slider .price-input:after { position: absolute; left: 81px; top: 12px; height: 1px; width: 5px; background: #0d0d0d; content: ""; } .filter-range-wrap .range-slider .price-input input { font-size: 16px; color: #0d0d0d; max-width: 16%; border: none; } .filter-range-wrap .range-slider .price-input input:nth-child(1) { margin-right: 28px; } .filter-range-wrap .price-range { border-radius: 0; margin-bottom: 28px; } .filter-range-wrap .price-range.ui-widget-content { border: none; background: rgba(0, 0, 0, 0.1); height: 5px; } .filter-range-wrap .price-range.ui-widget-content .ui-slider-handle { height: 14px; width: 14px; border-radius: 50%; background: #ca1515; border: none; outline: none; cursor: pointer; } .filter-range-wrap .price-range .ui-slider-range { background: #ca1515; border-radius: 0; } .sidebar__sizes, .sidebar__color { margin-bottom: 40px; } .sidebar__sizes .section-title, .sidebar__color .section-title { margin-bottom: 35px; } .sidebar__sizes .section-title h4, .sidebar__color .section-title h4 { font-size: 18px; } .sidebar__sizes .size__list label, .sidebar__color .size__list label { display: block; padding-left: 30px; font-size: 14px; text-transform: uppercase; color: #444444; position: relative; cursor: pointer; margin-bottom: 5px; } .sidebar__sizes .size__list label input, .sidebar__color .size__list label input { position: absolute; visibility: hidden; } .sidebar__sizes .size__list label input:checked~.checkmark, .sidebar__color .size__list label input:checked~.checkmark { border-color: #ca1515; } .sidebar__sizes .size__list label input:checked~.checkmark:after, .sidebar__color .size__list label input:checked~.checkmark:after { border-color: #ca1515; opacity: 1; } .sidebar__sizes .size__list label .checkmark, .sidebar__color .size__list label .checkmark { position: absolute; left: 0; top: 0; height: 20px; width: 20px; border: 1px solid #444444; border-radius: 2px; } .sidebar__sizes .size__list label .checkmark:after, .sidebar__color .size__list label .checkmark:after { position: absolute; left: 3px; top: 5px; width: 11px; height: 5px; border: solid #ffffff; border-width: 1.5px 1.5px 0px 0px; -webkit-transform: rotate(127deg); -ms-transform: rotate(127deg); transform: rotate(127deg); opacity: 0; content: ""; } .sidebar__color .color__list label { text-transform: capitalize; } .shop .product__item{ margin-bottom:30px; } .pagination__option a { display: inline-block; height: 40px; width: 40px; border: 1px solid #f2f2f2; border-radius: 0; font-size: 14px; color: #111111; font-weight: 600; line-height: 40px; text-align: center; -webkit-transition: all, 0.3s; -o-transition: all, 0.3s; transition: all, 0.3s; margin-right: 6px; } .pagination__option a:last-child { margin-right: 0; } .pagination__option a i { font-weight: 600; } .pagination__option a:hover { background: #ca1515; border-color: #ca1515; color: #ffffff; } /*--------------------- Services -----------------------*/ .services { padding-top: 80px; padding-bottom: 50px; } .services__item { padding-left: 65px; position: relative; margin-bottom: 20px; } .services__item i { font-size: 36px; color: #ca1515; position: absolute; left: 0; top: 4px; } .services__item h6 { color: #111111; font-weight: 600; margin-bottom: 5px; } .services__item p { margin-bottom: 0; } /*--------------------- Contact -----------------------*/ .contact { padding-top: 80px; padding-bottom: 80px; } .contact__address { margin-bottom: 45px; } .contact__address h5 { color: #111111; font-size: 20px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; } .contact__address ul li { list-style: none; position: relative; margin-bottom: 20px; } .contact__address ul li:last-child { margin-bottom: 0; } .contact__address ul li h6 { color: #111111; font-weight: 600; margin-bottom: 10px; } .contact__address ul li h6 i { font-size: 16px; color: #ca1515; margin-right: 5px; } .contact__address ul li p { margin-bottom: 0; font-size: 15px; color: #444444; } .contact__address ul li span { font-size: 15px; color: #444444; display: inline-block; margin-right: 25px; position: relative; } .contact__address ul li span:after { position: absolute; right: -15px; top: 11px; content: "|"; line-height: 0; } .contact__address ul li span:last-child { margin-right: 0; } .contact__address ul li span:last-child:after { display: none; } .contact__form h5 { color: #111111; font-size: 20px; font-weight: 600; text-transform: uppercase; margin-bottom: 35px; } .contact__form form input { height: 50px; width: 100%; padding-left: 20px; font-size: 14px; color: #444444; border: 1px solid #e1e1e1; border-radius: 0; margin-bottom: 20px; } .contact__form form input::-webkit-input-placeholder { color: #444444; } .contact__form form input::-moz-placeholder { color: #444444; } .contact__form form input:-ms-input-placeholder { color: #444444; } .contact__form form input::-ms-input-placeholder { color: #444444; } .contact__form form input::placeholder { color: #444444; } .contact__form form textarea { height: 130px; width: 100%; padding-left: 20px; padding-top: 12px; font-size: 14px; color: #444444; border: 1px solid #e1e1e1; border-radius: 0; margin-bottom: 14px; resize: none; } .contact__form form textarea::-webkit-input-placeholder { color: #444444; } .contact__form form textarea::-moz-placeholder { color: #444444; } .contact__form form textarea:-ms-input-placeholder { color: #444444; } .contact__form form textarea::-ms-input-placeholder { color: #444444; } .contact__form form textarea::placeholder { color: #444444; } .contact__map { height: 480px; margin-top:50px; } .contact__map iframe { width: 100%; } /*--------------------- Footer -----------------------*/ .footer { padding-top: 55px; background-color: #f4f4f4; } .footer__about { margin-bottom: 30px; } .footer__about p { margin-bottom: 20px; } .footer__logo { margin-bottom: 20px; } .footer__logo img{ max-width:125px; } .footer__payment a { margin-right: 6px; margin-bottom: 10px; display: inline-block; } .footer__payment a:last-child { margin-right: 0; } .footer__widget { margin-bottom: 30px; } .footer__widget h6 { color: #111111; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; } .footer__widget ul li { list-style: none; } .footer__widget ul li a { font-size: 14px; color: #666666; line-height: 30px; } .footer__newsletter { margin-bottom: 30px; } .footer__newsletter h6 { color: #111111; font-weight: 600; text-transform: uppercase; margin-bottom: 25px; } .footer__newsletter form { position: relative; margin-bottom: 30px; } .footer__newsletter form input { height: 52px; width: 100%; border: 1px solid #e1e1e1; border-radius: 0; padding-left: 15px; font-size: 14px; color: #666666; } .footer__newsletter form input::-webkit-input-placeholder { color: #666666; } .footer__newsletter form input::-moz-placeholder { color: #666666; } .footer__newsletter form input:-ms-input-placeholder { color: #666666; } .footer__newsletter form input::-ms-input-placeholder { color: #666666; } .footer__newsletter form input::placeholder { color: #666666; } .footer__newsletter form button { position: absolute; right: 4px; top: 4px; } .footer__social a { display: inline-block; height: 40px; width: 40px; background: #e1e1e1; font-size: 15px; color: #111111; line-height: 41px; text-align: center; border-radius: 50%; margin-right: 6px; margin-bottom: 5px; } .footer__social a:last-child { margin-right: 0; } .footer__copyright__text { border-top: 1px solid #e1e1e1; padding: 18px 0 25px; text-align: center; margin-top: 35px; } .footer__copyright__text p { margin-bottom: 0; } .footer__copyright__text a { color: #5C5C5C; } .footer__copyright__text i { color: #ca1515; } .footer__copyright__text a:hover { color: #ca1515; } /*--------------------------------- Responsive Media Quaries -----------------------------*/ @media only screen and (min-width: 1600px) and (max-width: 1900px) { .header { padding: 0 85px; } } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .header__menu ul li { margin-right: 20px; } .header { padding: 0 30px; } } @media only screen and (min-width: 1200px) { .container { max-width: 1170px; } } /* Medium Device 1200px */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__menu ul li { margin-right: 20px; } .header__right__auth { margin-right: 5px; } .sidebar__filter a { padding: 5px 15px 5px 15px; } .nav::before { width: 240px; } .nav::after { width: 240px; } } /* Tablet Device 768px */ @media only screen and (min-width: 768px) and (max-width: 991px) { .spad { padding-top: 50px; padding-bottom: 50px; } .filter__controls li { margin-right: 15px; } .discount__pic img { height: auto; } .discount__text { height: auto; } .sidebar__filter a { position: relative; bottom: 0; } .filter-range-wrap .range-slider .price-input input { max-width: 27%; } .filter-range-wrap .range-slider .price-input { margin-bottom: 20px; } .product__details__pic { margin-bottom: 50px; } .nav::before { width: 125px; } .nav::after { width: 125px; } .discount__content { margin-bottom: 40px; } .checkout__order { margin-top: 20px; } .blog__sidebar { padding-left: 0; } .canvas__open { display: block; font-size: 22px; color: #ca1515; height: 35px; width: 35px; line-height: 35px; text-align: center; border: 1px solid #ca1515; border-radius: 2px; cursor: pointer; position: absolute; right: 15px; top: 24px; } .offcanvas-menu-overlay { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.7); content: ""; z-index: 98; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; visibility: hidden; } .offcanvas-menu-overlay.active { visibility: visible; } .offcanvas-menu-wrapper { position: fixed; left: -300px; width: 300px; height: 100%; background: #ffffff; padding: 90px 20px 30px 30px; display: block; z-index: 99; overflow-y: auto; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; opacity: 0; } .offcanvas-menu-wrapper.active { opacity: 1; left: 0; } .offcanvas__close { position: absolute; width: 40px; height: 40px; right: 30px; top: 25px; border: 1px solid #ddd; border-radius: 50%; font-size: 26px; text-align: center; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); cursor: pointer; } .offcanvas__menu { display: none; } .slicknav_btn { display: none; } .slicknav_menu { background: transparent; padding: 0; margin-bottom: 20px; } .slicknav_nav ul { margin: 0; } .slicknav_nav .slicknav_row, .slicknav_nav a { padding: 7px 0; margin: 0; color: #111111; font-weight: 600; } .slicknav_nav .slicknav_row:hover { border-radius: 0; background: transparent; color: #111111; } .slicknav_nav a:hover { border-radius: 0; background: transparent; color: #111111; } .slicknav_nav { display: block !important; } .offcanvas__logo { margin-bottom: 25px; } .offcanvas__widget { text-align: center; margin-bottom: 20px; } .offcanvas__widget li { list-style: none; display: inline-block; font-size: 18px; color: #111111; margin-right: 20px; cursor: pointer; } .offcanvas__widget li:last-child { margin-right: 0; } .offcanvas__widget li a { font-size: 18px; color: #111111; position: relative; } .offcanvas__widget li a .tip { position: absolute; right: -12px; top: -11px; height: 18px; width: 18px; background: #111111; font-size: 10px; font-weight: 500; color: #ffffff; line-height: 18px; text-align: center; border-radius: 50%; } .offcanvas__auth a { font-size: 15px; color: #111111; position: relative; margin-right: 8px; font-weight: 500; } .offcanvas__auth a:last-child { margin-right: 0; } .offcanvas__auth a:last-child:after { display: none; } .offcanvas__auth a:after { position: absolute; right: -8px; top: -2px; content: "/"; font-size: 13px; } .header__menu { display: none; } .header__right { display: none; } .banner_img { height: 475px; } .banner_text h1 { font-size: 38px; } .banner_sm_img { margin-bottom: 30px; } .banner_sm_img.banner_sm_2 { margin: 0; } .product__item { margin-bottom: 30px; } .collection__text h2 { font-size: 60px; } } /* Wide Mobile = 480px */ @media only screen and (max-width: 767px) { .spad { padding-top: 50px; padding-bottom: 50px; } .canvas__open { display: block; font-size: 22px; color: #ca1515; height: 35px; width: 35px; line-height: 35px; text-align: center; border: 1px solid #ca1515; border-radius: 2px; cursor: pointer; position: absolute; right: 15px; top: 24px; } .offcanvas-menu-overlay { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.7); content: ""; z-index: 98; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; visibility: hidden; } .offcanvas-menu-overlay.active { visibility: visible; } .offcanvas-menu-wrapper { position: fixed; left: -270px; width: 270px; height: 100%; background: #ffffff; padding: 90px 20px 30px 30px; display: block; z-index: 99; overflow-y: auto; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; opacity: 0; } .offcanvas-menu-wrapper.active { opacity: 1; left: 0; } .offcanvas__close { position: absolute; width: 40px; height: 40px; right: 30px; top: 25px; border: 1px solid #ddd; border-radius: 50%; font-size: 26px; text-align: center; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); cursor: pointer; } .offcanvas__menu { display: none; } .slicknav_btn { display: none; } .slicknav_menu { background: transparent; padding: 0; margin-bottom: 20px; } .slicknav_nav ul { margin: 0; } .slicknav_nav .slicknav_row, .slicknav_nav a { padding: 7px 0; margin: 0; color: #111111; font-weight: 600; } .slicknav_nav .slicknav_row:hover { border-radius: 0; background: transparent; color: #111111; } .slicknav_nav a:hover { border-radius: 0; background: transparent; color: #111111; } .slicknav_nav { display: block !important; } .offcanvas__logo { margin-bottom: 25px; } .offcanvas__logo img{ max-width: 125px; } .offcanvas__widget { text-align: center; margin-bottom: 20px; } .offcanvas__widget li { list-style: none; display: inline-block; font-size: 18px; color: #111111; margin-right: 20px; cursor: pointer; } .offcanvas__widget li:last-child { margin-right: 0; } .offcanvas__widget li a { font-size: 18px; color: #111111; position: relative; } .offcanvas__widget li a .tip { position: absolute; right: -12px; top: -11px; height: 18px; width: 18px; background: #ca1515; font-size: 10px; font-weight: 500; color: #ffffff; line-height: 18px; text-align: center; border-radius: 50%; } .offcanvas__auth a { font-size: 15px; color: #111111; position: relative; margin-right: 8px; font-weight: 500; } .offcanvas__auth a:last-child { margin-right: 0; } .offcanvas__auth a:last-child:after { display: none; } .offcanvas__auth a:after { position: absolute; right: -8px; top: -2px; content: "/"; font-size: 13px; } .header__menu { display: none; } .header__right { display: none; } .filter__controls { text-align: left; margin-bottom: 40px; } .filter__controls li { margin-right: 20px; } .discount__pic img { height: auto; } .discount__text { padding: 75px 40px 50px; height: auto; } .product__details__pic__left { height: auto; } .product__details__pic { margin-bottom: 30px; } .quantity { float: none; margin-right: 0; } .nav::before { display: none; } .nav::after { display: none; } .header__menu { display: none; } .header__right { display: none; } .banner_img { height: 350px; padding-left: 35px; margin-bottom: 15px; } .banner_text h1 { font-size: 28px; } .banner_sm_img { padding-left: 35px; margin-bottom: 15px; } .banner_sm_img.banner_sm_2 { margin: 0; } .product__item { margin-bottom: 30px; } .collection__text h2 { font-size: 40px; } } /* Small Device = 320px */ @media only screen and (max-width: 479px) { .search-model-form input { width: 100%; font-size: 24px; } }
/*------------------ Preloader --------------------*/ $(window).on('load', function () { $(".custom-loader").fadeOut(); $("#preloder").delay(200).fadeOut("slow"); }); /*------------------ collection__slider --------------------*/ $('.collection__slider').slick({ dots: true, arrows: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); /*------------------ Canvas Menu --------------------*/ $(".canvas__open").on('click', function () { $(".offcanvas-menu-wrapper").addClass("active"); $(".offcanvas-menu-overlay").addClass("active"); }); $(".offcanvas-menu-overlay, .offcanvas__close").on('click', function () { $(".offcanvas-menu-wrapper").removeClass("active"); $(".offcanvas-menu-overlay").removeClass("active"); }); /*------------------ Navigation --------------------*/ $(".header__menu").slicknav({ prependTo: '#mobile-menu-wrap', allowParentLinks: true }); //Search Switch $('.search-switch').on('click', function () { $('.search-model').fadeIn(400); }); $('.search-close-switch').on('click', function () { $('.search-model').fadeOut(400, function () { $('#search-input').val(''); }); }); /*------------------- Range Slider --------------------- */ var rangeSlider = $(".price-range"), minamount = $("#minamount"), maxamount = $("#maxamount"), minPrice = rangeSlider.data('min'), maxPrice = rangeSlider.data('max'); rangeSlider.slider({ range: true, min: minPrice, max: maxPrice, values: [minPrice, maxPrice], slide: function (event, ui) { minamount.val('$' + ui.values[0]); maxamount.val('$' + ui.values[1]); } }); minamount.val('$' + rangeSlider.slider("values", 0)); maxamount.val('$' + rangeSlider.slider("values", 1)); /*------------------ Accordin Active --------------------*/ $('.collapse').on('shown.bs.collapse', function () { $(this).prev().addClass('active'); }); $('.collapse').on('hidden.bs.collapse', function () { $(this).prev().removeClass('active'); });

Related: See More


Questions / Comments: