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

751 lines
37 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-about.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-about.html#">Jeans</a></li>
<li><a href="demo-fashion-store-about.html#">Trousers</a></li>
<li><a href="demo-fashion-store-about.html#">Swimwear</a></li>
<li><a href="demo-fashion-store-about.html#">Casual shirts</a></li>
<li><a href="demo-fashion-store-about.html#">Rain jackets</a></li>
<li><a href="demo-fashion-store-about.html#">Loungewear</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Women</li>
<li><a href="demo-fashion-store-about.html#">Dupattas</a></li>
<li><a href="demo-fashion-store-about.html#">Leggings</a></li>
<li><a href="demo-fashion-store-about.html#">Ethnic wear</a></li>
<li><a href="demo-fashion-store-about.html#">Kurtas & suits</a></li>
<li><a href="demo-fashion-store-about.html#">Western wear</a></li>
<li><a href="demo-fashion-store-about.html#">Dress materials</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Kids</li>
<li><a href="demo-fashion-store-about.html#">Dresses</a></li>
<li><a href="demo-fashion-store-about.html#">Jumpsuits</a></li>
<li><a href="demo-fashion-store-about.html#">Track pants</a></li>
<li><a href="demo-fashion-store-about.html#">Ethnic wear</a></li>
<li><a href="demo-fashion-store-about.html#">Value packs</a></li>
<li><a href="demo-fashion-store-about.html#">Loungewear</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Divided</li>
<li><a href="demo-fashion-store-about.html#">Tops</a></li>
<li><a href="demo-fashion-store-about.html#">Dresses</a></li>
<li><a href="demo-fashion-store-about.html#">Shorts</a></li>
<li><a href="demo-fashion-store-about.html#">Swimwear</a></li>
<li><a href="demo-fashion-store-about.html#">Jeans</a></li>
<li><a href="demo-fashion-store-about.html#">Jackets</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Accessories</li>
<li><a href="demo-fashion-store-about.html#">Shoes</a></li>
<li><a href="demo-fashion-store-about.html#">Scarves</a></li>
<li><a href="demo-fashion-store-about.html#">Watches</a></li>
<li><a href="demo-fashion-store-about.html#">Wristwear</a></li>
<li><a href="demo-fashion-store-about.html#">Backpacks</a></li>
<li><a href="demo-fashion-store-about.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="top-space-margin half-section bg-gradient-very-light-gray">
<div class="container">
<div class="row align-items-center justify-content-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;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 col-xl-8 col-lg-10 text-center position-relative page-title-extra-large">
<h1 class="alt-font fw-600 text-dark-gray mb-10px">About</h1>
</div>
<div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
<ul>
<li><a href="demo-fashion-store.html">Home</a></li>
<li>About</li>
</ul>
</div>
</div>
</div>
</section>
<section class="pt-0 ps-8 pe-8 lg-ps-3 lg-pe-3 position-relative xs-px-0">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img src="images/demo-fashion-store-about-01.jpg" class="w-100" alt />
<div class="absolute-middle-left top-0px left-15 w-170px h-170px border-radius-100 sm-w-110px sm-h-110px sm-left-15px">
<img src="images/demo-fashion-store-about-03.png" class="position-absolute top-50 translate-middle-y" alt>
<img src="images/demo-fashion-store-about-02.png" class="animation-rotation" alt>
</div>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 500, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 col-lg-5">
<div class="alt-font text-dark-gray mb-15px fs-20"><span class="text-highlight">The fashion core collection!<span class="bg-base-color h-8px bottom-0px"></span></span></div>
<h2 class="alt-font text-dark-gray fw-400 ls-minus-1px">The journey of <span class="fw-600">crafto lifestyle.</span></h2>
</div>
<div class="col-12 col-lg-6 offset-lg-1 last-paragraph-no-margin">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.</p>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard be dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</section>
<section class="overflow-hidden position-relative p-0">
<div class="container">
<div class="absolute-middle-left w-100 h-2px bg-base-color"></div>
<div class="row align-items-center">
<div class="col-12 col-md-12 position-relative">
<div class="outside-box-right-30" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="swiper magic-cursor drag-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 35, &quot;loop&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;: 2000, &quot;disableOnInteraction&quot;: false }, &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;992&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3, &quot;spaceBetween&quot;: 45 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 2 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="images/demo-fashion-store-about-04.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/demo-fashion-store-about-05.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/demo-fashion-store-about-06.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/demo-fashion-store-about-07.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/demo-fashion-store-about-08.jpg" alt />
</div>
<div class="swiper-slide">
<img src="images/demo-fashion-store-about-09.jpg" alt />
</div>
<div class="swiper-slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-top-very-light-gray overlap-height pb-4 sm-pb-50px">
<div class="container overlap-gap-section">
<div class="row mb-4 xs-mb-8">
<div class="col-12 text-center">
<h2 class="alt-font text-dark-gray mb-0 ls-minus-2px">We care our <span class="text-highlight fw-600">customers<span class="bg-base-color h-5px bottom-2px"></span></span></h2>
</div>
</div>
<div class="row row-cols-auto row-cols-lg-4 row-cols-sm-2 position-relative" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col align-self-start">
<div class="feature-box text-start ps-30px sm-ps-20px">
<div class="feature-box-icon position-absolute left-0px top-10px">
<h1 class="fs-100 opacity-1 fw-800 ls-minus-1px mb-0">01</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-60px sm-pt-40px">
<span class="text-dark-gray fs-19 d-inline-block fw-600 mb-5px">Business founded</span>
<p class="w-90 xl-w-95">Lorem ipsum is simply text the printing typesetting standard dummy.</p>
<span class="w-60px h-2px bg-dark-gray mt-20px d-inline-block"></span>
</div>
</div>
</div>
<div class="col align-self-end mt-30px">
<div class="feature-box text-start ps-30px sm-ps-20px">
<div class="feature-box-icon position-absolute left-0px top-10px">
<h1 class="alt-font fs-90 opacity-1 fw-800 ls-minus-1px mb-0">02</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-60px sm-pt-40px">
<span class="text-dark-gray fs-19 d-inline-block fw-600 mb-5px">Build new office</span>
<p class="w-90 xl-w-95">Lorem ipsum is simply text the printing typesetting standard dummy.</p>
<span class="w-60px h-2px bg-dark-gray mt-20px d-inline-block"></span>
</div>
</div>
</div>
<div class="col align-self-start xs-mt-30px">
<div class="feature-box text-start ps-30px sm-ps-20px">
<div class="feature-box-icon position-absolute left-0px top-10px">
<h1 class="alt-font fs-90 opacity-1 fw-800 ls-minus-1px mb-0">03</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-60px sm-pt-40px">
<span class="text-dark-gray fs-19 d-inline-block fw-600 mb-5px">Relocates headquarter</span>
<p class="w-90 xl-w-95">Lorem ipsum is simply text the printing typesetting standard dummy.</p>
<span class="w-60px h-2px bg-dark-gray mt-20px d-inline-block"></span>
</div>
</div>
</div>
<div class="col align-self-end mt-30px">
<div class="feature-box text-start ps-30px sm-ps-20px">
<div class="feature-box-icon position-absolute left-0px top-10px">
<h1 class="alt-font fs-90 opacity-1 fw-800 ls-minus-1px mb-0">04</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-60px sm-pt-40px">
<span class="text-dark-gray fs-19 d-inline-block fw-600 mb-5px">Revenues of millions</span>
<p class="w-90 xl-w-95">Lorem ipsum is simply text the printing typesetting standard dummy.</p>
<span class="w-60px h-2px bg-dark-gray mt-20px d-inline-block"></span>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-10 overlap-section">
<div class="col-xl-9 col-lg-10" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 500, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="row align-items-center justify-content-center bg-white box-shadow-medium-bottom border border-color-extra-medium-gray border-radius-100px sm-border-radius-6px md-mx-0">
<div class="col-lg-6 p-20px border-end border-color-transparent-dark-very-light text-center ls-minus-05px align-items-center d-flex justify-content-center md-border-end-0 md-pb-10px">
<i class="bi bi-emoji-smile text-dark-gray icon-extra-medium me-10px"></i>
<span class="text-dark-gray fs-20 text-start fw-500">Join the <span class="fw-700">10000+</span> people trusting us.</span>
</div>
<div class="col-lg-6 p-20px md-pt-0 text-center ls-minus-05px align-items-center d-flex justify-content-center">
<i class="bi bi-star text-dark-gray icon-extra-medium me-10px"></i>
<span class="text-dark-gray fs-20 text-start fw-500">4.9 out of 5 - <span class="fw-700">8549</span> Total reviews.</span>
</div>
</div>
</div>
</div>
<div class="row align-items-center mb-10">
<div class="col-lg-6 position-relative md-mb-70px">
<div class="w-75 position-relative xs-w-80" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;direction&quot;: &quot;rl&quot;, &quot;color&quot;: &quot;#fee300&quot;, &quot;duration&quot;: 1000, &quot;delay&quot;: 300 }">
<img class="w-100" src="images/demo-fashion-store-about-10.jpg" alt>
<div class="position-absolute right-minus-100px xs-right-minus-50px top-30px w-210px h-210px xs-w-130px xs-h-130px border-radius-100 lg-top-minus-10px md-top-60px sm-top-30px" data-bottom-top="transform: translateY(30px)" data-top-bottom="transform: translateY(-30px)">
<img src="images/demo-fashion-store-about-13.png" class="position-absolute top-50 translate-middle-y" alt>
<img src="images/demo-fashion-store-about-12.png" class="animation-rotation" alt>
</div>
</div>
<div class="position-absolute right-minus-15px md-right-15px bottom-minus-30px w-55 md-w-50 overflow-hidden" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;direction&quot;: &quot;lr&quot;, &quot;color&quot;: &quot;#fee300&quot;, &quot;duration&quot;: 1000, &quot;delay&quot;: 1000 }">
<img class="w-100" src="images/demo-fashion-store-about-11.jpg" alt>
</div>
</div>
<div class="col-12 col-lg-5 offset-lg-1">
<div class="alt-font text-dark-gray mb-15px fs-20" data-anime="{ &quot;translateX&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 400, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><span class="text-highlight">Our fashion store mission<span class="bg-base-color h-8px bottom-0px"></span></span></div>
<h2 class="alt-font text-dark-gray mb-20px fw-400 ls-minus-1px w-90 lg-fs-50 lg-w-100" data-anime="{ &quot;translateX&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 400, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Quality product with <span class="fw-600">exceptional price-value.</span></h2>
<div class="row justify-content-center">
<div class="col-12">
<div class="accordion accordion-style-02" id="accordion-style-02" data-active-icon="icon-feather-minus" data-inactive-icon="icon-feather-plus" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 400, &quot;delay&quot;: 500, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="accordion-item active-accordion">
<div class="accordion-header border-bottom border-color-extra-medium-gray">
<a href="demo-fashion-store-about.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-01" aria-expanded="true" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray">
<i class="feather icon-feather-minus"></i><span class="fw-600 fs-19">Fashions fade style is eternal</span>
</div>
</a>
</div>
<div id="accordion-style-02-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
<p>We deliver customized marketing campaign to use your audience to make a positive move.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header border-bottom border-color-extra-medium-gray">
<a href="demo-fashion-store-about.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-02" aria-expanded="false" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray">
<i class="feather icon-feather-plus"></i><span class="fw-600 fs-19">I make clothes. Women make fashion</span>
</div>
</a>
</div>
<div id="accordion-style-02-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
<p>We deliver customized marketing campaign to use your audience to make a positive move.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header border-bottom border-color-transparent">
<a href="demo-fashion-store-about.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-03" aria-expanded="false" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray">
<i class="feather icon-feather-plus"></i><span class="fw-600 fs-19">Something new fashion for everyone</span>
</div>
</a>
</div>
<div id="accordion-style-02-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-transparent">
<p>We deliver customized marketing campaign to use your audience to make a positive move.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row position-relative clients-style-08" data-anime="{&quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col swiper text-center feather-shadow" data-slider-options="{ &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 4000, &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;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-asos.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-chanel.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-gucci.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-celine.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-adidas.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-asos.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-chanel.svg" class="h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-fashion-store-about.html#"><img src="images/logo-gucci.svg" class="h-30px" alt /></a>
</div>
</div>
</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-about.html#">Terms & conditions</a></li>
<li><a href="demo-fashion-store-about.html#">Shipping & delivery</a></li>
<li><a href="demo-fashion-store-about.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-about.html#">Orders tracking</a></li>
<li><a href="demo-fashion-store-about.html#">Our store</a></li>
<li><a href="demo-fashion-store-about.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#0c65626a634c6863616d6562226f6361" class="text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="ef86818980af8b80828e8681c18c8082">[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-about.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-about.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-about.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-about.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-about.html#" class="text-white text-decoration-line-bottom">privacy policy</a> and <a href="demo-fashion-store-about.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-about.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-about.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="scroll-progress d-none d-xxl-block">
<a href="demo-fashion-store-about.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>