├── .gitattributes ├── assets ├── css │ ├── tailwind.css │ └── custom.css ├── images │ ├── 404.jpg │ ├── banner1.jpg │ ├── cat-image1.jpg │ ├── cat-image4.jpg │ ├── cat-image5.jpg │ ├── products │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ └── 8.jpg │ ├── main-slider │ │ ├── 2.png │ │ ├── 4.jpg │ │ └── 5.jpg │ ├── stylisng-tips.jpg │ ├── template-logo.png │ ├── fashion-trends.jpg │ ├── customer-stories.jpg │ ├── single-product │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ └── 5.jpg │ ├── template-white-logo.png │ ├── filter-down-arrow.svg │ ├── filter-up-arrow.svg │ ├── brands │ │ ├── html.svg │ │ ├── tailwind.svg │ │ ├── typescript.svg │ │ ├── js.svg │ │ ├── laravel.svg │ │ ├── react.svg │ │ └── php.svg │ ├── search-icon.svg │ ├── cart-shopping.svg │ └── social_icons │ │ ├── pinterest.svg │ │ ├── facebook.svg │ │ ├── twitter.svg │ │ ├── youtube.svg │ │ ├── visa.svg │ │ ├── stripe.svg │ │ ├── viber.svg │ │ ├── instagram.svg │ │ └── paypal.svg └── js │ └── script.js ├── package.json ├── tailwind.config.js ├── README.md ├── 404.html ├── register.html ├── checkout.html ├── cart.html └── shop.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /assets/images/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/404.jpg -------------------------------------------------------------------------------- /assets/images/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/banner1.jpg -------------------------------------------------------------------------------- /assets/images/cat-image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/cat-image1.jpg -------------------------------------------------------------------------------- /assets/images/cat-image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/cat-image4.jpg -------------------------------------------------------------------------------- /assets/images/cat-image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/cat-image5.jpg -------------------------------------------------------------------------------- /assets/images/products/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/1.jpg -------------------------------------------------------------------------------- /assets/images/products/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/2.jpg -------------------------------------------------------------------------------- /assets/images/products/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/3.jpg -------------------------------------------------------------------------------- /assets/images/products/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/4.jpg -------------------------------------------------------------------------------- /assets/images/products/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/5.jpg -------------------------------------------------------------------------------- /assets/images/products/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/6.jpg -------------------------------------------------------------------------------- /assets/images/products/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/7.jpg -------------------------------------------------------------------------------- /assets/images/products/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/products/8.jpg -------------------------------------------------------------------------------- /assets/images/main-slider/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/main-slider/2.png -------------------------------------------------------------------------------- /assets/images/main-slider/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/main-slider/4.jpg -------------------------------------------------------------------------------- /assets/images/main-slider/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/main-slider/5.jpg -------------------------------------------------------------------------------- /assets/images/stylisng-tips.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/stylisng-tips.jpg -------------------------------------------------------------------------------- /assets/images/template-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/template-logo.png -------------------------------------------------------------------------------- /assets/images/fashion-trends.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/fashion-trends.jpg -------------------------------------------------------------------------------- /assets/images/customer-stories.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/customer-stories.jpg -------------------------------------------------------------------------------- /assets/images/single-product/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/single-product/1.jpg -------------------------------------------------------------------------------- /assets/images/single-product/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/single-product/2.jpg -------------------------------------------------------------------------------- /assets/images/single-product/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/single-product/3.jpg -------------------------------------------------------------------------------- /assets/images/single-product/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/single-product/4.jpg -------------------------------------------------------------------------------- /assets/images/single-product/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/single-product/5.jpg -------------------------------------------------------------------------------- /assets/images/template-white-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spacemadev/Tailstore/HEAD/assets/images/template-white-logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "npx tailwindcss -i assets/css/tailwind.css -o assets/css/styles.css --watch", 4 | "build": "npx tailwindcss -i assets/css/tailwind.css -o assets/css/styles.css --minify" 5 | }, 6 | "devDependencies": { 7 | "tailwindcss": "^3.4.1" 8 | }, 9 | "dependencies": { 10 | "swiper": "^11.0.7" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /assets/images/filter-down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/images/filter-up-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/images/brands/html.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/images/search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/images/brands/tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/images/cart-shopping.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./**/*.{html,js}"], 4 | theme: { 5 | container: { 6 | center: true, 7 | padding: '1rem', 8 | }, 9 | screens: { 10 | sm: '640px', 11 | md: '768px', 12 | lg: '1024px', 13 | xl: '1280px', 14 | }, 15 | fontFamily: { 16 | manrope: ['Manrope', 'sans-serif'], 17 | }, 18 | colors: { 19 | transparent: 'transparent', 20 | current: 'currentColor', 21 | white: '#ffffff', 22 | black: '#010717', 23 | primary: '#ff0042', 24 | gray: { 25 | lighter: '#FAF7F3', 26 | light: '#323232', 27 | dark: '#010717', 28 | txt: '#4c4d56', 29 | line: '#E5E5E5', 30 | }, 31 | }, 32 | extend: {}, 33 | }, 34 | plugins: [], 35 | } 36 | 37 | -------------------------------------------------------------------------------- /assets/images/brands/typescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/images/social_icons/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /assets/images/social_icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | facebook [#176] 6 | Created with Sketch. 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/images/brands/js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/images/social_icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/images/brands/laravel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/images/social_icons/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | youtube [#168] 6 | Created with Sketch. 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/images/brands/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | react 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/images/social_icons/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/images/brands/php.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /assets/images/social_icons/stripe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 28 | -------------------------------------------------------------------------------- /assets/images/social_icons/viber.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/images/social_icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | instagram [#167] 6 | Created with Sketch. 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Tailstore Template](https://spacema-dev.com/tailstore/fullimage.png) 2 | 3 | # Tailstore - Free Tailwind CSS eCommerce Template 4 | 5 | Tailstore is a beautifully designed, fully responsive eCommerce template built with Tailwind CSS, crafted to help you create elegant online stores effortlessly. With a focus on user experience and modern design principles, Tailstore offers all the necessary components to launch a professional and visually appealing online shop. 6 | 7 | ### Demo: 8 | 9 | Check out the demo of Tailstore Tailwind template [here](https://spacema-dev.com/tailstore/). 10 | 11 | ### Template Page: 12 | 13 | Visit the Elevate Tailwind template page [here](https://spacema-dev.com/tailstore-free-tailwind-css-ecommerce-template-for-online-store/). 14 | 15 | ### More free tailwind templates [Free Tailwind Css Templates](https://spacema-dev.com/free-tailwind-css-templates/) 16 | 17 | ### If you like this template, please give a ⭐ to this repository! 18 | 19 | ## Features Overview: 20 | ### Main Page: 21 | - Swiper Slider: Engage your visitors with an eye-catching Swiper slider, ideal for featuring top products, promotions, or announcements. 22 | - Brand Carousel: Showcase trusted brands with a smooth carousel, enhancing credibility and user confidence. 23 | - Latest/Popular Products: Keep customers informed and engaged with sections dedicated to the newest and most popular products. 24 | - Blog Section: Integrate a blog to share news, updates, and articles, boosting your content marketing strategy. 25 | - Subscription Form: Build your email list effortlessly with an attractive and easy-to-use subscription form. 26 | 27 | ### Shop Page: 28 | - Product Filters: Enhance the shopping experience with advanced filters, allowing users to sort products by categories, prices, and other criteria. 29 | - Product Listings: Present your products in a clean and organized manner, highlighting key details and high-quality images. 30 | - Product Detail Page: 31 | - Comprehensive Descriptions: Provide detailed information about each product, helping customers make informed purchasing decisions. 32 | - Product Images: Offer multiple high-resolution images to give customers a thorough view of each product. 33 | - Customer Reviews: Build trust with an integrated review section where customers can share their experiences. 34 | - Information Tabs: Organize product details into tabs for easy navigation and readability. 35 | - Social Sharing: Increase product visibility with social sharing buttons, encouraging customers to share on their favorite platforms. 36 | 37 | ### Additional Features: 38 | - User Authentication: User-friendly registration and login pages to facilitate a smooth user experience. 39 | - 404 Error Page: Custom 404 page to guide users back to the main site seamlessly. 40 | - Checkout Process: Simplified checkout page designed to reduce cart abandonment and improve the shopping experience. 41 | - Shopping Cart: A structured cart page featuring a coupon code field for discounts and promotions. 42 | - Header with Cart Module 43 | 44 | Responsive Design: A sticky, responsive header with an integrated cart module, ensuring users can access their cart from any page on the site. 45 | 46 | Tailstore is built with flexibility in mind, allowing easy customization to match your brand's unique style. The clean codebase and comprehensive documentation make it simple to set up and modify, helping you get your online store up and running quickly. 47 | 48 | ### License: 49 | 50 | This template is licensed under the MIT License. 51 | 52 | ### How to Install: 53 | 54 | To use Tailstore free tailwindcss template template, follow these steps: 55 | 56 | 1. Clone this repository to your local machine. 57 | 2. Install the required dependencies using npm: 58 | 59 | ``` 60 | npm install 61 | ``` 62 | 63 | Start the development server to customize the template: 64 | 65 | ``` 66 | npm run dev 67 | ``` 68 | 69 | This will compile Tailwind CSS and watch for changes in your CSS files. 70 | 71 | Once you're done customizing, build the production version: 72 | 73 | ``` 74 | npm run build 75 | ``` 76 | 77 | This will minify the CSS for production use. 78 | 79 | ### Images: 80 | 81 | Some images used in this template are designed by Freepik. You can find more of their work at [Freepik](https://www.freepik.com/). 82 | 83 | -------------------------------------------------------------------------------- /assets/css/custom.css: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3, 4 | h4, 5 | h5, 6 | h6, 7 | p, 8 | a { 9 | font-family: 'Manrope', sans-serif; 10 | } 11 | 12 | .mobile-menu { 13 | padding: 2rem; 14 | } 15 | 16 | .dropdown-enter-active, 17 | .dropdown-leave-active { 18 | transition: opacity 0.1s ease-out, transform 0.1s ease-out; 19 | } 20 | .dropdown-enter-from, 21 | .dropdown-leave-to { 22 | opacity: 0; 23 | transform: scale(0.9); 24 | } 25 | 26 | .mobile-menu ul { 27 | width: 100%; 28 | text-align: center; 29 | } 30 | 31 | .mobile-menu li { 32 | border-bottom: 1px solid #e0e0e0; 33 | padding-bottom: 1rem; 34 | padding-top: 1rem; 35 | } 36 | 37 | .mobile-dropdown-menu li{ 38 | border-bottom: none; 39 | border-top: 1px solid #e0e0e0; 40 | } 41 | 42 | .mobile-dropdown-menu li:last-child { 43 | padding-bottom: 0; 44 | } 45 | 46 | .mobile-dropdown-menu{ 47 | margin-top: 12px; 48 | } 49 | 50 | /* .group:hover h3, 51 | .group:hover p { 52 | color: #ffffff; 53 | } */ 54 | 55 | @keyframes scaleUp { 56 | 0% { 57 | transform: scale(1); 58 | } 59 | 60 | 100% { 61 | transform: scale(1.2); 62 | } 63 | } 64 | 65 | .group-hover\:scale-120:hover { 66 | animation: scaleUp 0.3s forwards; 67 | } 68 | 69 | @keyframes slideDown { 70 | 0% { 71 | transform: translateY(-20px); 72 | opacity: 0; 73 | } 74 | 75 | 100% { 76 | transform: translateY(0); 77 | opacity: 1; 78 | } 79 | } 80 | 81 | .search-slide-down { 82 | animation: slideDown 0.3s forwards; 83 | } 84 | 85 | /* home page */ 86 | .main-slider { 87 | position: relative; 88 | width: 100%; 89 | overflow: hidden; 90 | } 91 | 92 | .main-slider .swiper-slide { 93 | position: relative; 94 | text-align: center; 95 | } 96 | 97 | .main-slider .swiper-slide img { 98 | width: 100%; 99 | height: auto; 100 | max-height: 800px; 101 | object-fit: cover; 102 | } 103 | 104 | @media(min-width:1400px){ 105 | .main-slider .swiper-slide img { 106 | max-height: inherit; 107 | } 108 | } 109 | 110 | .main-slider .swiper-slide-content { 111 | position: absolute; 112 | bottom: 20%; 113 | } 114 | 115 | @media (max-width:640px) { 116 | .main-slider .swiper-slide-content{ 117 | bottom: inherit; 118 | padding: 10px; 119 | } 120 | } 121 | 122 | .main-slider .swiper-slide { 123 | padding: 0; 124 | } 125 | 126 | @media(min-width: 1400px) { 127 | .main-slider .swiper-slide-content { 128 | position: absolute; 129 | bottom: 20%; 130 | left: 10%; 131 | text-align: left; 132 | } 133 | } 134 | 135 | #product-slider .swiper-button-prev, #product-slider .swiper-button-next{ 136 | color: #fff; 137 | } 138 | 139 | .brands-swiper-slider .swiper-button-prev, .brands-swiper-slider .swiper-button-next{ 140 | color: #ff0042; 141 | } 142 | 143 | .brands-swiper-slider .swiper-button-next{ 144 | right: 0; 145 | } 146 | 147 | .brands-swiper-slider .swiper-button-prev{ 148 | left: 0; 149 | } 150 | 151 | .swiper { 152 | width: 100%; 153 | height: 100%; 154 | } 155 | 156 | .swiper-slide { 157 | text-align: center; 158 | font-size: 16px; 159 | background: #fff; 160 | display: flex; 161 | justify-content: center; 162 | align-items: center; 163 | } 164 | 165 | .swiper-slide img { 166 | display: block; 167 | width: 100%; 168 | height: 100%; 169 | object-fit: cover; 170 | } 171 | 172 | @media (min-width: 1024px) { 173 | .swiper-slide { 174 | padding: 25px; 175 | } 176 | } 177 | 178 | @media (max-width: 1023px) { 179 | 180 | .swiper-button-prev, 181 | .swiper-button-next { 182 | display: none; 183 | } 184 | } 185 | 186 | img.cursor-pointer:hover { 187 | opacity: 0.8; 188 | } 189 | 190 | /* single product tabs */ 191 | .tab { 192 | padding: 0.5rem 1rem; 193 | color: #010717; 194 | border-bottom-width: 2px; 195 | border-color: transparent; 196 | font-size: 1rem; 197 | font-weight: 500; 198 | cursor: pointer; 199 | transition: all 0.3s ease; 200 | } 201 | .tab:hover { 202 | color: #323232; 203 | border-color: #ff0042; 204 | } 205 | .tab.active { 206 | color: #ff0042; 207 | border-color: #ff0042; 208 | } 209 | .tab-content { 210 | display: none; 211 | } 212 | .tab-content:not(.hidden) { 213 | display: block; 214 | } 215 | 216 | 217 | .custom-checkbox { 218 | appearance: none; 219 | background-color: #fff; 220 | border: 1px solid #d1d5db; 221 | padding: 0.5rem; 222 | display: inline-block; 223 | position: relative; 224 | cursor: pointer; 225 | outline: none; 226 | width: 1.25rem; 227 | height: 1.25rem; 228 | border-radius: 0.25rem; 229 | } 230 | 231 | .custom-checkbox:checked { 232 | background-color: #ff0042; 233 | border-color: #ff0042; 234 | } 235 | 236 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | /* cart */ 2 | document.addEventListener('DOMContentLoaded', function () { 3 | const cartIcon = document.querySelector('.cart-wrapper'); 4 | const cartDropdown = cartIcon.querySelector('.group-hover\\:block'); 5 | 6 | cartIcon.addEventListener('mouseenter', function () { 7 | clearTimeout(cartIcon.__timer); 8 | cartDropdown.classList.remove('hidden'); 9 | }); 10 | 11 | cartIcon.addEventListener('mouseleave', function () { 12 | cartIcon.__timer = setTimeout(() => { 13 | cartDropdown.classList.add('hidden'); 14 | }, 1300); 15 | }); 16 | 17 | cartDropdown.addEventListener('mouseenter', function () { 18 | clearTimeout(cartIcon.__timer); 19 | }); 20 | 21 | cartDropdown.addEventListener('mouseleave', function () { 22 | cartIcon.__timer = setTimeout(() => { 23 | cartDropdown.classList.add('hidden'); 24 | }, 1300); 25 | }); 26 | }); 27 | 28 | /* mobile menu */ 29 | document.addEventListener("DOMContentLoaded", function () { 30 | const hamburgerBtn = document.getElementById('hamburger'); 31 | const mobileMenu = document.querySelector('.mobile-menu'); 32 | 33 | hamburgerBtn.addEventListener('click', function () { 34 | mobileMenu.classList.toggle('hidden'); 35 | }); 36 | }); 37 | 38 | /* swiper slider */ 39 | if (typeof Swiper !== 'undefined') { 40 | var swiper = new Swiper('.swiper', { 41 | slidesPerView: 2, 42 | loop: true, 43 | autoplay: { 44 | delay: 3000, 45 | }, 46 | navigation: { 47 | nextEl: '.swiper-button-next', 48 | prevEl: '.swiper-button-prev', 49 | }, 50 | breakpoints: { 51 | 1024: { 52 | slidesPerView: 6, 53 | }, 54 | }, 55 | }); 56 | 57 | var swiper = new Swiper('.main-slider', { 58 | slidesPerView: 1, 59 | loop: true, 60 | autoplay: { 61 | delay: 5000, 62 | }, 63 | navigation: { 64 | nextEl: '.swiper-button-next', 65 | prevEl: '.swiper-button-prev', 66 | }, 67 | }); 68 | } 69 | 70 | /* search icon show/hide */ 71 | document.getElementById('search-icon').addEventListener('click', function() { 72 | var searchField = document.getElementById('search-field'); 73 | if (searchField.classList.contains('hidden')) { 74 | searchField.classList.remove('hidden'); 75 | searchField.classList.add('search-slide-down'); 76 | } else { 77 | searchField.classList.add('hidden'); 78 | searchField.classList.remove('search-slide-down'); 79 | } 80 | }); 81 | 82 | function toggleDropdown(id, show) { 83 | const dropdown = document.getElementById(id); 84 | if (show) { 85 | dropdown.classList.remove('hidden'); 86 | } else { 87 | dropdown.classList.add('hidden'); 88 | } 89 | } 90 | 91 | function changeImage(element) { 92 | var mainImage = document.getElementById('main-image'); 93 | mainImage.src = element.getAttribute('data-full'); 94 | } 95 | 96 | /* single page product count */ 97 | document.addEventListener('DOMContentLoaded', function () { 98 | const decreaseButton = document.getElementById('decrease'); 99 | const increaseButton = document.getElementById('increase'); 100 | const quantityInput = document.getElementById('quantity'); 101 | 102 | if (decreaseButton && increaseButton && quantityInput) { 103 | decreaseButton.addEventListener('click', function () { 104 | let quantity = parseInt(quantityInput.value); 105 | if (quantity > 1) { 106 | quantity -= 1; 107 | quantityInput.value = quantity; 108 | } 109 | updateButtons(); 110 | }); 111 | 112 | increaseButton.addEventListener('click', function () { 113 | let quantity = parseInt(quantityInput.value); 114 | quantity += 1; 115 | quantityInput.value = quantity; 116 | updateButtons(); 117 | }); 118 | 119 | function updateButtons() { 120 | if (parseInt(quantityInput.value) === 1) { 121 | decreaseButton.setAttribute('disabled', true); 122 | } else { 123 | decreaseButton.removeAttribute('disabled'); 124 | } 125 | } 126 | } 127 | }); 128 | 129 | /* single product tabs */ 130 | document.addEventListener('DOMContentLoaded', function () { 131 | const tabs = document.querySelectorAll('.tab'); 132 | const contents = document.querySelectorAll('.tab-content'); 133 | 134 | if (tabs.length > 0 && contents.length > 0) { 135 | tabs.forEach(tab => { 136 | tab.addEventListener('click', function () { 137 | tabs.forEach(t => { 138 | t.classList.remove('active'); 139 | t.setAttribute('aria-selected', 'false'); 140 | }); 141 | contents.forEach(c => c.classList.add('hidden')); 142 | 143 | this.classList.add('active'); 144 | this.setAttribute('aria-selected', 'true'); 145 | document.querySelector(`#${this.id.replace('-tab', '-content')}`).classList.remove('hidden'); 146 | }); 147 | }); 148 | 149 | tabs[0].click(); 150 | } 151 | }); 152 | 153 | 154 | /* shop page filter show/hide */ 155 | document.addEventListener('DOMContentLoaded', function() { 156 | const toggleButton = document.getElementById('products-toggle-filters'); 157 | const filters = document.getElementById('filters'); 158 | 159 | if (toggleButton && filters) { 160 | toggleButton.addEventListener('click', function() { 161 | if (filters.classList.contains('hidden')) { 162 | filters.classList.remove('hidden'); 163 | this.textContent = 'Hide Filters'; 164 | } else { 165 | filters.classList.add('hidden'); 166 | this.textContent = 'Show Filters'; 167 | } 168 | }); 169 | } 170 | }); 171 | 172 | /* shop page filter*/ 173 | document.addEventListener('DOMContentLoaded', function () { 174 | const selectElement = document.querySelector('select'); 175 | const arrowDown = document.getElementById('arrow-down'); 176 | const arrowUp = document.getElementById('arrow-up'); 177 | 178 | if (selectElement && arrowDown && arrowUp) { 179 | selectElement.addEventListener('click', function () { 180 | arrowDown.classList.toggle('hidden'); 181 | arrowUp.classList.toggle('hidden'); 182 | }); 183 | } 184 | }); 185 | 186 | /* cart page */ 187 | document.addEventListener('DOMContentLoaded', function () { 188 | document.querySelectorAll('.cart-increment').forEach(button => { 189 | button.addEventListener('click', function () { 190 | let quantityElement = this.previousElementSibling; 191 | let quantity = parseInt(quantityElement.textContent, 10); 192 | quantityElement.textContent = quantity + 1; 193 | }); 194 | }); 195 | 196 | document.querySelectorAll('.cart-decrement').forEach(button => { 197 | button.addEventListener('click', function () { 198 | let quantityElement = this.nextElementSibling; 199 | let quantity = parseInt(quantityElement.textContent, 10); 200 | if (quantity > 1) { 201 | quantityElement.textContent = quantity - 1; 202 | } 203 | }); 204 | }); 205 | }); -------------------------------------------------------------------------------- /assets/images/social_icons/paypal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 404 - Page not found 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 | Logo 29 |
30 | 31 | 32 | 33 |
34 | 40 |
41 | 42 | 43 | 101 | 102 | 103 | 152 |
153 |
154 | 155 | 156 | 212 | 213 | 214 |
215 |
216 |
217 | 218 |
219 |

404 - Page Not Found

220 |

The page you are looking for might have been removed, renamed, or is temporarily unavailable.

221 | Go back 222 |
223 | 224 | 225 |
226 | Image 227 |
228 | 229 |
230 |
231 |
232 | 233 | 234 | 327 | 328 | 329 | 330 | 331 | 332 | -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Cart page 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | Logo 30 |
31 | 32 | 33 | 34 |
35 | 41 |
42 | 43 | 44 | 102 | 103 | 104 | 153 |
154 |
155 | 156 | 157 | 213 | 214 | 215 |
216 |
217 |
218 |
219 |

Login

220 |
221 |
222 | 223 | 224 |
225 |
226 | 227 | 228 |
229 |
230 | 231 | 232 |
233 |
234 | Forgot Password? 235 |
236 | 237 |
238 |
239 |
240 |

Register

241 |
242 |
243 | 244 | 245 |
246 |
247 | 248 | 249 |
250 |
251 | 252 | 253 |
254 | 255 |
256 |
257 |
258 |
259 |
260 | 261 | 262 | 355 | 356 | 357 | 358 | 359 | 360 | -------------------------------------------------------------------------------- /checkout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Checkout page 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 | Logo 29 |
30 | 31 | 32 | 33 |
34 | 40 |
41 | 42 | 43 | 101 | 102 | 103 | 152 |
153 |
154 | 155 | 156 | 212 | 213 | 214 |
215 |
216 |

Checkout

217 |
218 | 219 |
220 |

Billing Details

221 |
222 |
223 | 224 | 225 |
226 |
227 | 228 | 229 |
230 |
231 | 232 | 233 |
234 |
235 | 236 | 237 |
238 |
239 |
240 | 241 | 242 |
243 |
244 | 245 | 246 |
247 |
248 |
249 | 250 | 251 |
252 |
253 | 254 | 255 | 256 |
257 |
258 |
259 | 260 |
261 |

Order Summary

262 |
263 |

Subtotal

264 |

$59.00

265 |
266 |
267 |

Shipping

268 |

$10.00

269 |
270 |
271 |

Total

272 |

$69.00

273 |
274 | 275 |
276 |
277 |
278 |
279 | 280 | 281 | 374 | 375 | 376 | 377 | 378 | 379 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Cart page 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 | Logo 29 |
30 | 31 | 32 | 33 |
34 | 40 |
41 | 42 | 43 | 101 | 102 | 103 | 152 |
153 |
154 | 155 | 156 | 212 | 213 | 214 |
215 |
216 |

Shopping Cart

217 |
218 |
219 |
220 |
221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 238 | 239 | 246 | 247 | 248 | 249 | 255 | 256 | 263 | 264 | 265 | 266 |
ProductPriceQuantityTotal
233 |
234 | Product image 235 |

Summer black dress

236 |
237 | 		$19.99 240 |
241 | 242 |

1

243 | 244 |
245 | 		$19.99
250 |
251 | Product image 252 |

Black suit

253 |
254 | 		$19.99 257 |
258 | 259 |

1

260 | 261 |
262 | 		$19.99
267 |
268 |
269 | 270 | 271 |
272 |
273 | 274 | 275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |

Summary

283 |
284 |

Subtotal

285 |

$19.99

286 |
287 |
288 |

Taxes

289 |

$1.99

290 |
291 |
292 |

Shipping

293 |

$0.00

294 |
295 |
296 |

Total

297 |

$21.98

298 |
299 | Proceed to checkout 300 |
301 |
302 |
303 |
304 |
305 | 306 | 307 | 400 | 401 | 402 | 403 | 404 | 405 | -------------------------------------------------------------------------------- /shop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 404 - Page not found 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | Logo 30 |
31 | 32 | 33 | 34 |
35 | 41 |
42 | 43 | 44 | 102 | 103 | 104 | 153 |
154 |
155 | 156 | 157 | 213 | 214 | 215 |
216 |
217 | 218 |
219 |
220 | 224 | 227 | 230 |
231 |
232 |
233 | 239 |
241 | filter arrow 243 | 245 |
246 |
247 |
248 |
249 | 250 |
251 | 253 |
254 |
255 | 256 | 348 | 349 |
350 | 351 |
352 | 353 |
354 | Product 1 356 | Blue women's suit 357 |

Women

358 |
359 | $19.99 360 | $24.99 361 |
362 | 365 |
366 | 367 |
368 | Product 2 370 | White shirt with long sleeves 371 |

Women

372 |
373 | $29.99 374 |
375 | 378 |
379 | 380 |
381 | Product 3 383 | Yellow men's suit 384 |

Men

385 |
386 | $15.99 387 | $19.99 388 |
389 | 392 |
393 | 394 |
395 | Product 4 397 | Red dress 398 |

Women

399 |
400 | $39.99 401 | $49.99 402 |
403 | 406 |
407 | 408 |
409 | Product 4 411 | Black leather jacket 412 |

Women

413 |
414 | $39.99 415 | $49.99 416 |
417 | 420 |
421 | 422 |
423 | Product 3 425 | Black long dress 426 |

Women, Accessories

427 |
428 | $15.99 429 | $19.99 430 |
431 | 434 |
435 |
436 | 437 |
438 | 457 |
458 |
459 |
460 |
461 |
462 | 463 | 464 |
465 |
466 |
467 |

Shirts Category

468 |

469 | Discover our wide range of shirts, perfect for any occasion. Whether you're looking for something 470 | casual 471 | or formal, we have the perfect shirt for you. Our collection includes a variety of styles, colors, 472 | and 473 | sizes to suit everyone's taste. 474 |

475 |

476 | Browse through our selection and find your new favorite shirt today. All our shirts are made from 477 | high-quality materials and are designed to provide both comfort and style. Shop now and elevate your 478 | wardrobe with our premium shirts. 479 |

480 |
481 |
482 |
483 | 484 | 485 | 584 | 585 | 586 | 587 | 588 | --------------------------------------------------------------------------------