risadmin_prod/custom1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
custom1/product_detail.html

269 lines
17 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Detail</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">Radiance Jewels</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_catalog.html">Product Catalog</a></li><li><a href="shopping_cart.html">Shopping Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="login.html">Login</a></li><li><a href="dashboard.html">Dashboard</a></li><li><a href="order_history.html">Order History</a></li><li><a href="user_profile.html">User Profile</a></li><li><a href="sign_up.html">Sign Up</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<section class="product-image-gallery">
<h2 class="sr-only">Product Image Gallery</h2>
<div class="gallery-container">
<div class="gallery-thumbnails">
<div class="thumbnail-item active">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+1" alt="Thumbnail view 1 of the product, currently selected">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+2" alt="Thumbnail view 2 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+3" alt="Thumbnail view 3 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+4" alt="Thumbnail view 4 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+5" alt="Thumbnail view 5 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+6" alt="Thumbnail view 6 of the product">
</div>
</div>
<div class="gallery-main-image">
<img src="https://via.placeholder.com/600x600/F5F5F5/AAAAAA?text=Product+Main+Image" alt="High-quality image of the main product displayed" loading="eager">
</div>
</div>
</section>
<section class="product-detail-section">
<div class="product-container">
<figure class="product-image-gallery">
<img src="https://via.placeholder.com/600x600/F0F0F0/333333?text=Product+Image" alt="Elegant Diamond Solitaire Ring - Main View" class="main-product-image">
<div class="thumbnail-images">
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb1" alt="Product thumbnail 1" class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb2" alt="Product thumbnail 2" class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb3" alt="Product thumbnail 3" class="thumbnail-item">
</div>
<figcaption class="sr-only">Detailed view of Elegant Diamond Solitaire Ring, showcasing its design and sparkle.</figcaption>
</figure>
<div class="product-info">
<h1 class="product-title">Elegant Diamond Solitaire Ring</h1>
<p class="product-category">Category: Rings</p>
<div class="product-price">
<span class="currency">$</span>
<span class="price-value">1,899.00</span>
</div>
<div class="product-description">
<p>Discover the timeless beauty of this exquisite diamond solitaire ring, meticulously crafted from 925 sterling silver. Featuring a brilliant-cut diamond, this ring embodies sophistication and everlasting elegance, perfect for special occasions or daily wear.</p>
<ul>
<li><strong>Material:</strong> 925 Sterling Silver</li>
<li><strong>Stone:</strong> Natural Diamond, Brilliant Cut</li>
<li><strong>Carat Weight:</strong> 0.75 ct</li>
<li><strong>Clarity:</strong> VS1</li>
<li><strong>Color:</strong> G</li>
<li><strong>Available Sizes:</strong> 5, 6, 7, 8, 9</li>
</ul>
</div>
<div class="product-options">
<div class="option-group">
<label for="size-select" class="option-label">Size:</label>
<select id="size-select" class="option-select">
<option value="">Select Size</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="option-group">
<label for="quantity-select" class="option-label">Quantity:</label>
<input type="number" id="quantity-select" class="option-input" value="1" min="1" max="10">
</div>
</div>
<div class="product-actions">
<button class="add-to-cart-btn">Add to Cart</button>
<button class="buy-now-btn">Buy Now</button>
</div>
<div class="delivery-info">
<h3>Delivery &amp; Returns</h3>
<p>Free standard delivery on all orders. Expected delivery in 3-5 business days. Easy 30-day returns.</p>
</div>
</div>
</div>
</section>
<section class="call-to-action-block">
<div class="container">
<div class="cta-content">
<h2 class="cta-heading">Find Your Perfect Sparkle</h2>
<p class="cta-description">
Explore our exquisite collection of handcrafted jewelry, designed to celebrate every moment.
Timeless elegance awaits.
</p>
<div class="cta-buttons">
<a href="#shop-now" class="button primary-button">Shop Our Latest Collection</a>
<a href="#contact-us" class="button secondary-button">Book a Consultation</a>
</div>
</div>
</div>
</section>
<section class="related-products-section">
<h2 class="section-title">You Might Also Like</h2>
<div class="related-products-grid">
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Elegant Diamond Necklace" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Elegant Diamond Necklace</h3>
<p class="product-price">$2,499.00</p>
</div>
</a>
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Classic Gold Bangle" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Classic Gold Bangle</h3>
<p class="product-price">$1,850.00</p>
</div>
</a>
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Sapphire Stud Earrings" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Sapphire Stud Earrings</h3>
<p class="product-price">$899.00</p>
</div>
</a>
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Emerald Solitaire Ring" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Emerald Solitaire Ring</h3>
<p class="product-price">$3,200.00</p>
</div>
</a>
</div>
</section>
<section class="customer-reviews-section">
<div class="container">
<h2 class="section-title">What Our Customers Say</h2>
<div class="reviews-summary">
<div class="average-rating">
<span class="rating-value">4.8</span> / 5
<div class="stars" aria-label="Average rating 4.8 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-filled">★</span>
</div>
<p class="total-reviews">(1,234 Reviews)</p>
</div>
<button class="button primary-button write-review-button">Write a Review</button>
</div>
<div class="reviews-grid">
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">JD</div>
<p class="reviewer-name">Jane Doe</p>
</div>
<div class="review-rating" 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>
</div>
<h3 class="review-title">Absolutely Stunning Necklace!</h3>
<p class="review-text">I ordered the 'Eternal Sparkle' necklace and it exceeded all my expectations. The craftsmanship is superb, and it sparkles beautifully. It arrived quickly and was packaged elegantly. Highly recommend this store for their exquisite jewelry!</p>
<p class="review-date">Reviewed on October 26, 2023</p>
</article>
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">MS</div>
<p class="reviewer-name">Michael Smith</p>
</div>
<div class="review-rating" 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>
</div>
<h3 class="review-title">Great Quality, Fast Shipping</h3>
<p class="review-text">Bought a pair of earrings for my wife, and she loves them. The quality is evident, and they look even better in person. Shipping was surprisingly fast, and the customer service was very helpful when I had a question about sizing. Will buy again!</p>
<p class="review-date">Reviewed on October 20, 2023</p>
</article>
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">AC</div>
<p class="reviewer-name">Aisha Khan</p>
</div>
<div class="review-rating" 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>
</div>
<h3 class="review-title">My Go-To for Special Gifts</h3>
<p class="review-text">This is my third purchase from this store, and they consistently deliver perfection. The bangles I bought are exquisite and fit perfectly. The packaging always feels premium, making it ideal for gifting. A truly trustworthy brand.</p>
<p class="review-date">Reviewed on October 15, 2023</p>
</article>
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">RW</div>
<p class="reviewer-name">Robert Williams</p>
</div>
<div class="review-rating" 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>
</div>
<h3 class="review-title">Decent Ring, Sizing Issue</h3>
<p class="review-text">The ring itself is beautiful, but the sizing was a bit off for me. Had to get it resized locally. Otherwise, good quality for the price. The customer support was responsive when I inquired about returns, but I decided to keep it.</p>
<p class="review-date">Reviewed on October 10, 2023</p>
</article>
</div>
<div class="view-all-reviews">
<button class="button secondary-button">View All 1,234 Reviews</button>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping &amp; Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink