initial commit
This commit is contained in:
JSriwongsa
parent
aa75caf8b2
commit
fc4808bc14
3 changed files with 1562 additions and 0 deletions
769
ecommerce/fashion_website/index.html
Normal file
769
ecommerce/fashion_website/index.html
Normal file
|
|
@ -0,0 +1,769 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fashion Reflects Who You Are</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="shortcut icon" href="images/icon.png">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site" id="page">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="socials">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-cog' ></i><span>Services</span></a></li>
|
||||
<li><a href="#"><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="langs">
|
||||
<ul>
|
||||
<li><a href=""><span class="flag us"></span><span>English</span><i class='bx bx-chevron-down' ></i></a>
|
||||
<ul>
|
||||
<li><a href="#"><span class="flag sp"></span><span>Español</span></a></li>
|
||||
<li><a href="#"><span class="flag kr"></span><span>한국어</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="currency">
|
||||
<ul>
|
||||
<li><a href=""><span>USD</span><i class='bx bx-chevron-down' ></i></a>
|
||||
<ul>
|
||||
<li><a href="#"><span>ESP</span></a></li>
|
||||
<li><a href="#"><span>KRW</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-main">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<nav>
|
||||
<a href="#" class="menu-toggle" data-open-btn><i class='bx bx-menu'></i></a>
|
||||
<ul>
|
||||
<li><a href="#"><span>Home</span></a></li>
|
||||
<li><a href="#"><span>Products</span><i class='bx bx-chevron-down'></i></a>
|
||||
<div class="megamenu">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="menus">
|
||||
<div class="links">
|
||||
<h3>Clothing</h3>
|
||||
<ul>
|
||||
<li><a href="#">Tops</a></li>
|
||||
<li><a href="#">Buttoms</a></li>
|
||||
<li><a href="#">Dresses</a></li>
|
||||
<li><a href="#">Beachwear</a></li>
|
||||
<li><a href="#">Sportswear</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="links">
|
||||
<h3>Shoes</h3>
|
||||
<ul>
|
||||
<li><a href="#">Boots</a></li>
|
||||
<li><a href="#">Flats</a></li>
|
||||
<li><a href="#">High Heels</a></li>
|
||||
<li><a href="#">Flip Flops</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="links">
|
||||
<h3>Accessories</h3>
|
||||
<ul>
|
||||
<li><a href="#">Bags</a></li>
|
||||
<li><a href="#">Belts</a></li>
|
||||
<li><a href="#">Sunglasses</a></li>
|
||||
<li><a href="#">Jewelries</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="featured">
|
||||
<h3>Best Offers</h3>
|
||||
<div class="product object-cover">
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">20% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/top1.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/top1-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2><a href="#">Castleton Green Halterneck Top</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="current">$223.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">25% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/top3.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/top3-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2><a href="#">Scoop-neck T-shirt</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$99.00</span>
|
||||
<span class="current">$74.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">25% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/top2-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h2><a href="#">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="#"><span>Shop</span></a></li>
|
||||
<li><a href="#"><span>Blog</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="submenu">
|
||||
<li><a href="#">Latest</a></li>
|
||||
<li><a href="#">Jumper</a></li>
|
||||
<li><a href="#">A Must Read</a></li>
|
||||
<li><a href="#">Go Viral</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="logo"><a href="#">A.Z Shop</a></div>
|
||||
<div class="icons">
|
||||
<ul>
|
||||
<li><a href="#" data-open-btn><i class='bx bx-search'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-user'></i></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-heart'></i><span class="qty">4</span></a></li>
|
||||
<li><a href="#"><i class='bx bx-shopping-bag'></i><span class="qty">6</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<div class="hero">
|
||||
<div class="container">
|
||||
<div class="wrap object-cover">
|
||||
<div class="list large">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/main-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="btn-signUp">Shop Now</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/main-5.jpg" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="btn-signUp">Sweater</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/main-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="btn-signUp">Beachwear</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/main-4.jpg" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="btn-signUp">Accessories</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="list">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/main-3.jpg" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="btn-signUp">Shoes</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabbed">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<nav class="tabs">
|
||||
<ul class="swiper-wrapper">
|
||||
<li class="swiper-slide active"><a href="#0" >New Arrivals</a></li>
|
||||
<li class="swiper-slide"><a href="#0">On Sale</a></li>
|
||||
<li class="swiper-slide"><a href="#0">Best Seller</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="tabs-box swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="product object-cover">
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/new1.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/new1-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-1 active"></a>
|
||||
</div>
|
||||
<h2><a href="#">Onyx Dress with Embroidery</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$129.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/new2.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/new2-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-4 active"></a>
|
||||
<a href="#" class="color-5"></a>
|
||||
</div>
|
||||
<h2><a href="#">Bodycon Dress</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$149.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/new3.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/new3-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-9 active"></a>
|
||||
</div>
|
||||
<h2><a href="#">Bone White Dress</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$175.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/new4.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/new4-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-3 active"></a>
|
||||
<a href="#" class="color-1"></a>
|
||||
</div>
|
||||
<h2><a href="#">Sequin-fringe Skirt</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$109.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/new5.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/new5-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-3 active"></a>
|
||||
<a href="#" class="color-9"></a>
|
||||
<a href="#" class="color-7"></a>
|
||||
<a href="#" class="color-1"></a>
|
||||
</div>
|
||||
<h2><a href="#">Villie Wide-leg Shorts</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$115.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/new6.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/new6-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-1 active"></a>
|
||||
<a href="#" class="color-10"></a>
|
||||
<a href="#" class="color-5"></a>
|
||||
</div>
|
||||
<h2><a href="#">Villie Wide-leg Shorts</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$75.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="#" class="btn-login">Load More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="product object-cover">
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">30% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/on1.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/on1-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-3 active"></a>
|
||||
<a href="#" class="color-11"></a>
|
||||
<a href="#" class="color-12"></a>
|
||||
</div>
|
||||
<h2><a href="#">Onyx Dress with Embroidery</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$599.00</span>
|
||||
<span class="current">$419.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">10% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/on2.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/on2-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-13 active"></a>
|
||||
<a href="#" class="color-1"></a>
|
||||
</div>
|
||||
<h2><a href="#">Sequin-fringe Skirt</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$109.00</span>
|
||||
<span class="current">$98.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">10% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/on3.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/on3-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-7 active"></a>
|
||||
<a href="#" class="color-3"></a>
|
||||
<a href="#" class="color-1"></a>
|
||||
</div>
|
||||
<h2><a href="#">Knit Lavender Dress</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$109.00</span>
|
||||
<span class="current">$98.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<span class="label">10% OFF</span>
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/on4.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/on4-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-8 active"></a>
|
||||
<a href="#" class="color-2"></a>
|
||||
</div>
|
||||
<h2><a href="#">Canary Dress</a></h2>
|
||||
<div class="price">
|
||||
<span class="before">$115.00</span>
|
||||
<span class="current">$103.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="product object-cover">
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/best1.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/best1-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-14 active"></a>
|
||||
<a href="#" class="color-13"></a>
|
||||
</div>
|
||||
<h2><a href="#">Broncos Navy with Gold Button Shorts</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$135.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="product-thumb">
|
||||
<div class="thumbnail">
|
||||
<a href="#">
|
||||
<div class="image">
|
||||
<img src="images/top/best2.jpg" alt="">
|
||||
</div>
|
||||
<div class="image hover-image">
|
||||
<img src="images/top/best2-1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons-act">
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-share-alt'></i></a></li>
|
||||
<li><a href="#"><i class='bx bx-store'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="colors">
|
||||
<a href="#" class="color-13 active"></a>
|
||||
</div>
|
||||
<h2><a href="#">White Snow Open Back Halter Top</a></h2>
|
||||
<div class="price">
|
||||
<span class="current">$89.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<nav class="mobile" data-show>
|
||||
<a href="#" class="close-toggle" data-close-btn><i class='bx bx-x-circle' ></i></a>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Clothing</a>
|
||||
<span class="sub-toggle"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="#">Tops</a></li>
|
||||
<li><a href="#">Buttoms</a></li>
|
||||
<li><a href="#">Dresses</a></li>
|
||||
<li><a href="#">Beachwear</a></li>
|
||||
<li><a href="#">Sportwear</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="">Shoes</a>
|
||||
<span class="sub-toggle"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="#">Boots</a></li>
|
||||
<li><a href="#">Flats</a></li>
|
||||
<li><a href="#">High Heels</a></li>
|
||||
<li><a href="#">Flip Flops</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="">Accessories</a>
|
||||
<span class="sub-toggle"><i class='bx bx-chevron-down' ></i></span>
|
||||
<ul class="submenu">
|
||||
<li><a href="#">Bags</a></li>
|
||||
<li><a href="#">Sunglasses</a></li>
|
||||
<li><a href="#">Jewelries</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Offers</a></li>
|
||||
</ul>
|
||||
<div class="enter">
|
||||
<div><span>Enter</span></div>
|
||||
<a href="#" class="btn-login">Login</a>
|
||||
<a href="#" class="btn-signUp">Sign Up</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="search-container" data-show="">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="search-head">
|
||||
<strong>Search Everything</strong>
|
||||
<a href="#" class="close-toggle" data-close-btn=""><i class='bx bx-x'></i></a>
|
||||
</div>
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-search' ></i>
|
||||
<input type="search" placeholder="Search products">
|
||||
<input type="submit" value="Submit" />
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</form>
|
||||
<div class="search-footer">
|
||||
<p>
|
||||
<span>Popular Search:</span>
|
||||
<a href="#">Shorts</a>
|
||||
<a href="#">Swimsuit</a>
|
||||
<a href="#">Tank Tops</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
ecommerce/fashion_website/main.js
Normal file
43
ecommerce/fashion_website/main.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
const menuToggle = document.querySelectorAll('[data-open-btn]');
|
||||
const mobileMenu = document.querySelectorAll('[data-show]');
|
||||
const closeToggle = document.querySelectorAll('[data-close-btn]');
|
||||
const overlay = document.querySelector('[data-overlay]');
|
||||
|
||||
for (let x = 0; x < menuToggle.length; x++){
|
||||
const closeMenu = function(){
|
||||
mobileMenu[x].classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
menuToggle[x].addEventListener('click', function(){
|
||||
mobileMenu[x].classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
})
|
||||
closeToggle[x].addEventListener('click', closeMenu);
|
||||
overlay.addEventListener('click', closeMenu)
|
||||
}
|
||||
|
||||
const subMenu = document.querySelectorAll('.sub-toggle');
|
||||
subMenu.forEach((menu) => menu.addEventListener('click', toggle));
|
||||
function toggle(){
|
||||
subMenu.forEach((item) => item != this? item.classList.remove('expand'): null);
|
||||
|
||||
if(this.classList != 'expand'){
|
||||
this.classList.toggle('expand')
|
||||
}
|
||||
}
|
||||
|
||||
//---------- Swiper ----------
|
||||
var tabbedNav = new Swiper('.tabs',{
|
||||
slidePerView: 1,
|
||||
centeredSlides: true,
|
||||
slidesPerGroup: false,
|
||||
spaceBetween: 20,
|
||||
});
|
||||
var theTab = new Swiper('.tabs-box',{
|
||||
slidePerView: 1,
|
||||
autoHeight: true,
|
||||
thumbs: {
|
||||
swiper: tabbedNav
|
||||
},
|
||||
|
||||
})
|
||||
750
ecommerce/fashion_website/style.css
Normal file
750
ecommerce/fashion_website/style.css
Normal file
|
|
@ -0,0 +1,750 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600&family=Nunito:wght@200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
:root{
|
||||
--main-color:#b9936c;
|
||||
--based-color:#c4b7a6;
|
||||
--light-color:#bab7ac;
|
||||
--white-color:white;
|
||||
--dark-color:black;
|
||||
}
|
||||
*,::before,::after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: var(--dark-color);
|
||||
background-color: var(--white-color);
|
||||
font-family: 'Nunito', sans-serif;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h1,h2,h3,h4{
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
h1{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.container{
|
||||
max-width: 1280px;
|
||||
padding: 0 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header-top, .header-main nav > ul{
|
||||
display: none;
|
||||
}
|
||||
.header-top{
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid var(--light-color);
|
||||
}
|
||||
header :where(.wrap, .socials ul, .options, li a){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.header-top .wrap{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-top ul li span{
|
||||
font-size: 14px;
|
||||
}
|
||||
.header-top ul li i{
|
||||
font-size: 20px;
|
||||
}
|
||||
.header-top .options li{
|
||||
position: relative;
|
||||
}
|
||||
.header-top .options ul ul{
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 68px;
|
||||
padding: 15px 20px;
|
||||
background-color: var(--white-color);
|
||||
box-shadow: 0 20px 30px rgb(0 0 0/13%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.header-top li:hover ul{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
z-index: 100;
|
||||
}
|
||||
.header-top .flag{
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.header-top .flag.us{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEoklEQVRoQ+2Z/WtbVRjHn5u35WVNGoOtS5dtTbt17Za6MWZlY9kGysbY/AdWhyCyos6XVquITKcy7aQyJupARNjGYCAyVnTDn1xhv1jBmdJ5QmulTIVZ6/LSJmmS5vqce25ub2NWf8iT6oUeuOQ+557zfZ7Pec7NOSeRwOBFMnj8sAzwX2dwOQP/hwyYMYgVePFPI5U5DHaWTyHvwYPv/VXtyD+TRshd1A+cv48DrDtw4N1fdu9ug97ex+DUqSuaI0r7KIyTAqSv34BVX3/RyAFa9u8/ycLhVojFZhQnsjzvS+It+IV1vN6E97rHZYPi7ZR+auH28TbLvwOUdizXA9tILifkb0Wh9kTvRgVg37532M6d8wD9/Y9Dd/c5NQgJuN3Tc74YDtpHoAefK7Co8AG3leeyAle0hSUKr6MukiQJgEcfeZt1PLwe4vG0GOoFRR1+pU5/r7dL6/UCIhVnzjxBHT8OsAqwd+9bbPv2IPT1HYaurk81R2fPPkVm94d9ZACSww75idvgebFLZGDPnjfZli3rMAMpMielQn1wk0zb5HFD9mYE/N9+IwB27TrONm8OQCLBpxDAhQvHoLPzQ82hYh9GW30xted8tmFd2fa6/lzotMToANw1kB2JwqrrlwXAjh2vsw0b/JBMCoBqlEsfE77EJhNANgeWhgcEQEfHaywYrIOLF5+HQ4f6tPgHBl4hs7kWddFe4m3bXmWBgA+mpzPUPjS9q5900mnzDORyYN3YLDKwdWsvq6vzQCo1qzgZHDwB4fAbmsNKbS50CYbIACSnAwp//AkNPwwKgFDoJVZb64J0OkvmpFToMgySafOvUTmegNWRIQHQ2trNXM4VMPT9SQi1vywc4TfM8PD70B5CW12nImjz58Vlazii2uq3UYTb2F7ZRmCd1h7vbxxtIwMAC26cc3lwP/ekAGhpeYHJ+g0QnStNKRo9Ta6qvcRNTcdYLse316JMTHwEa9c+Q2YXNakJNIDGxmfZ5GSCWn+B3thDYqdLVUy1bqj78nMxhQKBp9nUVBJmZs6ByzW/4FDaI/AVVeyKjtnngzW3RwWA39/F7t6dJnVQKja6hvZAI+F+qOG7awJgbm6OmfjiYKBSKBTAbDYLgHw+z9AwUPgACwDGfS3MgpsjGS8jFMlmhTxewamoyMDPnmZmwZTIGVyJi2dZ/cGsuHLpzrn/AC1tX9pAXeyUav19sV2xrqhT7vCn9lUArGZoio0JgLGaILPiQibPIkC5E+W9nCyWrnudMvWDUQql11vkJCvZbZDD5b45OS4A0uk0s9vtRpg9WoyZTAYcDocASKVSDA1DAeCgg9PpFAA/2VYzp80Gcqp6JzLK0eHb6VQ2C63ZXwXAiLWBrcQpJM9U71BPCoA/bE3jFNqU+00FsPjZSpxChgLAKbQp/7sAiMfjzO12Uw5S1bUSiQR4PB4BEIvFGBpVd0rpAGMGr9crAH401TNvjbEyEEsmoL1wRwFoRoBRytFZKq0HC3fWc4B6vEJ43b9Ujon8TKLOMAfgfy/VqJ9E2ksiw38DSi62PVuSKCp1sgxQ6QhW2n85A5WOYKX9DZ+BvwGx0t5IqAHCtwAAAABJRU5ErkJggg==');
|
||||
}
|
||||
.header-top .flag.sp{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADQ0lEQVRoQ+2Zy08TURSHv5nptKWUR0EBleCroJL4QJCKD9SFC12iceHGxJ0LXRtj4l/gIzEx/gdufCUkGk2UmCAkWkEjPmnKwyhFBKzlMZbOjLeasHBTZOoUyNxt59x7fr/v3HM6rcQiX9Iizx9HQK4JOgQcAhYdWBol1JFfZVo0IifhuyYHpd8EHAE58R8cAjkyfvZYh4BDwKIDsyVktrMo54C0hz9z4J8E/D27cyj93wSIxE1kZlCIjuajGxLVyydQ0cVLhZH+0PY1dwEyjE96GR71ov2A72OqSFmiNJDEUwTlJRoBv0Zah51rbgIUkZIHon0+nl/xkdRNJI+EmSaimXiEuO2nNaqDk5AUz+r2ScgsQCQ//lVi5JtEsNag+4VKxxu3yNzApWnoskx9UKexGQb7ZIoKTUqWi1qyiURmASp09UC4F441KETu+QhHTYyYn7IjLShrDIKrU6z2PODmvU9sWgtNdYLAjD0UMgsQZfLVrCWSPEBN9Bq3LpQSq4tT019FxdmLyL1xpqtWEKo9S2RiG6VSN+t83QuHgCFK4X3XRobi9RR9vEPnywBd+/3sbEtSdeocBfE8XMFVuGPniI+VUeiPsi30GsWV7s3/n0JGAinRWDoehEgs209F32XCTwsYLC4jIlWiVGzgZHMdatkKAsPnGfrRJC7MKw4cbMddIJK34R5kFJA2set+DcPDm6ndd5vOVh/qZIpWUVI/TZUThWF0l8qmUIzowGHylF52tbxB3O2FQcAQbbHn7V7MLcdZmTjFoxs+FK/olOMmeXHRompcyJ90Gg4lSDRdZbStlcYtD1HyFogAMXTpHa/k3bdqQsVPeHxDZC+nkJRi8ic8KOYYqWmVhqMTvPLvZqV3gK3l/bbNgowlJL45cD18mJ6RdZxpuIsU+8KH/lWMlBzCjLuo/NzGmrUR3NtLuPSshfWBIU7vuJsOs2VlFiDSmJrxkDJc+FQNl0cXM8xLIukXd9SkwD0lOs40uiYzlfSK2jfIF8/ZteYkwK5k5nPOrADnZ5X52JeFGOelPgsmWtrCIWDJviwEOwSyYKKlLWYJWNolx8FL4x+aHJto6XiHgCX7shDsEMiCiZa2WPQEfgE+XF5AfzjtFQAAAABJRU5ErkJggg==');
|
||||
}
|
||||
.header-top .flag.kr{
|
||||
background-image: url('data:image/png;base64,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');
|
||||
}
|
||||
header li a{
|
||||
transition: color 0.3s;
|
||||
}
|
||||
header li a:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.header-top :where(.socials li:last-child, .options > div:last-child){
|
||||
margin-left: 15px;
|
||||
}
|
||||
.header-main :where(nav, .icons){
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.header-main .icons{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.header-main :where(nav, .icons) > ul {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
.header-main :where(.menu-toggle, .icons a){
|
||||
font-size: 20px;
|
||||
}
|
||||
.header-main .menu-toggle{
|
||||
display: block;
|
||||
}
|
||||
.header-main :where(nav > ul > li > a, .logo){
|
||||
line-height: 90px;
|
||||
}
|
||||
.header-main .logo{
|
||||
font-size: 28px;
|
||||
}
|
||||
.header-main :where(nav li >a span, .logo){
|
||||
font-weight: 600;
|
||||
}
|
||||
.header-main .icons li a{
|
||||
position: relative;
|
||||
gap: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.header-main .icons li .qty{
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -8px;
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
font-size: 10px;
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
/*----------nav-products----------*/
|
||||
.product{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
.product .list{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.product-thumb{
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.object-cover img{
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.hover-image{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
.product-thumb:hover .hover-image{
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
|
||||
}
|
||||
.product :where(.label, .icons-act){
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.product .label{
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
padding: 2px 5px;
|
||||
line-height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.product .icons-act{
|
||||
right: 10px;
|
||||
left: auto;
|
||||
transform: translateX(70px);
|
||||
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.product-thumb:hover .icons-act{
|
||||
transform: translateX(0);
|
||||
}
|
||||
.product .icons-act li a{
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: var(--white-color);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 8px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.product .icons-act li a:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
.product-info h2{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.product .price .before{
|
||||
color: var(--light-color);
|
||||
text-decoration: line-through;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/*----- mobile -----*/
|
||||
nav.mobile{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
max-width: calc(100vw - 60px);
|
||||
padding: 30px;
|
||||
background-color: var(--white-color);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: -100%;
|
||||
visibility: hidden;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
nav.mobile.active{
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
nav.mobile > ul > li{
|
||||
position: relative;
|
||||
}
|
||||
nav.mobile > ul > li >a{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 13px 0;
|
||||
}
|
||||
nav.mobile .enter{
|
||||
padding-top: 20px;
|
||||
margin-top: auto;
|
||||
}
|
||||
nav.mobile .enter div{
|
||||
max-width: 170px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
nav.mobile .enter div::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
nav.mobile .enter div span{
|
||||
position: relative;
|
||||
padding: 5px 20px;
|
||||
color: var(--based-color);
|
||||
background-color: var(--white-color);
|
||||
}
|
||||
.btn-login, .btn-signUp{
|
||||
display: inline-flex;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 32px;
|
||||
border-radius: 50px;
|
||||
line-height: 40px;transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.btn-login{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn-login:hover{
|
||||
background: transparent;
|
||||
color: var(--dark-color);
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
.btn-signUp{
|
||||
background-color: white;
|
||||
}
|
||||
.btn-signUp:hover, .hero a:hover .btn-signUp{
|
||||
background-color: var(--main-color);
|
||||
color: var(--white-color);
|
||||
}
|
||||
nav.mobile .enter a{
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
nav.mobile .btn-signUp{
|
||||
border: 1px solid var(--main-color);
|
||||
margin-top: 10px;
|
||||
}
|
||||
.close-toggle{
|
||||
font-size: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.close-toggle:hover{
|
||||
color: var(--main-color);
|
||||
}
|
||||
nav.mobile .close-toggle{
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: 0;
|
||||
}
|
||||
.overlay{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgb(0 0 0 /50%);
|
||||
pointer-events: none;
|
||||
z-index: 15px;
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
.overlay.active{
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
nav.mobile > ul{
|
||||
overflow-y: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
nav.mobile > ul > li >span{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 55px;
|
||||
font-size: 20px;
|
||||
transition: color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
nav.mobile > ul > li >span:hover{
|
||||
color: var(--based-color);
|
||||
}
|
||||
nav.mobile .submenu{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
nav.mobile .submenu a{
|
||||
color: var(--based-color);
|
||||
padding-left: 15px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
nav.mobile .submenu a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
nav.mobile .submenu{
|
||||
transform: translateY(15px);
|
||||
transition: height 0.3s, transform 0.3s;
|
||||
}
|
||||
nav.mobile .expand ~ .submenu{
|
||||
height: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/*----- search -----*/
|
||||
.search-container{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30px 0;
|
||||
background-color: var(--white-color);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.search-container.active{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.search-container .wrap{
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.search-container .shearch-head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
form.search{
|
||||
position: relative;
|
||||
height: 46px;
|
||||
color: var(--dark-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
form.search input{
|
||||
position: absolute;
|
||||
}
|
||||
form.search input[type=search]{
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 10px 15px 10px 40px;
|
||||
border: 1px solid var(--based-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
form.search input[type=submit]{
|
||||
right: 0;
|
||||
top: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
form.search i{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.search-container .search-footer{
|
||||
margin-top: 10px;
|
||||
color: var(--light-color);
|
||||
}
|
||||
.search-container .search-footer a{
|
||||
margin-right: 8px;
|
||||
color: var(--dark-color);
|
||||
text-decoration: underline;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.search-container .search-footer a:hover{
|
||||
color: var(--light-color);
|
||||
}
|
||||
/*----- main-hero -----*/
|
||||
.hero .wrap{
|
||||
display: grid;
|
||||
}
|
||||
.hero .large{
|
||||
height: 335px;
|
||||
}
|
||||
.hero .list:not(.large){
|
||||
height: 230px;
|
||||
}
|
||||
.hero .wrap .list{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero a:hover img{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.hero .info{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 10px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
/*----- main -----*/
|
||||
main > div{
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
/*----- best seller -----*/
|
||||
.tabbed nav{
|
||||
margin: 0 0 50px;
|
||||
}
|
||||
.tabbed nav ul{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 436px;
|
||||
width: auto;
|
||||
padding-bottom: 10px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
scroll-snap-type: inline mandatory;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.tabbed nav ul li a{
|
||||
font-size: clamp(20px, -0.8rem + 8.33vw, 26px);
|
||||
font-weight: 400;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.tabbed nav ul li a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.tabbed nav ul li:not(.swiper-slide-thumb-active) a{
|
||||
color: var(--based-color);
|
||||
}
|
||||
.tabbed nav ul li.swiper-slide-thumb-active a{
|
||||
border-bottom: 2px solid var(--dark-color);
|
||||
}
|
||||
.tabbed .button{
|
||||
text-align: center;
|
||||
margin: 35px 0 0 ;
|
||||
}
|
||||
.tabbed nav li{
|
||||
width: fit-content !important;
|
||||
}
|
||||
.product .colors{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 8px 0 15px;
|
||||
}
|
||||
.product .colors a{
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.product .colors a::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
left: 6px;
|
||||
top: 6px;transition: transform 0.3s;
|
||||
transform: scale(0);
|
||||
}
|
||||
.product .colors a.active::before, .product .colors a:hover::before{
|
||||
background-color: var(--white-color);
|
||||
transform: scale(1);
|
||||
border: 1px solid var(--white-color);
|
||||
}
|
||||
.product .colors .color-1{
|
||||
background-color: black;
|
||||
}
|
||||
.product .colors .color-2{
|
||||
background-color: #034f84;
|
||||
}
|
||||
.product .colors .color-3{
|
||||
background-color: #fefbd8;
|
||||
}
|
||||
.product .colors .color-4{
|
||||
background-color: #d4ac6e;
|
||||
}
|
||||
.product .colors .color-5{
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.product .colors .color-6{
|
||||
background-color: rgb(255, 153, 0);
|
||||
}
|
||||
.product .colors .color-7{
|
||||
background-color: rgb(175, 138, 175);
|
||||
}
|
||||
.product .colors .color-8{
|
||||
background-color: #FFFF99;
|
||||
}
|
||||
.product .colors .color-9{
|
||||
background-color: #F9F6EE;
|
||||
}
|
||||
.product .colors .color-10{
|
||||
background-color: #87bdd8;
|
||||
}
|
||||
.product .colors .color-11{
|
||||
background-color: #eec0c8;
|
||||
}
|
||||
.product .colors .color-12{
|
||||
background-color: #A9BA9D;
|
||||
}
|
||||
.product .colors .color-13{
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.product .colors .color-14{
|
||||
background-color: #13274F;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width:576px){
|
||||
.header-main .icons :where(li:nth-child(2), li:nth-child(3)){
|
||||
display: none;
|
||||
}
|
||||
.hero .wrap{
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width:768px){
|
||||
.hero .wrap{
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
}
|
||||
.hero .large{
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
height: 640px;
|
||||
}
|
||||
.hero .list:not(.large){
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width:576px) and (max-width:767px){
|
||||
.hero .wrap{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.hero .large{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width:992px){
|
||||
.header-main .menu-toggle{
|
||||
display: none;
|
||||
}
|
||||
.header-main nav > ul{
|
||||
display: flex;
|
||||
}
|
||||
.header-top{
|
||||
display: block;
|
||||
}
|
||||
.header-main nav .submenu{
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
padding: 15px 20px;
|
||||
margin-left: -20px;
|
||||
line-height: 40px;
|
||||
min-width: 150px;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-main nav :where(.submenu, .megamenu){
|
||||
background-color: var(--white-color);
|
||||
box-shadow: 0 20px 30px rgb(0 0 0/13%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.header-main nav li:hover :where(.submenu, .megamenu){
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.megamenu{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30px 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.megamenu .wrap{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: flex-start;
|
||||
gap: 60px;
|
||||
}
|
||||
.megamenu .menus{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.megamenu .links h3{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.megamenu .links a{
|
||||
color: var(--main-color);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.megamenu .links a:hover{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.megamenu .featured h3{
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.megamenu .product{
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue