335 lines
16 KiB
HTML
335 lines
16 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Listing Page</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
|
<section class="category-header">
|
|
<div class="container">
|
|
<nav aria-label="Breadcrumb" class="breadcrumbs">
|
|
<ol>
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#parent-category">Parent Category Name</a></li>
|
|
<li><span aria-current="page">Current Category Title</span></li>
|
|
</ol>
|
|
</nav>
|
|
<h1 class="category-title">Main Category Title Placeholder</h1>
|
|
<p class="category-description">This paragraph serves as a brief introduction or description for the category, providing context and an overview of the content or products within this section.</p>
|
|
</div>
|
|
</section>
|
|
<div class="filter-sort-container">
|
|
<div class="sort-options-bar">
|
|
<h2 class="sort-heading">Sort By</h2>
|
|
<ul class="sort-list">
|
|
<li class="sort-item active"><a href="#">Relevance</a></li>
|
|
<li class="sort-item"><a href="#">Popularity</a></li>
|
|
<li class="sort-item"><a href="#">Price -- Low to High</a></li>
|
|
<li class="sort-item"><a href="#">Price -- High to Low</a></li>
|
|
<li class="sort-item"><a href="#">Newest First</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<aside class="filter-sidebar">
|
|
<div class="filter-header">
|
|
<h3 class="filter-heading">Filters</h3>
|
|
<button type="button" class="clear-all-filters">Clear All</button>
|
|
</div>
|
|
|
|
<section class="filter-group">
|
|
<h4 class="filter-group-heading">Categories</h4>
|
|
<ul class="filter-list">
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="category1" name="category" value="category1">
|
|
<label for="category1">Category Name 1 (123)</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="category2" name="category" value="category2">
|
|
<label for="category2">Category Name 2 (45)</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="category3" name="category" value="category3">
|
|
<label for="category3">Category Name 3 (78)</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="category4" name="category" value="category4">
|
|
<label for="category4">Category Name 4 (90)</label>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="filter-group">
|
|
<h4 class="filter-group-heading">Price</h4>
|
|
<div class="price-range">
|
|
<select class="price-min">
|
|
<option value="min">Min</option>
|
|
<option value="100">₹100</option>
|
|
<option value="500">₹500</option>
|
|
<option value="1000">₹1000</option>
|
|
</select>
|
|
<span>to</span>
|
|
<select class="price-max">
|
|
<option value="max">Max</option>
|
|
<option value="1000">₹1000</option>
|
|
<option value="5000">₹5000</option>
|
|
<option value="10000">₹10000</option>
|
|
<option value="20000">₹20000+</option>
|
|
</select>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="filter-group">
|
|
<h4 class="filter-group-heading">Brand</h4>
|
|
<div class="brand-search-placeholder">
|
|
<input type="search" placeholder="Search Brand...">
|
|
</div>
|
|
<ul class="filter-list">
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="brand1" name="brand" value="brand1">
|
|
<label for="brand1">Brand A (56)</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="brand2" name="brand" value="brand2">
|
|
<label for="brand2">Brand B (34)</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="checkbox" id="brand3" name="brand" value="brand3">
|
|
<label for="brand3">Brand C (78)</label>
|
|
</li>
|
|
</ul>
|
|
<a href="#" class="view-more-brands">View 10 more</a>
|
|
</section>
|
|
|
|
<section class="filter-group">
|
|
<h4 class="filter-group-heading">Customer Ratings</h4>
|
|
<ul class="filter-list">
|
|
<li class="filter-item">
|
|
<input type="radio" id="rating5" name="rating" value="5">
|
|
<label for="rating5">5 ★ & above</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="radio" id="rating4" name="rating" value="4">
|
|
<label for="rating4">4 ★ & above</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="radio" id="rating3" name="rating" value="3">
|
|
<label for="rating3">3 ★ & above</label>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="filter-group">
|
|
<h4 class="filter-group-heading">Discount</h4>
|
|
<ul class="filter-list">
|
|
<li class="filter-item">
|
|
<input type="radio" id="discount50" name="discount" value="50">
|
|
<label for="discount50">50% or more</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="radio" id="discount40" name="discount" value="40">
|
|
<label for="discount40">40% or more</label>
|
|
</li>
|
|
<li class="filter-item">
|
|
<input type="radio" id="discount30" name="discount" value="30">
|
|
<label for="discount30">30% or more</label>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
<section class="product-grid-section">
|
|
<h2 class="product-grid-section__heading">Top Deals on Electronics</h2>
|
|
<div class="product-grid-container">
|
|
<div class="product-card">
|
|
<a href="#" class="product-card__link">
|
|
<div class="product-card__image-container">
|
|
<img src="https://via.placeholder.com/200x200?text=Laptop" alt="Laptop Pro X15" class="product-card__image">
|
|
</div>
|
|
<div class="product-card__details">
|
|
<h3 class="product-card__title">Laptop Pro X15 with i7 Processor</h3>
|
|
<div class="product-card__price">
|
|
<span class="product-card__current-price">₹74,999</span>
|
|
<span class="product-card__original-price">₹99,999</span>
|
|
<span class="product-card__discount">25% off</span>
|
|
</div>
|
|
<div class="product-card__rating">
|
|
<span class="product-card__stars">★★★★☆</span>
|
|
<span class="product-card__reviews">(4,500 ratings)</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<button class="product-card__add-to-cart">Add to Cart</button>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-card__link">
|
|
<div class="product-card__image-container">
|
|
<img src="https://via.placeholder.com/200x200?text=Smartphone" alt="Smartphone Ultra 5G" class="product-card__image">
|
|
</div>
|
|
<div class="product-card__details">
|
|
<h3 class="product-card__title">Smartphone Ultra 5G, 128GB Storage</h3>
|
|
<div class="product-card__price">
|
|
<span class="product-card__current-price">₹29,999</span>
|
|
<span class="product-card__original-price">₹35,000</span>
|
|
<span class="product-card__discount">14% off</span>
|
|
</div>
|
|
<div class="product-card__rating">
|
|
<span class="product-card__stars">★★★★★</span>
|
|
<span class="product-card__reviews">(12,345 ratings)</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<button class="product-card__add-to-cart">Add to Cart</button>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-card__link">
|
|
<div class="product-card__image-container">
|
|
<img src="https://via.placeholder.com/200x200?text=Headphones" alt="Noise Cancelling Headphones" class="product-card__image">
|
|
</div>
|
|
<div class="product-card__details">
|
|
<h3 class="product-card__title">Noise Cancelling Headphones X300</h3>
|
|
<div class="product-card__price">
|
|
<span class="product-card__current-price">₹4,499</span>
|
|
<span class="product-card__original-price">₹6,000</span>
|
|
<span class="product-card__discount">25% off</span>
|
|
</div>
|
|
<div class="product-card__rating">
|
|
<span class="product-card__stars">★★★★☆</span>
|
|
<span class="product-card__reviews">(8,900 ratings)</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<button class="product-card__add-to-cart">Add to Cart</button>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-card__link">
|
|
<div class="product-card__image-container">
|
|
<img src="https://via.placeholder.com/200x200?text=Smartwatch" alt="Smartwatch Series 7" class="product-card__image">
|
|
</div>
|
|
<div class="product-card__details">
|
|
<h3 class="product-card__title">Smartwatch Series 7 with ECG</h3>
|
|
<div class="product-card__price">
|
|
<span class="product-card__current-price">₹11,999</span>
|
|
<span class="product-card__original-price">₹15,000</span>
|
|
<span class="product-card__discount">20% off</span>
|
|
</div>
|
|
<div class="product-card__rating">
|
|
<span class="product-card__stars">★★★★☆</span>
|
|
<span class="product-card__reviews">(5,200 ratings)</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<button class="product-card__add-to-cart">Add to Cart</button>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-card__link">
|
|
<div class="product-card__image-container">
|
|
<img src="https://via.placeholder.com/200x200?text=Tablet" alt="Tablet Air 10" class="product-card__image">
|
|
</div>
|
|
<div class="product-card__details">
|
|
<h3 class="product-card__title">Tablet Air 10.2 inch Display</h3>
|
|
<div class="product-card__price">
|
|
<span class="product-card__current-price">₹19,999</span>
|
|
<span class="product-card__original-price">₹24,000</span>
|
|
<span class="product-card__discount">17% off</span>
|
|
</div>
|
|
<div class="product-card__rating">
|
|
<span class="product-card__stars">★★★★☆</span>
|
|
<span class="product-card__reviews">(3,800 ratings)</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<button class="product-card__add-to-cart">Add to Cart</button>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-card__link">
|
|
<div class="product-card__image-container">
|
|
<img src="https://via.placeholder.com/200x200?text=Camera" alt="Mirrorless Camera" class="product-card__image">
|
|
</div>
|
|
<div class="product-card__details">
|
|
<h3 class="product-card__title">Professional Mirrorless Camera 4K</h3>
|
|
<div class="product-card__price">
|
|
<span class="product-card__current-price">₹54,999</span>
|
|
<span class="product-card__original-price">₹65,000</span>
|
|
<span class="product-card__discount">15% off</span>
|
|
</div>
|
|
<div class="product-card__rating">
|
|
<span class="product-card__stars">★★★★☆</span>
|
|
<span class="product-card__reviews">(1,100 ratings)</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<button class="product-card__add-to-cart">Add to Cart</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="brand-showcase-section">
|
|
<div class="container">
|
|
<header class="section-header">
|
|
<h2 class="section-title">Explore Top Brands</h2>
|
|
<a href="#" class="view-all-link">View All Brands</a>
|
|
</header>
|
|
<div class="brand-grid">
|
|
<a href="#" class="brand-item">
|
|
<div class="brand-logo-wrapper">
|
|
<img src="https://via.placeholder.com/150x80?text=Brand+A" alt="Brand A Logo" class="brand-logo">
|
|
</div>
|
|
<h3 class="brand-name">Brand A</h3>
|
|
<p class="brand-tagline">Up to 40% Off</p>
|
|
</a>
|
|
<a href="#" class="brand-item">
|
|
<div class="brand-logo-wrapper">
|
|
<img src="https://via.placeholder.com/150x80?text=Brand+B" alt="Brand B Logo" class="brand-logo">
|
|
</div>
|
|
<h3 class="brand-name">Brand B</h3>
|
|
<p class="brand-tagline">New Arrivals</p>
|
|
</a>
|
|
<a href="#" class="brand-item">
|
|
<div class="brand-logo-wrapper">
|
|
<img src="https://via.placeholder.com/150x80?text=Brand+C" alt="Brand C Logo" class="brand-logo">
|
|
</div>
|
|
<h3 class="brand-name">Brand C</h3>
|
|
<p class="brand-tagline">Exclusive Deals</p>
|
|
</a>
|
|
<a href="#" class="brand-item">
|
|
<div class="brand-logo-wrapper">
|
|
<img src="https://via.placeholder.com/150x80?text=Brand+D" alt="Brand D Logo" class="brand-logo">
|
|
</div>
|
|
<h3 class="brand-name">Brand D</h3>
|
|
<p class="brand-tagline">Best Sellers</p>
|
|
</a>
|
|
<a href="#" class="brand-item">
|
|
<div class="brand-logo-wrapper">
|
|
<img src="https://via.placeholder.com/150x80?text=Brand+E" alt="Brand E Logo" class="brand-logo">
|
|
</div>
|
|
<h3 class="brand-name">Brand E</h3>
|
|
<p class="brand-tagline">Shop Now</p>
|
|
</a>
|
|
<a href="#" class="brand-item">
|
|
<div class="brand-logo-wrapper">
|
|
<img src="https://via.placeholder.com/150x80?text=Brand+F" alt="Brand F Logo" class="brand-logo">
|
|
</div>
|
|
<h3 class="brand-name">Brand F</h3>
|
|
<p class="brand-tagline">Limited Stock</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |