453 lines
22 KiB
HTML
453 lines
22 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 Detail 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="product-gallery">
|
|
<div class="gallery-main-image">
|
|
<figure>
|
|
<img src="#" alt="Main Product Image - Placeholder" class="main-product-image">
|
|
<figcaption class="sr-only">Main image of the product.</figcaption>
|
|
</figure>
|
|
<div class="zoom-indicator">
|
|
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-thumbnails">
|
|
<button class="thumbnail-nav-button prev-button" aria-label="Previous thumbnail">
|
|
<
|
|
</button>
|
|
<div class="thumbnail-list-wrapper">
|
|
<ul class="thumbnail-list">
|
|
<li class="thumbnail-item active">
|
|
<button class="thumbnail-button" aria-label="View product image 1">
|
|
<img src="#" alt="Product Thumbnail 1 - Placeholder">
|
|
</button>
|
|
</li>
|
|
<li class="thumbnail-item">
|
|
<button class="thumbnail-button" aria-label="View product image 2">
|
|
<img src="#" alt="Product Thumbnail 2 - Placeholder">
|
|
</button>
|
|
</li>
|
|
<li class="thumbnail-item">
|
|
<button class="thumbnail-button" aria-label="View product image 3">
|
|
<img src="#" alt="Product Thumbnail 3 - Placeholder">
|
|
</button>
|
|
</li>
|
|
<li class="thumbnail-item">
|
|
<button class="thumbnail-button" aria-label="View product image 4">
|
|
<img src="#" alt="Product Thumbnail 4 - Placeholder">
|
|
</button>
|
|
</li>
|
|
<li class="thumbnail-item">
|
|
<button class="thumbnail-button" aria-label="View product image 5">
|
|
<img src="#" alt="Product Thumbnail 5 - Placeholder">
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="thumbnail-nav-button next-button" aria-label="Next thumbnail">
|
|
>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section class="product-info-section">
|
|
<div class="product-details-container">
|
|
|
|
<h1 class="product-title">Product Title Placeholder - High-Quality Gadget (XYZ Model)</h1>
|
|
|
|
<div class="product-rating-reviews">
|
|
<span class="stars" aria-label="4 out of 5 stars">★★★★☆</span>
|
|
<span class="rating-count">1,234 Ratings</span>
|
|
<span class="review-count">& 456 Reviews</span>
|
|
</div>
|
|
|
|
<div class="product-divider"></div>
|
|
|
|
<div class="product-price-block">
|
|
<div class="current-price">
|
|
<span class="price-currency">₹</span>
|
|
<span class="price-value">8,999</span>
|
|
</div>
|
|
<div class="mrp-price">
|
|
<span class="mrp-label">M.R.P.:</span>
|
|
<span class="strike-through">₹14,999</span>
|
|
</div>
|
|
<div class="discount-info">
|
|
<span class="discount-percentage">40% off</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-availability">
|
|
<span class="availability-status">In Stock</span>
|
|
<span class="delivery-estimate">Delivery by Sun, DD Month</span>
|
|
</div>
|
|
|
|
<div class="product-divider"></div>
|
|
|
|
<div class="product-highlights">
|
|
<h2 class="highlights-title">Product Highlights</h2>
|
|
<ul class="highlights-list">
|
|
<li>Placeholder Feature 1: High-resolution Full HD Display</li>
|
|
<li>Placeholder Feature 2: Long-lasting 5000 mAh Battery</li>
|
|
<li>Placeholder Feature 3: Powerful Octa-core Processor for Seamless Performance</li>
|
|
<li>Placeholder Feature 4: Sleek and Lightweight Design with Premium Finish</li>
|
|
<li>Placeholder Feature 5: Advanced Camera System with AI Enhancements</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="product-divider"></div>
|
|
|
|
<div class="product-actions">
|
|
<button class="action-button add-to-cart-button">ADD TO CART</button>
|
|
<button class="action-button buy-now-button">BUY NOW</button>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<section class="product-actions-section">
|
|
<div class="product-details-summary">
|
|
<h2 class="product-title">Product Name Placeholder</h2>
|
|
<div class="price-display">
|
|
<span class="current-price">₹X,XXX</span>
|
|
<span class="mrp-price">M.R.P.: <del>₹Y,YYY</del></span>
|
|
<span class="discount-percentage">ZZ% off</span>
|
|
</div>
|
|
<div class="rating-reviews">
|
|
<span class="stars" aria-label="4.5 out of 5 stars">★★★★☆</span>
|
|
<span class="review-count">(X,XXX Ratings & YYY Reviews)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quantity-selection-group">
|
|
<label for="product-quantity" class="quantity-label">Quantity:</label>
|
|
<div class="quantity-control">
|
|
<button type="button" class="quantity-btn quantity-btn--decrease" aria-label="Decrease quantity">-</button>
|
|
<input type="number" id="product-quantity" value="1" min="1" max="99" class="quantity-input" aria-label="Select product quantity">
|
|
<button type="button" class="quantity-btn quantity-btn--increase" aria-label="Increase quantity">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-action-buttons">
|
|
<button type="button" class="btn btn-add-to-cart">
|
|
<span class="icon-placeholder">🛒</span> Add to Cart
|
|
</button>
|
|
<button type="button" class="btn btn-buy-now">
|
|
<span class="icon-placeholder">⚡</span> Buy Now
|
|
</button>
|
|
</div>
|
|
|
|
<div class="delivery-info-section">
|
|
<h3 class="delivery-heading">Delivery Details</h3>
|
|
<div class="pincode-check-group">
|
|
<input type="text" class="pincode-input" placeholder="Enter Delivery Pincode" aria-label="Enter delivery pincode">
|
|
<button type="button" class="btn btn-check-pincode">Check</button>
|
|
</div>
|
|
<p class="delivery-message">Enter your pincode to get estimated delivery date and options.</p>
|
|
<p class="delivery-status">Typically delivered in <strong>2-3 days</strong>.</p>
|
|
</div>
|
|
</section>
|
|
<section class="product-section">
|
|
<div class="product-section-container">
|
|
|
|
<div class="product-description-block">
|
|
<h2 class="section-title">Product Description</h2>
|
|
<p class="description-text">
|
|
[Placeholder: This is a wireframe-friendly placeholder for the main product description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.]
|
|
</p>
|
|
<h3 class="subsection-title">Key Features</h3>
|
|
<ul class="feature-list">
|
|
<li>[Placeholder: Feature 1 - High-performance processor for seamless multitasking.]</li>
|
|
<li>[Placeholder: Feature 2 - Stunning edge-to-edge display with vibrant colors.]</li>
|
|
<li>[Placeholder: Feature 3 - Long-lasting battery life for all-day usage.]</li>
|
|
<li>[Placeholder: Feature 4 - Advanced camera system for professional-grade photos and videos.]</li>
|
|
<li>[Placeholder: Feature 5 - Durable design with premium materials.]</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="product-specifications-block">
|
|
<h2 class="section-title">Specifications</h2>
|
|
<table class="specifications-table">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2" class="spec-category">General</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="spec-name">Model Name</td>
|
|
<td class="spec-value">[Placeholder: SuperGadget X]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Color</td>
|
|
<td class="spec-value">[Placeholder: Lunar Silver]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Operating System</td>
|
|
<td class="spec-value">[Placeholder: Android 14]</td>
|
|
</tr>
|
|
</tbody>
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2" class="spec-category">Display Features</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="spec-name">Display Size</td>
|
|
<td class="spec-value">[Placeholder: 6.8 inch]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Resolution</td>
|
|
<td class="spec-value">[Placeholder: 3200 x 1440 Pixels]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Display Type</td>
|
|
<td class="spec-value">[Placeholder: Dynamic AMOLED 2X]</td>
|
|
</tr>
|
|
</tbody>
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2" class="spec-category">Memory & Storage</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="spec-name">Internal Storage</td>
|
|
<td class="spec-value">[Placeholder: 256 GB]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">RAM</td>
|
|
<td class="spec-value">[Placeholder: 12 GB]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Expandable Storage</td>
|
|
<td class="spec-value">[Placeholder: Up to 1 TB]</td>
|
|
</tr>
|
|
</tbody>
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2" class="spec-category">Camera Features</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="spec-name">Primary Camera</td>
|
|
<td class="spec-value">[Placeholder: 200MP + 12MP + 10MP]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Secondary Camera</td>
|
|
<td class="spec-value">[Placeholder: 40MP]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="spec-name">Flash</td>
|
|
<td class="spec-value">[Placeholder: Yes, LED Flash]</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<section class="customer-reviews-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Customer Reviews</h2>
|
|
|
|
<div class="review-summary">
|
|
<div class="average-rating-display">
|
|
<span class="rating-value">4.5</span>
|
|
<div class="star-rating" role="img" aria-label="Average rating of 4.5 out of 5 stars">
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star half">★</span>
|
|
</div>
|
|
<span class="total-reviews-count">(1,234 Ratings & 456 Reviews)</span>
|
|
</div>
|
|
<button class="write-review-button">Write a Review</button>
|
|
</div>
|
|
|
|
<div class="reviews-grid">
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="star-rating" role="img" aria-label="Rated 5 out of 5 stars">
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
</div>
|
|
<h3 class="review-title">Excellent Product!</h3>
|
|
</div>
|
|
<p class="review-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
<div class="reviewer-info">
|
|
<span class="reviewer-name">John D.</span>
|
|
<span class="review-date">Reviewed on Jan 15, 2023</span>
|
|
</div>
|
|
<div class="review-actions">
|
|
<button class="action-button helpful-button">Helpful (12)</button>
|
|
<button class="action-button report-button">Report Abuse</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="star-rating" role="img" aria-label="Rated 4 out of 5 stars">
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star empty">★</span>
|
|
</div>
|
|
<h3 class="review-title">Good Value for Money</h3>
|
|
</div>
|
|
<p class="review-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<div class="reviewer-info">
|
|
<span class="reviewer-name">Jane S.</span>
|
|
<span class="review-date">Reviewed on Jan 10, 2023</span>
|
|
</div>
|
|
<div class="review-actions">
|
|
<button class="action-button helpful-button">Helpful (5)</button>
|
|
<button class="action-button report-button">Report Abuse</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="star-rating" role="img" aria-label="Rated 3 out of 5 stars">
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star filled">★</span>
|
|
<span class="star empty">★</span>
|
|
<span class="star empty">★</span>
|
|
</div>
|
|
<h3 class="review-title">Could be Better</h3>
|
|
</div>
|
|
<p class="review-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
<div class="reviewer-info">
|
|
<span class="reviewer-name">Robert B.</span>
|
|
<span class="review-date">Reviewed on Dec 28, 2022</span>
|
|
</div>
|
|
<div class="review-actions">
|
|
<button class="action-button helpful-button">Helpful (2)</button>
|
|
<button class="action-button report-button">Report Abuse</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="pagination-controls">
|
|
<button class="load-more-button">LOAD MORE REVIEWS</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="related-products-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Related Products</h2>
|
|
<div class="product-grid">
|
|
<div class="product-card">
|
|
<a href="#" class="product-link">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/200x200?text=Product+Image+1" alt="Placeholder Product 1" class="product-image">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Product Name One</h3>
|
|
<div class="product-price">
|
|
<span class="current-price">$129.99</span>
|
|
<span class="original-price">$199.99</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-link">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/200x200?text=Product+Image+2" alt="Placeholder Product 2" class="product-image">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Product Name Two with Longer Description</h3>
|
|
<div class="product-price">
|
|
<span class="current-price">$85.50</span>
|
|
<span class="original-price">$100.00</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-link">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/200x200?text=Product+Image+3" alt="Placeholder Product 3" class="product-image">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Product Name Three</h3>
|
|
<div class="product-price">
|
|
<span class="current-price">$249.00</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-link">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/200x200?text=Product+Image+4" alt="Placeholder Product 4" class="product-image">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Product Name Four</h3>
|
|
<div class="product-price">
|
|
<span class="current-price">$49.95</span>
|
|
<span class="original-price">$60.00</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-link">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/200x200?text=Product+Image+5" alt="Placeholder Product 5" class="product-image">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Product Name Five</h3>
|
|
<div class="product-price">
|
|
<span class="current-price">$75.00</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<a href="#" class="product-link">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/200x200?text=Product+Image+6" alt="Placeholder Product 6" class="product-image">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">Product Name Six</h3>
|
|
<div class="product-price">
|
|
<span class="current-price">$310.00</span>
|
|
<span class="original-price">$350.00</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |