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

728 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/decor-store/decor-store.css" />
</head>
<body data-mobile-nav-style="classic">
<header class="header-with-topbar">
<div class="header-top-bar top-bar-light bg-white disable-fixed border-bottom border-color-transparent-dark-very-light">
<div class="container-fluid">
<div class="row h-45px align-items-center m-0">
<div class="col-lg-7 col-md-8 text-center text-md-start">
<div class="fs-13 text-dark-gray alt-font fw-600">Free Delivery on orders over £120. Don't miss discount. <a href="demo-decor-store-shop.html" class="text-dark-gray fw-700 text-decoration-line-bottom">Shop now</a></div>
</div>
<div class="col-lg-5 col-md-4 text-end d-none d-md-flex">
<a href="demo-decor-store-contact.html" class="widget fs-13 text-dark-gray fw-600 me-25px md-me-15px text-dark-gray"><i class="feather icon-feather-phone-call"></i>Customer service</a>
<a href="demo-decor-store-contact.html" class="widget fs-13 text-dark-gray alt-font me-25px fw-600 d-none d-lg-inline-block"><i class="feather icon-feather-map-pin"></i>Find our store</a>
<div class="header-language-icon widget fs-13 alt-font fw-600">
<div class="header-language dropdown">
<a href="javascript:void(0);" class="text-dark-gray"><i class="feather icon-feather-globe"></i>English</a>
<ul class="language-dropdown alt-font">
<li><a href="javascript:void(0);" title="English"><span class="icon-country"><img src="images/country-flag-16X16/usa.png" alt data-no-retina></span>English</a></li>
<li><a href="javascript:void(0);" title="France"><span class="icon-country"><img src="images/country-flag-16X16/france.png" alt data-no-retina></span>France</a></li>
<li><a href="javascript:void(0);" title="Russian"><span class="icon-country"><img src="images/country-flag-16X16/russian.png" alt data-no-retina></span>Russian</a></li>
<li><a href="javascript:void(0);" title="Spain"><span class="icon-country"><img src="images/country-flag-16X16/spain.png" alt data-no-retina></span>Spain</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-light bg-transparent disable-fixed" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto">
<a class="navbar-brand" href="demo-decor-store.html">
<img src="images/demo-decor-store-logo-black.png" data-at2x="images/demo-decor-store-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-decor-store-logo-black.png" data-at2x="images/demo-decor-store-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-decor-store-logo-black.png" data-at2x="images/demo-decor-store-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order position-static xs-ps-0">
<button class="navbar-toggler float-start" 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-center" id="navbarNav">
<ul class="navbar-nav alt-font">
<li class="nav-item"><a href="demo-decor-store.html" class="nav-link">Home</a></li>
<li class="nav-item dropdown submenu">
<a href="demo-decor-store-shop.html" class="nav-link">Shop<span class="label bg-base-color text-white text-uppercase border-radius-26px">Hot</span></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 mb-60px md-mb-30px sm-mb-20px">
<div class="col">
<ul>
<li class="sub-title">Furniture</li>
<li><a href="demo-decor-store-about.html#">Modern chair</a></li>
<li><a href="demo-decor-store-about.html#">Luxurious sofa</a></li>
<li><a href="demo-decor-store-about.html#">Sitting tables</a></li>
<li><a href="demo-decor-store-about.html#">Century cabinet</a></li>
<li><a href="demo-decor-store-about.html#">Wooden stool</a></li>
<li><a href="demo-decor-store-about.html#">Dining tabl</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Lighting</li>
<li><a href="demo-decor-store-about.html#">Table lamps</a></li>
<li><a href="demo-decor-store-about.html#">Wall lights</a></li>
<li><a href="demo-decor-store-about.html#">Ceiling lights</a></li>
<li><a href="demo-decor-store-about.html#">Chandeliers</a></li>
<li><a href="demo-decor-store-about.html#">Smart lights</a></li>
<li><a href="demo-decor-store-about.html#">Outdoor lights</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Decor</li>
<li><a href="demo-decor-store-about.html#">Home decor</a></li>
<li><a href="demo-decor-store-about.html#">Kitchen decor</a></li>
<li><a href="demo-decor-store-about.html#">Office decor</a></li>
<li><a href="demo-decor-store-about.html#">Wooden mirrors</a></li>
<li><a href="demo-decor-store-about.html#">Designer clocks</a></li>
<li><a href="demo-decor-store-about.html#">Spiritual</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Cabinetry</li>
<li><a href="demo-decor-store-about.html#">Wardrobes</a></li>
<li><a href="demo-decor-store-about.html#">Shoe racks</a></li>
<li><a href="demo-decor-store-about.html#">Movable</a></li>
<li><a href="demo-decor-store-about.html#">Folding storage</a></li>
<li><a href="demo-decor-store-about.html#">Wooden units</a></li>
<li><a href="demo-decor-store-about.html#">Kids storage</a></li>
</ul>
</div>
<div class="col">
<ul>
<li class="sub-title">Commercial</li>
<li><a href="demo-decor-store-about.html#">Hotel furniture</a></li>
<li><a href="demo-decor-store-about.html#">Bar furniture</a></li>
<li><a href="demo-decor-store-about.html#">School furniture</a></li>
<li><a href="demo-decor-store-about.html#">Public furniture</a></li>
<li><a href="demo-decor-store-about.html#">Office furniture</a></li>
<li><a href="demo-decor-store-about.html#">Lab furniture</a></li>
</ul>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<a href="demo-decor-store-shop.html"><img class="w-100" src="images/demo-decor-store-menu-banner-01.jpg" alt></a>
</div>
<div class="col">
<a href="demo-decor-store-shop.html"><img class="w-100" src="images/demo-decor-store-menu-banner-02.jpg" alt></a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="demo-decor-store-collections.html" class="nav-link">Collections</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-sm-3 md-pt-15px align-items-center justify-content-center mb-60px md-mb-30px sm-mb-0">
<div class="col md-mb-30px">
<a href="demo-decor-store-collections.html" class="text-center">
<img src="images/demo-decor-store-menu-category-01.jpg" alt>
</a>
<a href="demo-decor-store-collections.html" class="btn btn-hover-animation text-uppercase-inherit fw-600 ls-0px justify-content-center">
<span>
<span class="btn-text text-dark-gray fs-16">Designer stool</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right m-0"></i></span>
</span>
</a>
</div>
<div class="col md-mb-30px">
<a href="demo-decor-store-collections.html" class="text-center">
<img src="images/demo-decor-store-menu-category-02.jpg" alt>
</a>
<a href="demo-decor-store-collections.html" class="btn btn-hover-animation text-uppercase-inherit fw-600 ls-0px justify-content-center">
<span>
<span class="btn-text text-dark-gray fs-16">Modern chair</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right m-0"></i></span>
</span>
</a>
</div>
<div class="col md-mb-30px">
<a href="demo-decor-store-collections.html" class="text-center">
<img src="images/demo-decor-store-menu-category-03.jpg" alt>
</a>
<a href="demo-decor-store-collections.html" class="btn btn-hover-animation text-uppercase-inherit fw-600 ls-0px justify-content-center">
<span>
<span class="btn-text text-dark-gray fs-16">Table lamp</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right m-0"></i></span>
</span>
</a>
</div>
<div class="col md-mb-30px">
<a href="demo-decor-store-collections.html" class="text-center">
<img src="images/demo-decor-store-menu-category-04.jpg" alt>
</a>
<a href="demo-decor-store-collections.html" class="btn btn-hover-animation text-uppercase-inherit fw-600 ls-0px justify-content-center">
<span>
<span class="btn-text text-dark-gray fs-16">Home decor</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right m-0"></i></span>
</span>
</a>
</div>
<div class="col md-mb-30px">
<a href="demo-decor-store-collections.html" class="text-center">
<img src="images/demo-decor-store-menu-category-05.jpg" alt>
</a>
<a href="demo-decor-store-collections.html" class="btn btn-hover-animation text-uppercase-inherit fw-600 ls-0px justify-content-center">
<span>
<span class="btn-text text-dark-gray fs-16">Ceramic pots</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right m-0"></i></span>
</span>
</a>
</div>
<div class="col md-mb-30px">
<a href="demo-decor-store-collections.html" class="text-center">
<img src="images/demo-decor-store-menu-category-06.jpg" alt>
</a>
<a href="demo-decor-store-collections.html" class="btn btn-hover-animation text-uppercase-inherit fw-600 ls-0px justify-content-center">
<span>
<span class="btn-text text-dark-gray fs-16">Wooden table</span>
<span class="btn-icon"><i class="fa-solid fa-arrow-right m-0"></i></span>
</span>
</a>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<a href="demo-decor-store-collections.html"><img src="images/demo-decor-store-menu-banner-03.jpg" alt></a>
</div>
<div class="col">
<a href="demo-decor-store-collections.html"><img src="images/demo-decor-store-menu-banner-04.jpg" alt></a>
</div>
</div>
</div>
</div>
</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-decor-store-about.html">About</a></li>
<li><a href="demo-decor-store-faq.html">FAQs</a></li>
<li><a href="demo-decor-store-wishlist.html">Wishlist</a></li>
<li><a href="demo-decor-store-account.html">Account</a></li>
<li><a href="demo-decor-store-cart.html">Cart</a></li>
<li><a href="demo-decor-store-checkout.html">Checkout</a></li>
</ul>
</li>
<li class="nav-item"><a href="demo-decor-store-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-decor-store-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto">
<div class="header-icon">
<div class="header-search-icon icon">
<a href="javascript:void(0)" class="search-form-icon header-search-form"><i class="feather icon-feather-search"></i></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 bg-white" action="search-result.html">
<div class="search-form-box">
<h2 class="text-dark-gray text-center mb-7 alt-font fw-700 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="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">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-decor-store-single-product.html"><img src="images/demo-decor-store-product-01.jpg" class="cart-thumb" alt></a>
</div>
<div class="product-detail alt-font fw-600">
<a href="demo-decor-store-single-product.html">Table clock</a>
<span class="item-ammount fw-500">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-decor-store-single-product.html"><img src="images/demo-decor-store-product-03.jpg" class="cart-thumb" alt></a>
</div>
<div class="product-detail alt-font fw-600">
<a href="demo-decor-store-single-product.html">Ceramic mug</a>
<span class="item-ammount fw-500">2 x $15.00</span>
</div>
</li>
<li class="cart-total">
<div class="alt-font mb-15px"><span class="w-50 fw-500">Subtotal:</span><span class="w-50 text-end fw-700">$199.99</span></div>
<a href="demo-decor-store-cart.html" class="btn btn-large btn-transparent-base-color border-color-extra-medium-gray btn-round-edge">View cart</a>
<a href="demo-decor-store-checkout.html" class="btn btn-large btn-base-color btn-box-shadow btn-round-edge">Checkout</a>
</li>
</ul>
</div>
</div>
<div class="widget-text ms-25px md-ms-20px alt-font">
<a href="demo-decor-store-account.html" class="fs-17 fw-600"><i class="feather icon-feather-user d-inline-block d-xl-none"></i><span class="d-none d-xl-inline-block">My account</span></a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="page-title-center-alignment cover-background top-space-padding" style="background-image: url('images/demo-decor-store-title-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-12 text-center position-relative page-title-extra-large">
<h1 class="alt-font d-inline-block fw-700 ls-minus-05px text-base-color mb-10px mt-3 md-mt-50px">About us</h1>
</div>
<div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
<ul>
<li><a href="demo-decor-store.html">Home</a></li>
<li>About us</li>
</ul>
</div>
</div>
</div>
</section>
<section class="pb-3 position-relative overflow-hidden">
<div class="container">
<div class="row mb-4 align-items-center text-center text-sm-start">
<div class="col-lg-2 col-md-3 col-sm-4 xs-mb-20px" data-anime="{ &quot;translateX&quot;: [0, 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="position-relative d-md-flex flex-column align-items-center justify-content-center w-165px h-165px border-radius-100">
<img src="images/demo-decor-store-about-01.png" class="position-absolute top-50 translate-middle-y" alt>
<img src="images/demo-decor-store-about-02.png" class="animation-rotation" alt>
</div>
</div>
<div class="col-lg-5 col-md-7 col-sm-8" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-uppercase fs-13 ls-2px fw-600 mb-5px d-block">Decor store story</span>
<h3 class="text-dark-gray alt-font fw-700 mb-0">Commitment to quality product.</h3>
</div>
<div class="col-lg-5 md-mt-30px last-paragraph-no-margin" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;:100, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<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 lorem ipsum is simply dummy text of the printing and typesetting.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-3 text-center p-4 md-p-15px" data-bottom-top="transform: translateY(-80px)" data-top-bottom="transform: translateY(80px)">
<img class="w-100" src="images/demo-decor-store-about-img-03.jpg" alt>
</div>
<div class="col-md-6 text-center" data-bottom-top="transform: translateY(80px)" data-top-bottom="transform: translateY(-80px)">
<img class="w-100" src="images/demo-decor-store-about-img-01.jpg" alt>
</div>
<div class="col-md-3 text-center p-4 md-p-15px" data-bottom-top="transform: translateY(-80px)" data-top-bottom="transform: translateY(80px)">
<img class="w-100" src="images/demo-decor-store-about-img-02.jpg" alt>
</div>
</div>
</div>
<div class="marquees-text alt-font fw-700 fs-200 lg-fs-150 md-fs-130 ls-minus-5px text-base-color text-nowrap position-absolute top-50 lg-mt-5 md-mt-15 sm-mt-22 right-100px text-center z-index-minus-1 d-none d-md-inline-block">classic products</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row row-cols-auto row-cols-xl-4 row-cols-sm-2 lg-ps-10 lg-pe-10 md-ps-7 md-pe-7 sm-ps-0 sm-pe-0 position-relative mb-6 md-mb-8 lg-mt-20px" 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 xs-mb-30px">
<div class="feature-box text-start ps-30px pe-30px sm-ps-20px sm-pe-20px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="alt-font fs-90 text-outline text-outline-width-1px text-outline-color-dark-gray fw-800 ls-minus-1px opacity-2 mb-0">01</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-22 xs-pt-40px">
<span class="text-dark-gray fs-18 d-inline-block fw-600 mb-5px">Business founded</span>
<p>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 lg-mt-0">
<div class="feature-box text-start ps-30px pe-30px sm-ps-20px sm-pe-20px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="alt-font fs-90 text-outline text-outline-width-1px text-outline-color-dark-gray fw-800 ls-minus-1px opacity-2 mb-0">02</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-22 xs-pt-40px">
<span class="text-dark-gray fs-18 d-inline-block fw-600 mb-5px">Build new office</span>
<p>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 lg-mt-30px">
<div class="feature-box text-start ps-30px pe-30px sm-ps-20px sm-pe-20px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="alt-font fs-90 text-outline text-outline-width-1px text-outline-color-dark-gray fw-800 ls-minus-1px opacity-2 mb-0">03</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-22 xs-pt-40px">
<span class="text-dark-gray fs-18 d-inline-block fw-600 mb-5px">Relocates headquarter</span>
<p>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 lg-mt-30px">
<div class="feature-box text-start ps-30px pe-30px sm-ps-20px sm-pe-20px">
<div class="feature-box-icon position-absolute left-0px top-0px">
<h1 class="alt-font fs-90 text-outline text-outline-width-1px text-outline-color-dark-gray fw-800 ls-minus-1px opacity-2 mb-0">04</h1>
</div>
<div class="feature-box-content last-paragraph-no-margin pt-30 lg-pt-22 xs-pt-40px">
<span class="text-dark-gray fs-18 d-inline-block fw-600 mb-5px">Revenues of millions</span>
<p>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 class="row justify-content-center xs-mt-12" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&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-xl-9 col-lg-10">
<div class="row align-items-center justify-content-center border border-color-extra-medium-gray border-radius-100px sm-border-radius-6px sm-mx-0">
<div class="col-md-6 p-20px border-end border-color-transparent-dark-very-light text-center ls-minus-05px align-items-center d-flex justify-content-center sm-border-end-0 sm-pb-0 sm-mb-10px">
<i class="bi bi-emoji-smile text-dark-gray icon-extra-medium me-10px"></i>
<span class="text-dark-gray fs-18 text-start fw-500 xs-lh-28">Join the <span class="fw-800">10000+</span> people trusting us.</span>
</div>
<div class="col-md-6 p-20px sm-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-18 text-start fw-500">4.9 out of 5 - <span class="fw-800">8549</span> Total reviews.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-parallax-background-ratio="0.5" style="background-image: url('images/demo-decor-store-about-parallax-img.jpg')">
<div class="opacity-light bg-base-color"></div>
<div class="container">
<div class="row align-items-center justify-content-end" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 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-lg-6 col-md-8">
<div class="bg-white p-70px lg-p-35px position-relative border-radius-6px">
<div class="swiper slider-one-slide text-slider-style-01 magic-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-one-slide-pagination&quot;, &quot;clickable&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;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper mb-10px">
<div class="swiper-slide last-paragraph-no-margin">
<div class="alt-font text-uppercase fs-13 fw-600 mb-5px ls-2px">World class designers</div>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">Exclusive design</h3>
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</p>
</div>
<div class="swiper-slide">
<div class="alt-font text-uppercase fs-13 fw-600 mb-5px ls-2px">100% secure method</div>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">Secure payment</h3>
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</p>
</div>
<div class="swiper-slide">
<div class="alt-font text-uppercase fs-13 fw-600 mb-5px ls-2px">24/7 support center</div>
<h3 class="alt-font text-dark-gray fw-700 ls-minus-1px">Online support</h3>
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim veniam.</p>
</div>
</div>
<div class="d-flex">
<div class="slider-one-slide-prev-1 swiper-button-prev slider-navigation-style-04 border border-1 border-color-extra-medium-gray bg-white"><i class="fa-solid fa-arrow-left icon-small text-dark-gray"></i></div>
<div class="slider-one-slide-next-1 swiper-button-next slider-navigation-style-04 border border-1 border-color-extra-medium-gray bg-white"><i class="fa-solid fa-arrow-right icon-small text-dark-gray"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-40px sm-mb-30px">
<div class="col-lg-5 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-uppercase fs-13 ls-2px fw-600">Core people</span>
<h4 class="alt-font text-dark-gray fw-700 mb-20px">Company leaders</h4>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 mb-8" 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;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col team-style-08 border-radius-6px md-mb-30px">
<figure class="mb-0 position-relative overflow-hidden border-radius-6px">
<img src="images/team-08.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-10 bg-gradient-base-transparent border-radius-6px">
<div class="w-100">
<span class="team-member-name fw-500 text-white d-block">Jeremy dupont</span>
<span class="member-designation fs-15 lh-20 text-white d-block">Director</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.twitter.com/" target="_blank" class="text-dark-gray bg-white"><i class="fa-brands fa-twitter icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 border-radius-6px md-mb-30px">
<figure class="mb-0 position-relative overflow-hidden border-radius-6px">
<img src="images/team-09.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-10 bg-gradient-base-transparent border-radius-6px">
<div class="w-100">
<span class="team-member-name fw-500 text-white d-block">Jessica dover</span>
<span class="member-designation fs-15 lh-20 text-white d-block">Founder</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.linkedin.com/" target="_blank" class="text-dark-gray bg-white"><i class="fa-brands fa-linkedin-in icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 border-radius-6px md-mb-30px">
<figure class="mb-0 position-relative overflow-hidden border-radius-6px">
<img src="images/team-10.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-10 bg-gradient-base-transparent border-radius-6px">
<div class="w-100">
<span class="team-member-name fw-500 text-white d-block">Matthew taylor</span>
<span class="member-designation fs-15 lh-20 text-white d-block">Manager</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.behance.net/" target="_blank" class="text-dark-gray bg-white"><i class="fa-brands fa-behance icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 border-radius-6px md-mb-30px">
<figure class="mb-0 position-relative overflow-hidden border-radius-6px">
<img src="images/team-11.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 lg-p-10 bg-gradient-base-transparent border-radius-6px">
<div class="w-100">
<span class="team-member-name fw-500 text-white d-block">Johncy parker</span>
<span class="member-designation fs-15 lh-20 text-white d-block">Manager</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.facebook.com/" target="_blank" class="text-dark-gray bg-white"><i class="fa-brands fa-facebook-f icon-small"></i></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="row position-relative clients-style-08" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [0, 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 swiper text-center feather-shadow" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 3000, &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;pauseOnMouseEnter&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;576&quot;: { &quot;slidesPerView&quot;: 2 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-01.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-02.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-03.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-04.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-05.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-01.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-02.png" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-decor-store-about.html#"><img src="images/demo-decor-store-client-03.png" alt /></a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-dark bg-dark-gray pb-0 pt-0 cover-background" style="background-image:url('images/demo-decor-store-footer-bg.jpg')">
<div class="container pt-4 pb-4 md-pt-45px md-pb-45px">
<div class="row justify-content-center">
<div class="col-6 col-lg-3 last-paragraph-no-margin order-sm-1 md-mb-50px xs-mb-30px">
<a href="demo-decor-store.html" class="footer-logo mb-15px d-inline-block"><img src="images/demo-decor-store-logo-white.png" data-at2x="images/demo-decor-store-logo-white@2x.png" alt></a>
<p class="w-80 sm-w-100">Lorem ipsum amet adipiscing elit to eiusmod ad tempor.</p>
<div class="elements-social social-icon-style-02 mt-15px">
<ul class="small-icon 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-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fs-16 alt-font fw-500 d-block text-white mb-5px">Categories</span>
<ul>
<li><a href="demo-decor-store-shop.html">Bed room</a></li>
<li><a href="demo-decor-store-shop.html">Living room</a></li>
<li><a href="demo-decor-store-shop.html">Lightning</a></li>
<li><a href="demo-decor-store-shop.html">Fabrics sofa</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="fs-16 alt-font fw-500 d-block text-white mb-5px">Information</span>
<ul>
<li><a href="demo-decor-store-about.html">About us</a></li>
<li><a href="demo-decor-store-contact.html">Contact us</a></li>
<li><a href="demo-decor-store-faq.html">FAQs</a></li>
<li><a href="demo-decor-store-faq.html">Payment</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="fs-16 alt-font fw-500 d-block text-white mb-5px">Account</span>
<ul>
<li><a href="demo-decor-store-account.html">My account</a></li>
<li><a href="demo-decor-store-cart.html">Orders</a></li>
<li><a href="demo-decor-store-checkout.html">Checkout</a></li>
<li><a href="demo-decor-store-about.html#">My wishlists</a></li>
</ul>
</div>
<div class="col-lg-3 col-sm-6 ps-20px sm-ps-15px md-mb-50px xs-mb-0 order-sm-2 order-lg-5">
<span class="fs-16 alt-font fw-500 d-block text-white mb-5px">Newsletter</span>
<div class="mb-20px">Get everything you need succeed!</div>
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-15px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="bg-blue-tangaroa border-color-transparent-white-light 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 feather icon-feather-mail 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-decor-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-decor-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-decor-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-decor-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="border-top border-color-transparent-white-light pt-30px pb-30px">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xl-8 last-paragraph-no-margin text-center text-xl-start lg-mt-20px order-3 order-xl-1">
<p class="fs-14 mb-0 w-90 xl-w-100">This site is protected by reCAPTCHA and the Google <a href="demo-decor-store-about.html#" class="text-white text-decoration-line-bottom">privacy policy</a> and terms of service apply.</p>
<p class="fs-14 w-90 xl-w-100">&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-white text-decoration-line-bottom">ThemeZaa</a></p>
</div>
<div class="col-6 col-xl-2 col-md-3 col-sm-5 text-center text-xl-start order-1 order-xl-2">
<span class="lh-26 alt-font d-block">Need support?</span>
<a href="tel:12345678910" class="fs-16 text-white fw-500">+1 234 567 8910</a>
</div>
<div class="col-6 col-xl-2 col-md-3 col-sm-5 text-center text-xl-start order-2 order-xl-3">
<span class="lh-26 alt-font d-block">Customer care</span>
<a href="cdn-cgi/l/email-protection.html#422b2c242d02262d2f232b2c6c212d2f" class="fs-16 text-white fw-500"><span class="__cf_email__" data-cfemail="83eaede5ecc3e7eceee2eaedade0ecee">[email&#160;protected]</span></a>
</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-decor-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-decor-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-decor-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>