279 lines
16 KiB
HTML
279 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>Search Results</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>
|
|
<aside class="search-filter-sidebar">
|
|
<div class="filter-header">
|
|
<h3>Filters</h3>
|
|
<button type="button" class="clear-all-filters">Clear All</button>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<h4>Price</h4>
|
|
<div class="price-range">
|
|
<input type="text" placeholder="Min" class="price-input">
|
|
<span>to</span>
|
|
<input type="text" placeholder="Max" class="price-input">
|
|
<button type="button" class="go-button">Go</button>
|
|
</div>
|
|
<ul class="filter-options">
|
|
<li><label><input type="checkbox" name="price-range" value="0-500"> Below Placeholder 500</label></li>
|
|
<li><label><input type="checkbox" name="price-range" value="500-1000"> Placeholder 500 - 1000</label></li>
|
|
<li><label><input type="checkbox" name="price-range" value="1000-2000"> Placeholder 1000 - 2000</label></li>
|
|
<li><label><input type="checkbox" name="price-range" value="2000+"> Placeholder 2000 & Above</label></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<h4>Brand</h4>
|
|
<div class="search-box">
|
|
<input type="text" placeholder="Search for Brands" class="brand-search-input">
|
|
</div>
|
|
<ul class="filter-options scrollable-options">
|
|
<li><label><input type="checkbox" name="brand" value="brand-a"> Placeholder Brand A (123)</label></li>
|
|
<li><label><input type="checkbox" name="brand" value="brand-b"> Placeholder Brand B (45)</label></li>
|
|
<li><label><input type="checkbox" name="brand" value="brand-c"> Placeholder Brand C (89)</label></li>
|
|
<li><label><input type="checkbox" name="brand" value="brand-d"> Placeholder Brand D (201)</label></li>
|
|
<li><label><input type="checkbox" name="brand" value="brand-e"> Placeholder Brand E (67)</label></li>
|
|
<li><label><input type="checkbox" name="brand" value="brand-f"> Placeholder Brand F (15)</label></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<h4>Customer Ratings</h4>
|
|
<ul class="filter-options">
|
|
<li><label><input type="checkbox" name="rating" value="4-star-plus"> 4<span class="star-icon">★</span> & above</label></li>
|
|
<li><label><input type="checkbox" name="rating" value="3-star-plus"> 3<span class="star-icon">★</span> & above</label></li>
|
|
<li><label><input type="checkbox" name="rating" value="2-star-plus"> 2<span class="star-icon">★</span> & above</label></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<h4>Discount</h4>
|
|
<ul class="filter-options">
|
|
<li><label><input type="checkbox" name="discount" value="50-percent-plus"> 50% or more</label></li>
|
|
<li><label><input type="checkbox" name="discount" value="40-percent-plus"> 40% or more</label></li>
|
|
<li><label><input type="checkbox" name="discount" value="30-percent-plus"> 30% or more</label></li>
|
|
<li><label><input type="checkbox" name="discount" value="20-percent-plus"> 20% or more</label></li>
|
|
<li><label><input type="checkbox" name="discount" value="10-percent-plus"> 10% or more</label></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<h4>Availability</h4>
|
|
<ul class="filter-options">
|
|
<li><label><input type="checkbox" name="availability" value="include-oos"> Include Out of Stock</label></li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Grid</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<main class="container">
|
|
<section class="product-grid-section">
|
|
<header class="product-grid-header">
|
|
<h2>Top Deals on Electronics</h2>
|
|
<a href="#" class="view-all-btn">VIEW ALL</a>
|
|
</header>
|
|
<div class="product-grid">
|
|
<!-- Product Card 1 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+1" alt="Product Name 1" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">Smartphone X Pro (128GB, Blue)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹19,999</span>
|
|
<span class="product-card-original-price">₹25,000</span>
|
|
<span class="product-card-discount">20% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Grab the latest smartphone with amazing features.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 2 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+2" alt="Product Name 2" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">Noise Cancelling Headphones (Black)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹4,499</span>
|
|
<span class="product-card-original-price">₹6,000</span>
|
|
<span class="product-card-discount">25% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Immerse yourself in pure sound with these headphones.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 3 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+3" alt="Product Name 3" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">Smartwatch Series 5 (Sport Band)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹9,999</span>
|
|
<span class="product-card-original-price">₹12,500</span>
|
|
<span class="product-card-discount">20% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Track your fitness and stay connected on the go.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 4 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+4" alt="Product Name 4" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">Laptop Ultrabook (i7, 16GB RAM)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹54,999</span>
|
|
<span class="product-card-original-price">₹65,000</span>
|
|
<span class="product-card-discount">15% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Powerful and portable for all your computing needs.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 5 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+5" alt="Product Name 5" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">Portable Bluetooth Speaker (Waterproof)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹1,799</span>
|
|
<span class="product-card-original-price">₹2,500</span>
|
|
<span class="product-card-discount">28% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Take your music anywhere with crystal-clear sound.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 6 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+6" alt="Product Name 6" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">Gaming Monitor 27-inch (144Hz, QHD)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹18,500</span>
|
|
<span class="product-card-original-price">₹23,000</span>
|
|
<span class="product-card-discount">19% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Experience immersive gaming with high refresh rates.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 7 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+7" alt="Product Name 7" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">DSLR Camera Kit with 2 Lenses</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹34,999</span>
|
|
<span class="product-card-original-price">₹40,000</span>
|
|
<span class="product-card-discount">12% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Capture stunning photos with this professional camera.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
<!-- Product Card 8 -->
|
|
<article class="product-card">
|
|
<a href="#" class="product-link">
|
|
<img src="https://via.placeholder.com/200x180/E0E0E0/A0A0A0?text=Product+Image+8" alt="Product Name 8" class="product-card-image">
|
|
<div class="product-card-details">
|
|
<h3 class="product-card-title">External SSD 1TB (USB 3.2 Gen 2)</h3>
|
|
<div class="product-card-price-info">
|
|
<span class="product-card-price">₹6,999</span>
|
|
<span class="product-card-original-price">₹9,500</span>
|
|
<span class="product-card-discount">26% off</span>
|
|
</div>
|
|
<p class="product-card-desc">Fast and reliable storage for all your data.</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<nav aria-label="Pagination Navigation">
|
|
<ul class="pagination-controls">
|
|
<li class="pagination-item">
|
|
<a href="#" class="pagination-link pagination-link--prev" aria-label="Previous Page">
|
|
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" width="18" height="18">
|
|
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="pagination-item">
|
|
<a href="#" class="pagination-link" aria-label="Page 1">1</a>
|
|
</li>
|
|
<li class="pagination-item">
|
|
<a href="#" class="pagination-link pagination-link--active" aria-current="page" aria-label="Current Page, Page 2">2</a>
|
|
</li>
|
|
<li class="pagination-item">
|
|
<a href="#" class="pagination-link" aria-label="Page 3">3</a>
|
|
</li>
|
|
<li class="pagination-item pagination-item--ellipsis">
|
|
<span class="pagination-ellipsis">...</span>
|
|
</li>
|
|
<li class="pagination-item">
|
|
<a href="#" class="pagination-link" aria-label="Page 10">10</a>
|
|
</li>
|
|
<li class="pagination-item">
|
|
<a href="#" class="pagination-link pagination-link--next" aria-label="Next Page">
|
|
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" width="18" height="18">
|
|
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"></path>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<section class="popular-searches-section">
|
|
<h2 class="section-title">Popular Searches Suggestions</h2>
|
|
<div class="search-suggestions-container">
|
|
<ul class="search-suggestions-list">
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Latest Smartphones</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Men's Fashion New Arrivals</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Home & Kitchen Appliances</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Best-Selling Laptops</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Kids Toys & Games</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Fitness Trackers</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Books & Literature</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Beauty & Personal Care</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Travel Accessories</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Electronics Gadgets</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Furniture & Decor</a></li>
|
|
<li class="suggestion-item"><a href="#" class="suggestion-link">Sports Equipment</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |