added cetegory page
This commit is contained in:
JSriwongsa
parent
4dd5e9db1c
commit
dd2c1f40e6
1 changed files with 724 additions and 0 deletions
724
ecommerce/fashion_website/pages/page-category.html
Normal file
724
ecommerce/fashion_website/pages/page-category.html
Normal file
|
|
@ -0,0 +1,724 @@
|
|||
<!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>A.Z Shop Category</title>
|
||||
<link rel="stylesheet" href="page.css">
|
||||
<link rel="shortcut icon" href="images/icon.png">
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-tops" class="page-category">
|
||||
<header>
|
||||
<div class="inner-header">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="header-left">
|
||||
<div class="menu-bar">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||
<li><a href=""><span class="item-floating">4</span><i class='bx bx-heart'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<nav class="menu">
|
||||
<ul>
|
||||
<li><a href=""><span>Home</span></a></li>
|
||||
<li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-mega">
|
||||
<li>
|
||||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="mega-content">
|
||||
<div class="dotgrid">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>20% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Castleton Green Halterneck Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$279.00</span>
|
||||
<span class="current">$223.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Scoop-neck T-shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$99.00</span>
|
||||
<span class="current">$74.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">CLOTHING</h3>
|
||||
<ul>
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><a href="">Bottoms</a></li>
|
||||
<li><a href="">Dresses</a></li>
|
||||
<li><a href="">Beachwear</a></li>
|
||||
<li><a href="">Sportswear</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">SHOES</h3>
|
||||
<ul>
|
||||
<li><a href="">Boots</a></li>
|
||||
<li><a href="">Flats</a></li>
|
||||
<li><a href="">Heigh Heels</a></li>
|
||||
<li><a href="">Flip Flops</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">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>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href=""><span>Shop</span></a></li>
|
||||
<li><a href=""><span>Blog</span><i class='bx bx-chevron-down'></i></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<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="branding"><a href="">A.Z Shop</a></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href="#0" trigger-button data-target="search-float"><i class='bx bx-search' ></i></a></li>
|
||||
<li><a href="#0" trigger-button data-target="data-cart"><span class="item-floating">2</span><i class='bx bx-shopping-bag' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-float" class="search-float">
|
||||
<div class="container wide">
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-search'></i>
|
||||
<input type="search" class="input" placeholder="Search products">
|
||||
<i class='bx bx-x' close-button></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="breadcrumb list-inline">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Products</a></li>
|
||||
<li><span>Tops</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="section">
|
||||
<div class="container wide">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<h1 class="title">Tops</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="sidebar-filter" class="sidebar">
|
||||
<div class="wrap">
|
||||
<a href="#0" class="close-trigger" close-button>
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
<div class="siderbar-content">
|
||||
<div class="sidebar-title">Filter</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<input type="checkbox" name="category" id="category-size" checked>
|
||||
<label for="category-size">
|
||||
<span>Size</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</label>
|
||||
<div class="accord product-size">
|
||||
<div class="wrap">
|
||||
<button>XS</button>
|
||||
<button>S</button>
|
||||
<button>M</button>
|
||||
<button>L</button>
|
||||
<button>XL</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<input type="checkbox" name="category" id="category-color" checked>
|
||||
<label for="category-color">
|
||||
<span>Colors</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</label>
|
||||
<div class="accord product-color">
|
||||
<div class="wrap">
|
||||
<button class="color1"></button>
|
||||
<button class="color2"></button>
|
||||
<button class="color3"></button>
|
||||
<button class="color4"></button>
|
||||
<button class="color5"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<input type="checkbox" name="category" id="category-categories" checked>
|
||||
<label for="category-categories">
|
||||
<span>Categories</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</label>
|
||||
<div class="accord list-block scrollto">
|
||||
<ul class="wrapper initial">
|
||||
<li><a href="">Tops</a></li>
|
||||
<li><a href="">Bottoms</a></li>
|
||||
<li><a href="">Dresses</a></li>
|
||||
<li><a href="">Beachwear</a></li>
|
||||
<li><a href="">Activewear</a></li>
|
||||
<li><a href="">Shoes</a></li>
|
||||
<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>
|
||||
<div class="widget">
|
||||
<div class="summary">
|
||||
<label><span>Price</span></label>
|
||||
<div class="range-track">
|
||||
<input type="range" value="20" min="0" max="400" step="1">
|
||||
</div>
|
||||
<div class="price-range grey-color">
|
||||
<span>$20</span>
|
||||
<span>$400</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-content">
|
||||
<div class="sorter">
|
||||
<a href="#0" class="menu-trigger" trigger-button data-target="sidebar-filter"><i class='bx bx-filter-alt' ></i></a>
|
||||
<div class="left">
|
||||
<span class="grey-color">Showing 6 of 30 results</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="sort-list">
|
||||
<div class="wrap">
|
||||
<div class="opt-trigger">
|
||||
<span class="value">Default sorting</span>
|
||||
<i class='bx bx-chevron-down'></i>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="active"><a href="#0">Default sorting</a></li>
|
||||
<li><a href="#0">Popular</a></li>
|
||||
<li><a href="#0">Rating</a></li>
|
||||
<li><a href="#0">Lastest</a></li>
|
||||
<li><a href="#0">Price: low to high</a></li>
|
||||
<li><a href="30">Price: high to low</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-inline">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-pause'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-list-check'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-layout'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-grid-alt'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotgrid alsolike-box">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/best3.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/best3-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Embroidered Semi-Sheer Blouse</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$145.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new7.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new7-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Snow Lace Trim Shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$135.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/tops1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/tops1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Linen-blend Shirt</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$79.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/best2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/best2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">White Snow Open Back Halter Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$89.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new6.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new6-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Zebra Halterneck Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$85.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<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-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button"><a href="" class="primary-btn">Load more</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
<div class="inner-footer">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div class="subscribe">
|
||||
<h3>Subscribe via email</h3>
|
||||
<p class="grey-color">Subscribe and recive a 35% discount on your next purchase</p>
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-envelope'></i>
|
||||
<input type="text" class="input" placeholder="Enter your email">
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title social">Social Media</h3>
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bxl-instagram-alt'></i> Instagram</a></li>
|
||||
<li><a href="#"><i class='bx bxl-twitter'></i> Twitter</a></li>
|
||||
<li><a href="#"><i class='bx bxl-pinterest'></i> Printerest</a></li>
|
||||
<li><a href="#"><i class='bx bxl-youtube' ></i> Youtube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">Service</h3>
|
||||
<ul>
|
||||
<li><a href="#">About Us</a></li>
|
||||
<li><a href="#">Delivery Service</a></li>
|
||||
<li><a href="#">Terms & Condition</a></li>
|
||||
<li><a href="#">Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">Company</h3>
|
||||
<div class="company-address grey-color">
|
||||
<p>1234 N Lincoln Park W <br>Chicago, IL 60600</p>
|
||||
<p><a href="#">+1 (312) 123-4567</a> <br> <a href="#">az.shop@outlook.com</a></p>
|
||||
<p>Weekdays: 11:00 am - 8:00 pm<br> Weekends: 10:00 am to 9:00 pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<div id="mobile-menu" class="mobile-menu">
|
||||
<div class="wrap">
|
||||
<a href="" class="close-trigger" close-button>
|
||||
<i class='bx bx-x-circle' ></i>
|
||||
</a>
|
||||
<div class="main-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href=""><span>Home</span></a></li>
|
||||
<li class="has-child"><a href=""><span>Clothing</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<li><a href="#">Tops</a></li>
|
||||
<li><a href="#">Bottoms</a></li>
|
||||
<li><a href="#">Dresses</a></li>
|
||||
<li><a href="#">Beachwear</a></li>
|
||||
<li><a href="#">Sportswear</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-child"><a href=""><span>Shoes</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<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 class="has-child"><a href=""><span>Accessories</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
|
||||
<ul class="sub-menu list-block">
|
||||
<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>
|
||||
</li>
|
||||
<li><a href=""><span>Blog</span></a></li>
|
||||
<li><a href=""><span>Offers</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Login</a>
|
||||
<a href="" class="primary-btn">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="data-cart" class="cart-menu">
|
||||
<div class="wrap">
|
||||
<a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
|
||||
<div class="scrollto cart-outer">
|
||||
<div class="wrapper">
|
||||
<div class="cart-list">
|
||||
<div class="wrapper">
|
||||
<div class="cart-header">
|
||||
<h2>Shopping cart</h2>
|
||||
</div>
|
||||
<div class="cart-body scrollto">
|
||||
<div class="product-list">
|
||||
<div class="wrapper">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="grouping">
|
||||
<div class="quantity">
|
||||
<div class="control">
|
||||
<button>-</button>
|
||||
<input type="text" value="1">
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<a href="">
|
||||
<img src="images/on4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="variants">
|
||||
<h4 class="dot-title"><a href="">Canary Dress</a></h4>
|
||||
<div class="colcor grey-color">
|
||||
<span>Color:</span>
|
||||
<span>Canary yellow</span>
|
||||
</div>
|
||||
<div class="size grey-color">
|
||||
<span>Size:</span>
|
||||
<span>S</span>
|
||||
</div>
|
||||
<div class="price">$103.00</div>
|
||||
<a href="" class="item-remove">
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="grouping">
|
||||
<div class="quantity">
|
||||
<div class="control">
|
||||
<button>-</button>
|
||||
<input type="text" value="1">
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thumbnail">
|
||||
<a href="">
|
||||
<img src="images/new4.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="variants">
|
||||
<h4 class="dot-title"><a href="">Sequin-fringer Skirt</a></h4>
|
||||
<div class="colcor grey-color">
|
||||
<span>Color:</span>
|
||||
<span>Buttermilk</span>
|
||||
</div>
|
||||
<div class="size grey-color">
|
||||
<span>Size:</span>
|
||||
<span>M</span>
|
||||
</div>
|
||||
<div class="price">$109.00</div>
|
||||
<a href="" class="item-remove">
|
||||
<i class='bx bx-x'></i>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-footer">
|
||||
<div class="discount">
|
||||
<form action="">
|
||||
<input type="text" class="input" placeholder="Discount code">
|
||||
<input type="submit" value="Apply" class="submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="pricing">
|
||||
<ul>
|
||||
<li>
|
||||
<span>Subtotal</span>
|
||||
<span class="value"></span>
|
||||
</li>
|
||||
<ul>
|
||||
<li><span>Shipping</span></li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio" class="checking" name="shipping">
|
||||
<label for="">Free</label>
|
||||
</div>
|
||||
<span class="value">$0.00</span>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<input type="radio" class="checking" name="shipping">
|
||||
<label for="">Flat Rate</label>
|
||||
</div>
|
||||
<span class="value">$9.99</span>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<span>Promotion Discount</span>
|
||||
<span class="value">-$0.00</span>
|
||||
</li>
|
||||
<li class="total">
|
||||
<span>Total</span>
|
||||
<span class="value">$212.00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="" class="secondary-btn">Checkout</a>
|
||||
<a href="" class="grey-link">View cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
|
||||
<script src="page.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue