Access_New/pages/demo-fashion-store.html
2024-09-05 11:33:27 +05:45

1544 lines
78 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/fashion-store/fashion-store.css" />
</head>
<body data-mobile-nav-style="classic">
<header class="header-with-topbar">
<div class="header-top-bar top-bar-light bg-base-color disable-fixed md-border-bottom border-color-transparent-dark-very-light">
<div class="container-fluid">
<div class="row h-40px align-items-center m-0">
<div class="col-12 justify-content-center alt-font fs-13 fw-500 text-uppercase">
<div class="text-dark-gray">Enjoy FREE standard delivery on orders over $100.</div>
<a href="demo-fashion-store.html#" class="text-dark-gray fw-600 ms-5px text-dark-gray-hover"><span class="text-decoration-line-bottom">Shop now</span></a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed center-logo">
<div class="container-fluid">
<div class="col-auto col-xxl-3 col-lg-2 menu-logo">
<div class="header-icon d-none d-lg-flex">
<div class="widget-text icon alt-font">
<a href="demo-fashion-store-contact.html"><i class="feather icon-feather-map-pin d-inline-block me-5px"></i><span class="d-none d-xxl-inline-block">Find stores</span></a>
</div>
<div class="widget-text icon alt-font">
<a href="https://www.instagram.com/" target="_blank"><i class="feather icon-feather-instagram d-inline-block me-5px"></i><span class="d-none d-xxl-inline-block">100k Followers</span></a>
</div>
</div>
<a class="navbar-brand" href="demo-fashion-store.html">
<img src="images/demo-fashion-store-logo-black.png" data-at2x="images/demo-fashion-store-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-fashion-store-logo-black.png" data-at2x="images/demo-fashion-store-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-fashion-store-logo-black.png" data-at2x="images/demo-fashion-store-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-xxl-6 col-lg-8 menu-order">
<button class="navbar-toggler float-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav alt-font navbar-left justify-content-end">
<li class="nav-item">
<a href="demo-fashion-store.html" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown submenu">
<a href="demo-fashion-store-shop.html" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink1">
<div class="d-lg-flex mega-menu m-auto flex-column">
<div class="row row-cols-1 row-cols-lg-5 row-cols-md-3 row-cols-sm-3 mb-50px md-mb-25px xs-mb-15px">
<div class="col">
<ul>
<li class="sub-title">Men</li>
<li><a href="demo-fashion-store.html#">Jeans</a></li>
<li><a href="demo-fashion-store.html#">Trousers</a></li>
<li><a href="demo-fashion-store.html#">Swimwear</a></li>
<li><a href="demo-fashion-store.html#">Casual shirts</a></li>
<li><a href="demo-fashion-store.html#">Rain jackets</a></li>
<li><a href="demo-fashion-store.html#">Loungewear</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Women</li>
<li><a href="demo-fashion-store.html#">Dupattas</a></li>
<li><a href="demo-fashion-store.html#">Leggings</a></li>
<li><a href="demo-fashion-store.html#">Ethnic wear</a></li>
<li><a href="demo-fashion-store.html#">Kurtas & suits</a></li>
<li><a href="demo-fashion-store.html#">Western wear</a></li>
<li><a href="demo-fashion-store.html#">Dress materials</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Kids</li>
<li><a href="demo-fashion-store.html#">Dresses</a></li>
<li><a href="demo-fashion-store.html#">Jumpsuits</a></li>
<li><a href="demo-fashion-store.html#">Track pants</a></li>
<li><a href="demo-fashion-store.html#">Ethnic wear</a></li>
<li><a href="demo-fashion-store.html#">Value packs</a></li>
<li><a href="demo-fashion-store.html#">Loungewear</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Divided</li>
<li><a href="demo-fashion-store.html#">Tops</a></li>
<li><a href="demo-fashion-store.html#">Dresses</a></li>
<li><a href="demo-fashion-store.html#">Shorts</a></li>
<li><a href="demo-fashion-store.html#">Swimwear</a></li>
<li><a href="demo-fashion-store.html#">Jeans</a></li>
<li><a href="demo-fashion-store.html#">Jackets</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Accessories</li>
<li><a href="demo-fashion-store.html#">Shoes</a></li>
<li><a href="demo-fashion-store.html#">Scarves</a></li>
<li><a href="demo-fashion-store.html#">Watches</a></li>
<li><a href="demo-fashion-store.html#">Wristwear</a></li>
<li><a href="demo-fashion-store.html#">Backpacks</a></li>
<li><a href="demo-fashion-store.html#">Sunglasses</a></li>
</ul>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2">
<div class="col">
<a href="demo-fashion-store-shop.html"><img src="images/demo-fashion-store-menu-banner-01.jpg" alt></a>
</div>
<div class="col">
<a href="demo-fashion-store-shop.html"><img src="images/demo-fashion-store-menu-banner-02.jpg" alt></a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="demo-fashion-store-collection.html" class="nav-link">Collection</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto flex-column">
<div class="row row-cols-2 row-cols-lg-6 row-cols-md-3 row-cols-sm-2 md-mx-0 align-items-center justify-content-center">
<div class="col md-mb-25px">
<a href="demo-fashion-store-collection.html" class="justify-content-center mb-10px">
<img src="images/demo-fashion-store-menu-category-01.jpg" class="border-radius-4px w-100" alt>
</a>
<a href="demo-fashion-store-collection.html" class="btn btn-hover-animation fw-500 text-uppercase-inherit justify-content-center pt-0 pb-0">
<span>
<span class="btn-text text-dark-gray fs-17">Polo t-shirts</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right icon-very-small w-auto"></i></span>
</span>
</a>
</div>
<div class="col md-mb-25px">
<a href="demo-fashion-store-collection.html" class="justify-content-center mb-10px">
<img src="images/demo-fashion-store-menu-category-02.jpg" class="border-radius-4px w-100" alt>
</a>
<a href="demo-fashion-store-collection.html" class="btn btn-hover-animation fw-500 text-uppercase-inherit justify-content-center pt-0 pb-0">
<span>
<span class="btn-text text-dark-gray fs-17">Sunglasses</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right icon-very-small w-auto"></i></span>
</span>
</a>
</div>
<div class="col md-mb-25px">
<a href="demo-fashion-store-collection.html" class="justify-content-center mb-10px">
<img src="images/demo-fashion-store-menu-category-03.jpg" class="border-radius-4px w-100" alt>
</a>
<a href="demo-fashion-store-collection.html" class="btn btn-hover-animation fw-500 text-uppercase-inherit justify-content-center pt-0 pb-0">
<span>
<span class="btn-text text-dark-gray fs-17">Skinny blazer</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right icon-very-small w-auto"></i></span>
</span>
</a>
</div>
<div class="col sm-mb-25px">
<a href="demo-fashion-store-collection.html" class="justify-content-center mb-10px">
<img src="images/demo-fashion-store-menu-category-04.jpg" class="border-radius-4px w-100" alt>
</a>
<a href="demo-fashion-store-collection.html" class="btn btn-hover-animation fw-500 text-uppercase-inherit justify-content-center pt-0 pb-0">
<span>
<span class="btn-text text-dark-gray fs-17">Casual shoes</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right icon-very-small w-auto"></i></span>
</span>
</a>
</div>
<div class="col">
<a href="demo-fashion-store-collection.html" class="justify-content-center mb-10px">
<img src="images/demo-fashion-store-menu-category-05.jpg" class="border-radius-4px w-100" alt>
</a>
<a href="demo-fashion-store-collection.html" class="btn btn-hover-animation fw-500 text-uppercase-inherit justify-content-center pt-0 pb-0">
<span>
<span class="btn-text text-dark-gray fs-17">Winter jackets</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right icon-very-small w-auto"></i></span>
</span>
</a>
</div>
<div class="col">
<a href="demo-fashion-store-collection.html" class="justify-content-center mb-10px">
<img src="images/demo-fashion-store-menu-category-06.jpg" class="border-radius-4px w-100" alt>
</a>
<a href="demo-fashion-store-collection.html" class="btn btn-hover-animation fw-500 text-uppercase-inherit justify-content-center pt-0 pb-0">
<span>
<span class="btn-text text-dark-gray fs-17">Men's shorts</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right icon-very-small w-auto"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav alt-font navbar-right justify-content-start">
<li class="nav-item">
<a href="demo-fashion-store-magazine.html" class="nav-link">Magazine</a>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li><a href="demo-fashion-store-about.html">About</a></li>
<li><a href="demo-fashion-store-faq.html">Faq</a></li>
<li><a href="demo-fashion-store-wishlist.html">Wishlist</a></li>
<li><a href="demo-fashion-store-account.html">Account</a></li>
<li><a href="demo-fashion-store-cart.html">Cart</a></li>
<li><a href="demo-fashion-store-checkout.html">Checkout</a></li>
</ul>
</li>
<li class="nav-item">
<a href="demo-fashion-store-contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
<div class="col-auto col-xxl-3 col-lg-2 text-end">
<div class="header-icon">
<div class="header-search-icon icon alt-font">
<a href="javascript:void(0)" class="search-form-icon header-search-form"><i class="feather icon-feather-search me-5px"></i><span class="d-none d-xxl-inline-block">Search</span></a>
<div class="search-form-wrapper">
<button title="Close" type="button" class="search-close alt-font">×</button>
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
<div class="search-form-box">
<h2 class="text-dark-gray text-center mb-4 fw-600 alt-font ls-minus-1px">What are you looking for?</h2>
<input class="search-input alt-font" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
<button type="submit" class="search-button">
<i class="feather icon-feather-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
<div class="widget-text icon alt-font">
<a href="demo-fashion-store-account.html"><i class="feather icon-feather-user d-inline-block me-5px"></i><span class="d-none d-xxl-inline-block">Account</span></a>
</div>
<div class="header-cart-icon icon">
<div class="header-cart dropdown">
<a href="javascript:void(0);"><i class="feather icon-feather-shopping-bag"></i><span class="cart-count alt-font text-white bg-dark-gray">2</span></a>
<ul class="cart-item-list">
<li class="cart-item align-items-center">
<a href="javascript:void(0);" class="alt-font close">×</a>
<div class="product-image">
<a href="demo-fashion-store-single-product.html"><img src="images/demo-fashion-store-product-01.jpg" class="cart-thumb" alt></a>
</div>
<div class="product-detail fw-600">
<a href="demo-fashion-store-single-product.html">Ribbed tank</a>
<span class="item-ammount fw-400">1 x $23.00</span>
</div>
</li>
<li class="cart-item align-items-center">
<a href="javascript:void(0);" class="alt-font close">×</a>
<div class="product-image">
<a href="demo-fashion-store-single-product.html"><img src="images/demo-fashion-store-product-02.jpg" class="cart-thumb" alt></a>
</div>
<div class="product-detail fw-600">
<a href="demo-fashion-store-single-product.html">Pleated dress</a>
<span class="item-ammount fw-400">2 x $15.00</span>
</div>
</li>
<li class="cart-total">
<div class="fs-18 alt-font mb-15px"><span class="w-50 fw-500 text-start">Subtotal:</span><span class="w-50 text-end fw-700">$199.99</span></div>
<a href="demo-fashion-store-cart.html" class="btn btn-large btn-transparent-light-gray border-color-extra-medium-gray">View cart</a>
<a href="demo-fashion-store-checkout.html" class="btn btn-large btn-dark-gray btn-box-shadow">Checkout</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="p-0">
<div class="swiper full-screen top-space-margin md-h-600px sm-h-500px magic-cursor magic-cursor-vertical swiper-number-pagination-progress swiper-number-pagination-progress-vertical" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;direction&quot;: &quot;horizontal&quot;, &quot;loop&quot;: true, &quot;parallax&quot;: true, &quot;speed&quot;: 1000, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-number&quot;, &quot;clickable&quot;: true }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1199&quot;: { &quot;direction&quot;: &quot;vertical&quot; }}, &quot;effect&quot;: &quot;slide&quot; }" data-swiper-number-pagination-progress="true">
<div class="swiper-wrapper">
<div class="swiper-slide overflow-hidden">
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" data-swiper-parallax="500" style="background-image:url('images/demo-fashion-store-slider-01.jpg');">
<div class="container h-100">
<div class="row align-items-center h-100 justify-content-start">
<div class="col-md-10 position-relative text-white d-flex flex-column justify-content-center h-100">
<div data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: 300 }" class="alt-font text-dark-gray mb-25px fs-20 sm-mb-15px"><span class="text-highlight">Discount on selected collection!<span class="bg-base-color h-8px bottom-0px"></span></span></div>
<div class="alt-font fs-120 xs-fs-95 lh-100 mb-40px text-dark-gray fw-600 transform-origin-right ls-minus-5px sm-mb-25px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [90, 0], &quot;opacity&quot;: [0,1], &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="d-block">Women's</span>
<span class="d-block fw-300">collection</span>
</div>
<div data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 800, &quot;delay&quot;: 400 }">
<a href="demo-fashion-store-shop.html" class="btn btn-dark-gray btn-box-shadow btn-large">View collection</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide overflow-hidden">
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" data-swiper-parallax="500" style="background-image:url('images/demo-fashion-store-slider-02.jpg');">
<div class="container h-100">
<div class="row align-items-center h-100 justify-content-start">
<div class="col-md-10 position-relative text-white d-flex flex-column justify-content-center h-100">
<div data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: 300 }" class="alt-font text-dark-gray mb-25px fs-20 sm-mb-15px"><span class="text-highlight">Discount on selected collection!<span class="bg-base-color h-8px bottom-0px"></span></span></div>
<div class="alt-font fs-120 xs-fs-95 lh-100 mb-40px text-dark-gray fw-600 transform-origin-right ls-minus-5px sm-mb-25px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [90, 0], &quot;opacity&quot;: [0,1], &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="d-block">Men's</span>
<span class="d-block fw-300">collection</span>
</div>
<div data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 800, &quot;delay&quot;: 400 }">
<a href="demo-fashion-store-shop.html" class="btn btn-dark-gray btn-box-shadow btn-large">View collection</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide overflow-hidden">
<div class="cover-background position-absolute top-0 start-0 w-100 h-100" data-swiper-parallax="500" style="background-image:url('images/demo-fashion-store-slider-03.jpg');">
<div class="container h-100">
<div class="row align-items-center h-100 justify-content-start">
<div class="col-md-10 position-relative text-white d-flex flex-column justify-content-center h-100">
<div data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [50, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 500, &quot;delay&quot;: 300 }" class="alt-font text-dark-gray mb-25px fs-20 sm-mb-15px"><span class="text-highlight">Discount on selected collection!<span class="bg-base-color h-8px bottom-0px"></span></span></div>
<div class="alt-font fs-120 xs-fs-95 lh-100 mb-40px text-dark-gray fw-600 transform-origin-right ls-minus-5px sm-mb-25px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;rotateX&quot;: [90, 0], &quot;opacity&quot;: [0,1], &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="d-block">Children's</span>
<span class="d-block fw-300">collection</span>
</div>
<div data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 800, &quot;delay&quot;: 400 }">
<a href="demo-fashion-store-shop.html" class="btn btn-dark-gray btn-box-shadow btn-large">View collection</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination-wrapper">
<div class="pagination-progress-vertical d-flex align-items-center justify-content-center">
<div class="number-prev text-dark-gray fs-16 fw-500"></div>
<div class="swiper-pagination-progress">
<span class="swiper-progress"></span>
</div>
<div class="number-next text-dark-gray fs-16 fw-500"></div>
</div>
</div>
</div>
</section>
<section class="half-section">
<div class="container">
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-4 row-cols-md-2 row-cols-sm-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-01 md-mb-35px">
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<i class="line-icon-Box-Close icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-20 fw-500 d-block text-dark-gray">Free shipping</span>
<p class="fs-16 lh-24">Free shipping on first order</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 md-mb-35px">
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<i class="line-icon-Reload-3 icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-20 fw-500 d-block text-dark-gray">15 days returns</span>
<p class="fs-16 lh-24">Moneyback guarantee</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01 xs-mb-35px">
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<i class="line-icon-Credit-Card2 icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-20 fw-500 d-block text-dark-gray">Secure payment</span>
<p class="fs-16 lh-24">100% protected payment</p>
</div>
</div>
</div>
<div class="col icon-with-text-style-01">
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<i class="line-icon-Phone-2 icon-large text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-20 fw-500 d-block text-dark-gray">Online support</span>
<p class="fs-16 lh-24">24/7 days a week support</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-0 pb-0 ps-7 pe-7 lg-ps-3 lg-pe-3 xs-p-0">
<div class="container-fluid">
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-2 row-cols-md-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;perspective&quot;: [1200,1200], &quot;scale&quot;: [1.1, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 400, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col categories-style-02 lg-mb-30px">
<div class="categories-box">
<a href="demo-fashion-store-shop.html">
<img class="sm-w-100" src="images/demo-fashion-store-banner-01.jpg" alt />
</a>
<div class="border-color-transparent-dark-very-light border alt-font fw-500 text-dark-gray text-uppercase ps-15px pe-15px fs-11 lh-26 border-radius-100px d-inline-block position-absolute right-20px top-20px">8 items</div>
<div class="absolute-bottom-center bottom-40px md-bottom-25px">
<a href="demo-fashion-store-shop.html" class="btn btn-white btn-switch-text btn-round-edge btn-box-shadow fs-18 text-uppercase-inherit p-5 min-w-150px">
<span>
<span class="btn-double-text ls-0px" data-text="Women">Women</span>
</span>
</a>
</div>
</div>
</div>
<div class="col categories-style-02 lg-mb-30px">
<div class="categories-box">
<a href="demo-fashion-store-shop.html">
<img class="sm-w-100" src="images/demo-fashion-store-banner-02.jpg" alt />
</a>
<div class="border-color-transparent-dark-very-light border alt-font fw-500 text-dark-gray text-uppercase ps-15px pe-15px fs-11 lh-26 border-radius-100px d-inline-block position-absolute right-20px top-20px">9 items</div>
<div class="absolute-bottom-center bottom-40px md-bottom-25px">
<a href="demo-fashion-store-shop.html" class="btn btn-white btn-switch-text btn-round-edge btn-box-shadow fs-18 text-uppercase-inherit p-5 min-w-150px">
<span>
<span class="btn-double-text ls-0px" data-text="Men">Men</span>
</span>
</a>
</div>
</div>
</div>
<div class="col categories-style-02 sm-mb-30px">
<div class="categories-box">
<a href="demo-fashion-store-shop.html">
<img class="sm-w-100" src="images/demo-fashion-store-banner-03.jpg" alt />
</a>
<div class="border-color-transparent-dark-very-light border alt-font fw-500 text-dark-gray text-uppercase ps-15px pe-15px fs-11 lh-26 border-radius-100px d-inline-block position-absolute right-20px top-20px">8 items</div>
<div class="absolute-bottom-center bottom-40px md-bottom-25px">
<a href="demo-fashion-store-shop.html" class="btn btn-white btn-switch-text btn-round-edge btn-box-shadow fs-18 text-uppercase-inherit p-5 min-w-150px">
<span>
<span class="btn-double-text ls-0px" data-text="Accessories">Accessories</span>
</span>
</a>
</div>
</div>
</div>
<div class="col categories-style-02">
<div class="categories-box">
<a href="demo-fashion-store-shop.html">
<img class="sm-w-100" src="images/demo-fashion-store-banner-04.jpg" alt />
</a>
<div class="border-color-transparent-dark-very-light border alt-font fw-500 text-dark-gray text-uppercase ps-15px pe-15px fs-11 lh-26 border-radius-100px d-inline-block position-absolute right-20px top-20px">8 items</div>
<div class="absolute-bottom-center bottom-40px md-bottom-25px">
<a href="demo-fashion-store-shop.html" class="btn btn-white btn-switch-text btn-round-edge btn-box-shadow fs-18 text-uppercase-inherit p-5 min-w-150px">
<span>
<span class="btn-double-text ls-0px" data-text="Kids">Kids</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ps-7 pe-7 pb-3 lg-ps-3 lg-pe-3 sm-pb-6 xs-px-0">
<div class="container">
<div class="row mb-5 xs-mb-8">
<div class="col-12 text-center">
<h2 class="alt-font text-dark-gray mb-0 ls-minus-2px">Best seller <span class="text-highlight fw-600">products<span class="bg-base-color h-5px bottom-2px"></span></span></h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="shop-modern shop-wrapper grid-loading grid grid-5col lg-grid-4col md-grid-3col sm-grid-2col xs-grid-1col gutter-extra-large text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-01.jpg" alt>
<span class="lable new">New</span>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Textured sweater</a>
<div class="price lh-22 fs-16"><del>$200.00</del>$189.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-02.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Traveller shirt</a>
<div class="price lh-22 fs-16"><del>$350.00</del>$289.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-03.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Crewneck sweatshirt</a>
<div class="price lh-22 fs-16"><del>$220.00</del>$199.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-04.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Skinny trousers</a>
<div class="price lh-22 fs-16"><del>$300.00</del>$259.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-05.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Sleeve sweater</a>
<div class="price lh-22 fs-16"><del>$250.00</del>$239.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-06.jpg" alt>
<span class="lable hot">Hot</span>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Pocket sweatshirt</a>
<div class="price lh-22 fs-16"><del>$200.00</del>$189.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-07.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Cotton sweater</a>
<div class="price lh-22 fs-16"><del>$150.00</del>$129.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-08.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Texture regular</a>
<div class="price lh-22 fs-16"><del>$170.00</del>$120.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-09.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Sequined dress</a>
<div class="price lh-22 fs-16"><del>$190.00</del>$150.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-10.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Bermuda shorts</a>
<div class="price lh-22 fs-16"><del>$120.00</del>$100.00</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="p-15px bg-dark-gray text-white">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<span class="fs-15 text-uppercase fw-500">Take an extra 25% discount our favorite dress style. Use code:<span class="fs-14 fw-700 lh-28 alt-font text-dark-gray text-uppercase bg-base-color d-inline-block border-radius-30px ps-15px pe-15px ms-5px align-middle">fw205</span></span>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray overflow-hidden position-relative ps-3 xs-ps-0">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-3 ps-5 pe-5 xl-pe-0 lg-ps-0 text-center text-lg-start md-mb-40px">
<div class="mb-10px"><span class="text-dark-gray fw-500 text-highlight">Lookbook 2023<span class="bg-base-color h-8px bottom-0px"></span></span></div>
<h2 class="alt-font lh-50 text-dark-gray ls-minus-1px mb-15px">New arrival <span class="fw-600">collection</span></h2>
<p class="xs-pe-15px xs-ps-15px">Flash summer sale 70% off on selected collection for him.</p>
<a href="demo-fashion-store-shop.html" class="btn btn-dark-gray btn-box-shadow btn-medium">View collection</a>
</div>
<div class="col-12 col-lg-9 position-relative">
<div class="outside-box-right-10 lg-outside-box-right-20 md-outside-box-right-25 xs-outside-box-right-0">
<div class="swiper slider-three-slide" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-1&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1400&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;1024&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;576&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-01.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Ethnic wear</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Outfits matching</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-02.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Dress materials</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Explore a variety</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-03.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Western wear</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Traditional attires</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-04.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Loungewear</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Women branded</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-01.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Ethnic wear</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Outfits matching</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-02.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Dress materials</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Explore a variety</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-03.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Western wear</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Traditional attires</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="interactive-banner-style-09 border-radius-6px overflow-hidden position-relative">
<img src="images/demo-fashion-store-collection-slider-04.jpg" alt />
<div class="opacity-full bg-gradient-gray-light-dark-transparent"></div>
<div class="image-content h-100 w-100 ps-15 pe-15 pt-11 pb-11 lg-p-11 d-flex justify-content-bottom align-items-start flex-column">
<div class="mt-auto d-flex align-items-start w-100 z-index-1 position-relative overflow-hidden flex-column">
<span class="text-white fw-500 fs-22">Loungewear</span>
<span class="content-title text-white fs-14 fw-500 opacity-7 text-uppercase ls-05px">Women branded</span>
<a href="demo-fashion-store-shop.html" class="content-title-hover fs-14 lh-24 fw-500 ls-05px text-uppercase text-white opacity-6 text-decoration-line-bottom">Explore collection</a>
<span class="content-arrow lh-50 rounded-circle bg-base-color w-50px h-50px ms-20px text-center"><i class="bi bi-arrow-right-short text-dark-gray icon-very-medium"></i></span>
</div>
<div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-regal-blue-transparent opacity-9"></div>
<div class="box-overlay bg-gradient-gray-light-dark-transparent"></div>
<a href="demo-fashion-store-shop.html" class="position-absolute z-index-1 top-0px left-0px h-100 w-100"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fs-180 lg-fs-150 md-fs-130 fw-700 position-absolute bottom-minus-50px md-bottom-minus-40px ls-minus-5px left-0px right-0px text-center w-100 opacity-1 d-none d-md-block" data-bottom-top="transform:scale(1, 1) translate3d(0px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(-100px, 0px, 0px);">new collection</div>
</section>
<section class="half-section border-bottom border-color-extra-medium-gray">
<div class="container">
<div class="row row-cols-2 row-cols-md-5 row-cols-sm-3 position-relative justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;scale&quot;: [0.8, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col text-center sm-mb-30px">
<a href="demo-fashion-store.html#"><img src="images/logo-asos.svg" class="h-30px" alt /></a>
</div>
<div class="col text-center sm-mb-30px">
<a href="demo-fashion-store.html#"><img src="images/logo-chanel.svg" class="h-30px" alt /></a>
</div>
<div class="col text-center sm-mb-30px">
<a href="demo-fashion-store.html#"><img src="images/logo-gucci.svg" class="h-30px" alt /></a>
</div>
<div class="col text-center xs-mb-30px">
<a href="demo-fashion-store.html#"><img src="images/logo-celine.svg" class="h-30px" alt /></a>
</div>
<div class="col text-center">
<a href="demo-fashion-store.html#"><img src="images/logo-adidas.svg" class="h-30px" alt /></a>
</div>
</div>
</div>
</section>
<section class="ps-7 pe-7 pb-3 lg-ps-3 lg-pe-3 md-pb-5 xs-px-0">
<div class="container">
<div class="row mb-5 xs-mb-8">
<div class="col-12 text-center">
<h2 class="alt-font text-dark-gray mb-0 ls-minus-2px">Featured <span class="text-highlight fw-600">products<span class="bg-base-color h-5px bottom-2px"></span></span></h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="shop-modern shop-wrapper grid-loading grid grid-5col lg-grid-3col sm-grid-2col xs-grid-1col gutter-extra-large text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-09.jpg" alt>
<span class="lable new">New</span>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Textured sweater</a>
<div class="price lh-22 fs-16"><del>$200.00</del>$189.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-10.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Traveller shirt</a>
<div class="price lh-22 fs-16"><del>$350.00</del>$289.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-11.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Crewneck sweatshirt</a>
<div class="price lh-22 fs-16"><del>$220.00</del>$199.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-12.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Skinny trousers</a>
<div class="price lh-22 fs-16"><del>$300.00</del>$259.00</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="shop-box mb-10px">
<div class="shop-image mb-20px">
<a href="demo-fashion-store-single-product.html">
<img src="images/demo-fashion-store-product-08.jpg" alt>
<div class="shop-overlay bg-gradient-gray-light-dark-transparent"></div>
</a>
<div class="shop-buttons-wrap">
<a href="demo-fashion-store-single-product.html" class="alt-font btn btn-small btn-box-shadow btn-white btn-round-edge left-icon add-to-cart">
<i class="feather icon-feather-shopping-bag"></i><span class="quick-view-text button-text">Add to cart</span>
</a>
</div>
<div class="shop-hover d-flex justify-content-center">
<ul>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="feather icon-feather-heart fs-16"></i></a>
</li>
<li>
<a href="demo-fashion-store.html#" class="w-40px h-40px bg-white text-dark-gray d-flex align-items-center justify-content-center rounded-circle ms-5px me-5px" data-bs-toggle="tooltip" data-bs-placement="left" title="Quick shop"><i class="feather icon-feather-eye fs-16"></i></a>
</li>
</ul>
</div>
</div>
<div class="shop-footer text-center">
<a href="demo-fashion-store-single-product.html" class="alt-font text-dark-gray fs-19 fw-500">Sleeve sweater</a>
<div class="price lh-22 fs-16"><del>$250.00</del>$239.00</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="p-0 border-top border-bottom border-color-extra-medium-gray">
<div class="container-fluid">
<div class="row position-relative">
<div class="col swiper text-center swiper-width-auto" data-slider-options="{ &quot;slidesPerView&quot;: &quot;auto&quot;, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 10000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">Get 20% off for your first order</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">The fashion core collection</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">100% secure protected payment</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">Free shipping for orders over $130</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">Pay with multiple credit cards</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">Get 20% off for your first order</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">The fashion core collection</div>
</div>
<div class="swiper-slide">
<div class="alt-font fs-26 fw-500 text-dark-gray border-color-extra-medium-gray border-end pt-30px pb-30px ps-60px pe-60px sm-p-25px">100% secure protected payment</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pb-3 ps-7 pe-7 lg-ps-3 lg-pe-3 xs-px-0">
<div class="container">
<div class="row mb-4 xs-mb-7">
<div class="col-12 text-center">
<h2 class="alt-font text-dark-gray mb-0 ls-minus-2px">Fashion <span class="text-highlight fw-600">magazine<span class="bg-base-color h-5px bottom-2px"></span></span></h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;translateX&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 500, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden">
<a href="demo-fashion-store-blog-single-creative.html"><img src="images/demo-fashion-store-blog-01.jpg" alt /></a>
</div>
<div class="card-body px-0 pt-30px pb-30px sm-pb-15px">
<span class="mb-5px d-block">By <a href="demo-fashion-store.html#" class="text-dark-gray fw-500 categories-text">Den viliamson</a><a href="demo-fashion-store.html#" class="blog-date">26 December 2023</a></span>
<a href="demo-fashion-store-blog-single-creative.html" class="alt-font card-title fs-20 lh-30 fw-500 text-dark-gray d-inline-block w-75 xl-w-85 lg-w-100">Elegance is not standing out, but being remembered.</a>
</div>
</div>
</li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden">
<a href="demo-fashion-store-blog-single-creative.html"><img src="images/demo-fashion-store-blog-02.jpg" alt /></a>
</div>
<div class="card-body px-0 pt-30px pb-30px sm-pb-15px">
<span class="mb-5px d-block">By <a href="demo-fashion-store.html#" class="text-dark-gray fw-500 categories-text">Hugh macleod</a><a href="demo-fashion-store.html#" class="blog-date">20 December 2023</a></span>
<a href="demo-fashion-store-blog-single-creative.html" class="alt-font card-title fs-20 lh-30 fw-500 text-dark-gray d-inline-block w-75 xl-w-85 lg-w-100">Fashion is the armor to survive the reality of everyday life.</a>
</div>
</div>
</li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden">
<a href="demo-fashion-store-blog-single-creative.html"><img src="images/demo-fashion-store-blog-06.jpg" alt /></a>
</div>
<div class="card-body px-0 pt-30px pb-30px sm-pb-15px">
<span class="mb-5px d-block">By <a href="demo-fashion-store.html#" class="text-dark-gray fw-500 categories-text">Walton smith</a><a href="demo-fashion-store.html#" class="blog-date">10 December 2023</a></span>
<a href="demo-fashion-store-blog-single-creative.html" class="alt-font card-title fs-20 lh-30 fw-500 text-dark-gray d-inline-block w-75 xl-w-85 lg-w-100">In order to be irreplaceable one must always be different.</a>
</div>
</div>
</li>
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden">
<a href="demo-fashion-store-blog-single-creative.html"><img src="images/demo-fashion-store-blog-07.jpg" alt /></a>
</div>
<div class="card-body px-0 pt-30px pb-30px sm-pb-15px">
<span class="mb-5px d-block">By <a href="demo-fashion-store.html#" class="text-dark-gray fw-500 categories-text">Walton smith</a><a href="demo-fashion-store.html#" class="blog-date">10 December 2023</a></span>
<a href="demo-fashion-store-blog-single-creative.html" class="alt-font card-title fs-20 lh-30 fw-500 text-dark-gray d-inline-block w-75 xl-w-85 lg-w-100">Gucci has represented design and contemporary lifestyle.</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer-dark bg-dark-gray p-0">
<div class="container">
<div class="row align-items-center pt-35px pb-35px">
<div class="col-12 col-md-auto sm-mb-15px text-center text-md-start">
<a href="demo-fashion-store.html" class="footer-logo"><img src="images/demo-fashion-store-logo-white.png" data-at2x="images/demo-fashion-store-logo-white@2x.png" alt class="default-logo"></a>
</div>
<div class="col">
<ul class="footer-navbar text-center text-md-end">
<li class="nav-item"><a href="demo-fashion-store.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-fashion-store-shop.html" class="nav-link">Shop</a></li>
<li class="nav-item"><a href="demo-fashion-store-collection.html" class="nav-link">Collection</a></li>
<li class="nav-item"><a href="demo-fashion-store-magazine.html" class="nav-link">Magazine</a></li>
<li class="nav-item"><a href="demo-fashion-store-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-fashion-store-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="row justify-content-center fs-15 lh-28 pb-50px xs-pb-35px">
<div class="col-12 mb-50px sm-mb-35px">
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-light"></div>
</div>
<div class="col-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fw-500 d-block text-white mb-5px fs-17">Categories</span>
<ul>
<li><a href="demo-fashion-store-shop.html">Men</a></li>
<li><a href="demo-fashion-store-shop.html">Women</a></li>
<li><a href="demo-fashion-store-shop.html">Accessories</a></li>
<li><a href="demo-fashion-store-shop.html">Shoes</a></li>
<li><a href="demo-fashion-store-shop.html">Dresses</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fw-500 d-block text-white mb-5px fs-17">Information</span>
<ul>
<li><a href="demo-fashion-store-about.html">About us</a></li>
<li><a href="demo-fashion-store-contact.html">Contact us</a></li>
<li><a href="demo-fashion-store.html#">Terms & conditions</a></li>
<li><a href="demo-fashion-store.html#">Shipping & delivery</a></li>
<li><a href="demo-fashion-store.html#">Privacy policy</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fw-500 d-block text-white mb-5px fs-17">Quick links</span>
<ul>
<li><a href="demo-fashion-store-account.html">My account</a></li>
<li><a href="demo-fashion-store.html#">Orders tracking</a></li>
<li><a href="demo-fashion-store.html#">Our store</a></li>
<li><a href="demo-fashion-store.html#">Size guide</a></li>
<li><a href="demo-fashion-store-faq.html">FAQs</a></li>
</ul>
</div>
<div class="col-6 col-lg-3 col-md-4 col-sm-5 md-mb-50px xs-mb-30px order-sm-2 order-lg-2 offset-md-2 offset-lg-0">
<span class="fw-500 d-block text-white mb-10px fs-17">Quick contact</span>
<div><i class="feather icon-feather-phone-call fs-16 text-white me-10px xs-me-5px"></i><a href="tel:1234567890">123 456 7890</a></div>
<div class="mb-15px"><i class="feather icon-feather-mail fs-16 text-white me-10px xs-me-5px"></i><a href="cdn-cgi/l/email-protection.html#94fdfaf2fbd4f0fbf9f5fdfabaf7fbf9" class="text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="dfb6b1b9b09fbbb0b2beb6b1f1bcb0b2">[email&#160;protected]</span></a></div>
<span class="fw-500 d-block text-white mb-5px fs-17">Connect with us</span>
<div class="elements-social social-icon-style-02">
<ul class="light">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-7 ps-20px sm-ps-15px md-mb-50px xs-mb-0 order-sm-1 order-lg-5">
<span class="fw-500 d-block text-white mb-5px fs-17">Become a member</span>
<div class="mb-15px">Join now and get 20% extra discount!</div>
<div class="d-inline-block w-100 newsletter-style-04 position-relative mb-15px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="input-small bg-nero-grey border-radius-4px border-color-transparent w-100 form-control pe-50px ps-20px lg-ps-15px required" type="email" name="email" placeholder="Enter your email" />
<input type="hidden" name="redirect" value>
<button class="btn pe-20px submit" aria-label="submit"><i class="icon bi bi-envelope icon-small text-white"></i></button>
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-22 mt-10px w-100 text-center position-absolute d-none"></div>
</form>
</div>
<div class="footer-card">
<a href="demo-fashion-store.html#" class="d-inline-block me-5px align-middle"><img src="images/demo-decor-store-payment-icon-01.png" alt></a>
<a href="demo-fashion-store.html#" class="d-inline-block me-5px align-middle"><img src="images/demo-decor-store-payment-icon-02.png" alt></a>
<a href="demo-fashion-store.html#" class="d-inline-block me-5px align-middle"><img src="images/demo-decor-store-payment-icon-03.png" alt></a>
<a href="demo-fashion-store.html#" class="d-inline-block me-5px align-middle"><img src="images/demo-decor-store-payment-icon-04.png" alt></a>
</div>
</div>
</div>
</div>
<div class="pt-30px pb-30px bg-nero-grey">
<div class="container">
<div class="row align-items-center fs-15">
<div class="col-12 col-lg-7 last-paragraph-no-margin md-mb-15px text-center text-lg-start lh-22">
<p>This site is protected by reCAPTCHA and the Google <a href="demo-fashion-store.html#" class="text-white text-decoration-line-bottom">privacy policy</a> and <a href="demo-fashion-store.html#" class="text-white text-decoration-line-bottom">terms of service.</a></p>
</div>
<div class="col-12 col-lg-5 text-center text-lg-end lh-22">
<span>&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></span>
</div>
</div>
</div>
</div>
</footer>
<div id="cookies-model" class="cookie-message bg-dark-gray border-radius-8px">
<div class="cookie-description fs-14 text-white mb-20px lh-22">We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Allow cookies" you consent to our use of cookies. </div>
<div class="cookie-btn">
<a href="demo-fashion-store.html#" class="btn btn-transparent-white border-1 border-color-transparent-white-light btn-very-small btn-switch-text btn-rounded w-100 mb-15px" aria-label="btn">
<span>
<span class="btn-double-text" data-text="Cookie policy">Cookie policy</span>
</span>
</a>
<a href="demo-fashion-store.html#" class="btn btn-white btn-very-small btn-switch-text btn-box-shadow accept_cookies_btn btn-rounded w-100" data-accept-btn aria-label="text">
<span>
<span class="btn-double-text" data-text="Allow cookies">Allow cookies</span>
</span>
</a>
</div>
</div>
<div class="sticky-wrap z-index-1 d-none d-xl-inline-block" data-animation-delay="100" data-shadow-animation="true">
<div class="elements-social social-icon-style-10">
<ul class="fs-16">
<li class="me-30px"><a class="facebook" href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook-f me-10px"></i>
<span class="alt-font">Facebook</span>
</a>
</li>
<li class="me-30px">
<a class="dribbble" href="http://www.dribbble.com" target="_blank">
<i class="fa-brands fa-dribbble me-10px"></i>
<span class="alt-font">Dribbble</span>
</a>
</li>
<li class="me-30px">
<a class="twitter" href="https://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter me-10px"></i>
<span class="alt-font">Twitter</span>
</a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com" target="_blank">
<i class="fa-brands fa-instagram me-10px"></i>
<span class="alt-font">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-fashion-store.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>