449 lines
24 KiB
HTML
449 lines
24 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</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
|
|
<section class="product-gallery">
|
|
<div class="gallery-main">
|
|
<figure>
|
|
<img src="#" alt="Main image of handcrafted wooden bowl, showcasing its unique grain and finish." class="gallery-current-image">
|
|
<figcaption class="sr-only">Currently displayed image of the handcrafted wooden bowl.</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="gallery-thumbnails">
|
|
<button class="thumbnail-button active" aria-label="View image 1 of handcrafted wooden bowl">
|
|
<img src="#" alt="Thumbnail 1: Front view of the wooden bowl.">
|
|
</button>
|
|
<button class="thumbnail-button" aria-label="View image 2 of handcrafted wooden bowl">
|
|
<img src="#" alt="Thumbnail 2: Side profile of the wooden bowl.">
|
|
</button>
|
|
<button class="thumbnail-button" aria-label="View image 3 of handcrafted wooden bowl">
|
|
<img src="#" alt="Thumbnail 3: Interior view of the wooden bowl.">
|
|
</button>
|
|
<button class="thumbnail-button" aria-label="View image 4 of handcrafted wooden bowl">
|
|
<img src="#" alt="Thumbnail 4: Detail of the wooden bowl's craftsmanship.">
|
|
</button>
|
|
<button class="thumbnail-button" aria-label="View image 5 of handcrafted wooden bowl">
|
|
<img src="#" alt="Thumbnail 5: Wooden bowl displayed in a natural setting.">
|
|
</button>
|
|
<!-- Add more thumbnail buttons as needed -->
|
|
</div>
|
|
</section>
|
|
<section class="product-info-section">
|
|
<div class="product-details-container">
|
|
<div class="product-image-gallery">
|
|
<div class="main-image">
|
|
<img src="[Main Product Image URL]" alt="[Product Title Placeholder] Main Image">
|
|
</div>
|
|
<div class="thumbnail-images">
|
|
<img src="[Thumbnail 1 URL]" alt="[Product Title Placeholder] Thumbnail 1">
|
|
<img src="[Thumbnail 2 URL]" alt="[Product Title Placeholder] Thumbnail 2">
|
|
<img src="[Thumbnail 3 URL]" alt="[Product Title Placeholder] Thumbnail 3">
|
|
</div>
|
|
</div>
|
|
<div class="product-overview">
|
|
<h1 class="product-title">[Handmade Craft Product Title]</h1>
|
|
<p class="product-category">[Category: e.g., Pottery, Jewelry, Textiles]</p>
|
|
<div class="product-price">
|
|
<span class="current-price">[Price: e.g., $49.99]</span>
|
|
<!-- Optional: <span class="original-price">[Original Price: e.g., $59.99]</span> -->
|
|
</div>
|
|
<div class="product-rating">
|
|
<span class="stars">★★★★☆</span>
|
|
<span class="review-count">(XX Reviews)</span>
|
|
</div>
|
|
<p class="product-short-description">[Short, engaging description of the handmade craft, highlighting key features or unique selling points. For example: "A beautifully handcrafted ceramic mug, perfect for your morning coffee, made with love and attention to detail."]</p>
|
|
|
|
<form class="product-options-form">
|
|
<div class="option-group">
|
|
<label for="quantity">Quantity:</label>
|
|
<input type="number" id="quantity" name="quantity" value="1" min="1" max="100">
|
|
</div>
|
|
<div class="option-group">
|
|
<label for="color">Color/Material:</label>
|
|
<select id="color" name="color">
|
|
<option value="default">[Select Option]</option>
|
|
<option value="blue">Ocean Blue</option>
|
|
<option value="green">Forest Green</option>
|
|
<option value="red">Ruby Red</option>
|
|
</select>
|
|
</div>
|
|
<!-- Add more options as needed for crafts, e.g., Size, Personalization input -->
|
|
<button type="submit" class="add-to-cart-button">Add to Cart</button>
|
|
<button type="button" class="buy-now-button">Buy Now</button>
|
|
</form>
|
|
|
|
<div class="delivery-info">
|
|
<p>Estimated Delivery: [X-Y Business Days]</p>
|
|
<p>Free Shipping on orders over [Amount]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-extra-details">
|
|
<div class="tabs">
|
|
<button class="tab-button active" data-tab="description">Description</button>
|
|
<button class="tab-button" data-tab="specs">Specifications</button>
|
|
<button class="tab-button" data-tab="shipping">Shipping & Returns</button>
|
|
<button class="tab-button" data-tab="reviews">Reviews</button>
|
|
</div>
|
|
|
|
<div id="description" class="tab-content active">
|
|
<h2>Product Description</h2>
|
|
<p>[Detailed description of the handmade craft. Talk about the inspiration, the process, the materials used, the story behind it, and its unique qualities. For example: "This exquisite piece is meticulously hand-painted by local artisans, using traditional techniques passed down through generations. Each stroke tells a story, making every item truly unique. Made from sustainable [material], it embodies both beauty and responsible craftsmanship."]</p>
|
|
<ul>
|
|
<li>Handmade with [Specific Material]</li>
|
|
<li>Unique, one-of-a-kind design</li>
|
|
<li>Dimensions: [e.g., 10cm H x 8cm W]</li>
|
|
<li>Weight: [e.g., 250g]</li>
|
|
<li>Care Instructions: [e.g., Hand-wash only]</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="specs" class="tab-content">
|
|
<h2>Specifications</h2>
|
|
<table>
|
|
<tr>
|
|
<td>Craft Type</td>
|
|
<td>[e.g., Ceramic Ware]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Material</td>
|
|
<td>[e.g., High-fired Clay, Glaze]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dimensions</td>
|
|
<td>[e.g., 10 cm (Height) x 8 cm (Diameter)]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Weight</td>
|
|
<td>[e.g., 0.25 kg]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Origin</td>
|
|
<td>[e.g., Handcrafted in India]</td>
|
|
</tr>
|
|
<tr>
|
|
<td>SKU</td>
|
|
<td>[Product SKU e.g., HCMUG001]</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="shipping" class="tab-content">
|
|
<h2>Shipping & Returns</h2>
|
|
<h3>Shipping Information:</h3>
|
|
<p>All orders are processed within [1-2] business days. Shipping times vary based on location:</p>
|
|
<ul>
|
|
<li>Domestic: [3-7] business days</li>
|
|
<li>International: [7-20] business days</li>
|
|
</ul>
|
|
<p>Tracking information will be provided once your order ships.</p>
|
|
|
|
<h3>Returns Policy:</h3>
|
|
<p>We want you to be completely satisfied with your purchase. If you are not, you may return new, unused items within [14] days of delivery for a full refund. Custom or personalized items may not be eligible for return unless defective.</p>
|
|
<p>Please contact our support team to initiate a return.</p>
|
|
</div>
|
|
|
|
<div id="reviews" class="tab-content">
|
|
<h2>Customer Reviews</h2>
|
|
<div class="review-summary">
|
|
<span class="avg-rating">[4.5/5 Stars]</span>
|
|
<span class="total-reviews">(Based on XX reviews)</span>
|
|
</div>
|
|
<div class="review-list">
|
|
<div class="customer-review">
|
|
<div class="review-header">
|
|
<span class="reviewer-name">[Customer Name 1]</span>
|
|
<span class="review-stars">★★★★★</span>
|
|
<span class="review-date">[Date: e.g., January 15, 2023]</span>
|
|
</div>
|
|
<p class="review-title">[Review Title: e.g., Absolutely Stunning!]</p>
|
|
<p class="review-text">[Review text: "The craftsmanship is superb, and it looks even better in person. So happy with this unique piece!"]</p>
|
|
</div>
|
|
<div class="customer-review">
|
|
<div class="review-header">
|
|
<span class="reviewer-name">[Customer Name 2]</span>
|
|
<span class="review-stars">★★★★☆</span>
|
|
<span class="review-date">[Date: e.g., February 2, 2023]</span>
|
|
</div>
|
|
<p class="review-title">[Review Title: e.g., Great Gift Idea]</p>
|
|
<p class="review-text">[Review text: "Bought this as a gift, and my friend loved it. The quality is excellent for a handmade item."]</p>
|
|
</div>
|
|
</div>
|
|
<button class="write-review-button">Write a Review</button>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="related-products">
|
|
<h2>You might also like...</h2>
|
|
<div class="product-carousel">
|
|
<div class="related-product-item">
|
|
<img src="[Related Product 1 Image URL]" alt="[Related Product 1 Title]">
|
|
<h3><a href="#">[Related Product 1 Title]</a></h3>
|
|
<p class="price">[Price]</p>
|
|
</div>
|
|
<div class="related-product-item">
|
|
<img src="[Related Product 2 Image URL]" alt="[Related Product 2 Title]">
|
|
<h3><a href="#">[Related Product 2 Title]</a></h3>
|
|
<p class="price">[Price]</p>
|
|
</div>
|
|
<div class="related-product-item">
|
|
<img src="[Related Product 3 Image URL]" alt="[Related Product 3 Title]">
|
|
<h3><a href="#">[Related Product 3 Title]</a></h3>
|
|
<p class="price">[Price]</p>
|
|
</div>
|
|
<!-- More related products -->
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Add to Cart Section</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<section class="product-add-to-cart-section" aria-labelledby="productTitle">
|
|
<h1 id="productTitle">Hand-Carved Wooden Owl Figurine</h1>
|
|
|
|
<p class="product-price" aria-live="polite" aria-atomic="true">$29.99</p>
|
|
|
|
<form action="/add-to-cart" method="post">
|
|
<div class="product-options">
|
|
<div class="product-option-group">
|
|
<label for="material-option">Material:</label>
|
|
<select id="material-option" name="material" aria-required="true">
|
|
<option value="">Select Material</option>
|
|
<option value="oak">Oak</option>
|
|
<option value="maple">Maple</option>
|
|
<option value="walnut">Walnut</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="product-option-group">
|
|
<label for="finish-option">Finish:</label>
|
|
<select id="finish-option" name="finish">
|
|
<option value="">Select Finish</option>
|
|
<option value="natural">Natural</option>
|
|
<option value="glossy">Glossy</option>
|
|
<option value="matte">Matte</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quantity-selector">
|
|
<label for="quantity">Quantity:</label>
|
|
<div class="quantity-input-wrapper">
|
|
<button type="button" class="quantity-button" aria-label="Decrease quantity">-</button>
|
|
<input type="number" id="quantity" name="quantity" value="1" min="1" max="99" aria-label="Product quantity" inputmode="numeric">
|
|
<button type="button" class="quantity-button" aria-label="Increase quantity">+</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="availability-message in-stock" aria-live="polite">In Stock</p>
|
|
<!-- Example for other states:
|
|
<p class="availability-message low-stock" aria-live="polite">Low Stock! Only 3 left.</p>
|
|
<p class="availability-message out-of-stock" aria-live="polite">Out of Stock</p>
|
|
-->
|
|
|
|
<button type="submit" class="add-to-cart-button">Add to Cart</button>
|
|
</form>
|
|
</section>
|
|
|
|
<script>
|
|
// Basic JavaScript for quantity buttons (for demonstration)
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const quantityInput = document.getElementById('quantity');
|
|
const decreaseBtn = quantityInput.previousElementSibling;
|
|
const increaseBtn = quantityInput.nextElementSibling;
|
|
|
|
decreaseBtn.addEventListener('click', () => {
|
|
let currentValue = parseInt(quantityInput.value);
|
|
if (currentValue > parseInt(quantityInput.min)) {
|
|
quantityInput.value = currentValue - 1;
|
|
}
|
|
});
|
|
|
|
increaseBtn.addEventListener('click', () => {
|
|
let currentValue = parseInt(quantityInput.value);
|
|
if (currentValue < parseInt(quantityInput.max)) {
|
|
quantityInput.value = currentValue + 1;
|
|
}
|
|
});
|
|
|
|
// Ensure quantity input always has a valid number
|
|
quantityInput.addEventListener('change', () => {
|
|
let val = parseInt(quantityInput.value);
|
|
if (isNaN(val) || val < parseInt(quantityInput.min)) {
|
|
quantityInput.value = quantityInput.min;
|
|
} else if (val > parseInt(quantityInput.max)) {
|
|
quantityInput.value = quantityInput.max;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<section class="related-products">
|
|
<h2>You might also like</h2>
|
|
<div class="product-grid">
|
|
<a href="#" class="product-card">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Handmade Clay Pottery">
|
|
</div>
|
|
<div class="product-details">
|
|
<h3 class="product-name">Rustic Clay Vase</h3>
|
|
<p class="product-price">$45.00</p>
|
|
<button class="view-product-button">View Product</button>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="product-card">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Knitted Wool Blanket">
|
|
</div>
|
|
<div class="product-details">
|
|
<h3 class="product-name">Cozy Knitted Throw</h3>
|
|
<p class="product-price">$79.99</p>
|
|
<button class="view-product-button">View Product</button>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="product-card">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Artisan Leather Wallet">
|
|
</div>
|
|
<div class="product-details">
|
|
<h3 class="product-name">Hand-Stitched Wallet</h3>
|
|
<p class="product-price">$55.50</p>
|
|
<button class="view-product-button">View Product</button>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="product-card">
|
|
<div class="product-image-wrapper">
|
|
<img src="https://via.placeholder.com/250x250?text=Product+Image" alt="Custom Engraved Jewelry">
|
|
</div>
|
|
<div class="product-details">
|
|
<h3 class="product-name">Personalized Pendant</h3>
|
|
<p class="product-price">$30.00</p>
|
|
<button class="view-product-button">View Product</button>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section id="customer-reviews" class="customer-reviews-section">
|
|
<div class="container">
|
|
<h2 class="section-title">What Our Customers Are Saying</h2>
|
|
|
|
<div class="reviews-summary">
|
|
<div class="overall-rating">
|
|
<span class="rating-value">4.8</span> out of 5 stars
|
|
<div class="stars" role="img" aria-label="Overall rating of 4.8 out of 5 stars">
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-half-filled"></span>
|
|
</div>
|
|
<p class="review-count">(Based on 750+ reviews)</p>
|
|
</div>
|
|
<a href="#leave-review-form" class="button primary-button">Leave a Review</a>
|
|
</div>
|
|
|
|
<div class="reviews-grid">
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="stars" role="img" aria-label="Rated 5 out of 5 stars">
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
</div>
|
|
<span class="review-date">January 15, 2024</span>
|
|
</div>
|
|
<h3 class="review-title">Absolutely Stunning Craftsmanship!</h3>
|
|
<p class="review-text">I ordered the handcrafted wooden jewelry box, and it exceeded all my expectations. The detail is incredible, and it feels so sturdy and well-made. Highly recommend this store for unique, quality items!</p>
|
|
<div class="review-author">
|
|
<span class="author-name">Sarah L.</span>
|
|
<span class="verified-buyer">Verified Buyer</span>
|
|
</div>
|
|
<p class="product-reviewed"><a href="#product-rustic-charm-necklace">Product: Rustic Charm Necklace</a></p>
|
|
</article>
|
|
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="stars" role="img" aria-label="Rated 4 out of 5 stars">
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-empty"></span>
|
|
</div>
|
|
<span class="review-date">January 08, 2024</span>
|
|
</div>
|
|
<h3 class="review-title">Beautiful Product, Fast Shipping</h3>
|
|
<p class="review-text">My custom-painted ceramic mug arrived quickly and was even more vibrant in person. The packaging was secure. Minor detail: the color was slightly different than on screen, but still lovely. Very happy overall!</p>
|
|
<div class="review-author">
|
|
<span class="author-name">Mark T.</span>
|
|
<span class="verified-buyer">Verified Buyer</span>
|
|
</div>
|
|
<p class="product-reviewed"><a href="#product-hand-painted-ceramic-mug">Product: Hand-Painted Ceramic Mug</a></p>
|
|
</article>
|
|
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="stars" role="img" aria-label="Rated 5 out of 5 stars">
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
</div>
|
|
<span class="review-date">December 28, 2023</span>
|
|
</div>
|
|
<h3 class="review-title">Perfect Gift Idea!</h3>
|
|
<p class="review-text">I bought a custom leather journal for my friend, and she absolutely adores it. The quality of the leather is premium, and the engraving was flawless. Will definitely purchase from here again for unique gifts.</p>
|
|
<div class="review-author">
|
|
<span class="author-name">Jessica R.</span>
|
|
<span class="verified-buyer">Verified Buyer</span>
|
|
</div>
|
|
<p class="product-reviewed"><a href="#product-personalized-leather-journal">Product: Personalized Leather Journal</a></p>
|
|
</article>
|
|
|
|
<article class="review-card">
|
|
<div class="review-header">
|
|
<div class="stars" role="img" aria-label="Rated 4 out of 5 stars">
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-filled"></span>
|
|
<span class="star star-empty"></span>
|
|
</div>
|
|
<span class="review-date">December 20, 2023</span>
|
|
</div>
|
|
<h3 class="review-title">Good Quality, Minor Shipping Delay</h3>
|
|
<p class="review-text">The handmade soap set smells wonderful and feels great on the skin. The packaging was lovely. There was a slight delay in shipping, but customer service was responsive and helpful.</p>
|
|
<div class="review-author">
|
|
<span class="author-name">Chris P.</span>
|
|
<span class="verified-buyer">Verified Buyer</span>
|
|
</div>
|
|
<p class="product-reviewed"><a href="#product-artisan-soap-collection">Product: Artisan Soap Collection</a></p>
|
|
</article>
|
|
|
|
</div>
|
|
<div class="view-more">
|
|
<a href="#all-reviews" class="button secondary-button">View All Reviews</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Handmade Haven</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1-800-CRAFTS-U</span><br></br><a href="mailto:info@relume.io">support@handmadehaven.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help & FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|
</body>
|
|
</html> |