281 lines
15 KiB
HTML
281 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>shopping_cart</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>
|
|
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Handcrafted with Heart</p><h2 class="text-2-heading">Unearth Authentic Handmade Treasures</h2><p class="text-2-description">Explore a curated collection of unique, handcrafted goods made with passion and precision. From charming decor to personalized gifts, find pieces that tell a story and add warmth to your life.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Explore Our Collections</button><button class="text-2-btn text-2-outline">Discover Our Story</button></div></section></div>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cart Item List</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<section class="cart-section" aria-labelledby="cart-heading">
|
|
<h2 id="cart-heading">Your Shopping Cart</h2>
|
|
|
|
<div class="cart-item-list">
|
|
<!-- Cart Item 1 -->
|
|
<article class="cart-item" aria-label="Craft item: Rustic Wooden Clock">
|
|
<img src="https://via.placeholder.com/100x100/f3f4f6/555555?text=Product+Image" alt="Rustic Wooden Clock" class="cart-item-image">
|
|
<div class="cart-item-details">
|
|
<h3>Rustic Wooden Clock</h3>
|
|
<p>Hand-carved, natural finish</p>
|
|
</div>
|
|
<div class="cart-item-actions">
|
|
<div class="quantity-control">
|
|
<button type="button" aria-label="Decrease quantity of Rustic Wooden Clock">-</button>
|
|
<span aria-live="polite" aria-atomic="true">1</span>
|
|
<button type="button" aria-label="Increase quantity of Rustic Wooden Clock">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="cart-item-price" aria-label="Price: $49.99">$49.99</div>
|
|
<button type="button" class="remove-item-button" aria-label="Remove Rustic Wooden Clock from cart">
|
|
✕ <!-- Unicode for multiplication sign (X) -->
|
|
</button>
|
|
</article>
|
|
|
|
<!-- Cart Item 2 -->
|
|
<article class="cart-item" aria-label="Craft item: Ceramic Coffee Mug Set">
|
|
<img src="https://via.placeholder.com/100x100/e0e0e0/333333?text=Product+Image" alt="Ceramic Coffee Mug Set" class="cart-item-image">
|
|
<div class="cart-item-details">
|
|
<h3>Ceramic Coffee Mug Set (Set of 2)</h3>
|
|
<p>Hand-painted, microwave safe</p>
|
|
</div>
|
|
<div class="cart-item-actions">
|
|
<div class="quantity-control">
|
|
<button type="button" aria-label="Decrease quantity of Ceramic Coffee Mug Set">-</button>
|
|
<span aria-live="polite" aria-atomic="true">1</span>
|
|
<button type="button" aria-label="Increase quantity of Ceramic Coffee Mug Set">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="cart-item-price" aria-label="Price: $29.50">$29.50</div>
|
|
<button type="button" class="remove-item-button" aria-label="Remove Ceramic Coffee Mug Set from cart">
|
|
✕
|
|
</button>
|
|
</article>
|
|
|
|
<!-- Cart Item 3 -->
|
|
<article class="cart-item" aria-label="Craft item: Artisan Leather Wallet">
|
|
<img src="https://via.placeholder.com/100x100/d5d5d5/222222?text=Product+Image" alt="Artisan Leather Wallet" class="cart-item-image">
|
|
<div class="cart-item-details">
|
|
<h3>Artisan Leather Wallet</h3>
|
|
<p>Genuine leather, handcrafted stitching</p>
|
|
</div>
|
|
<div class="cart-item-actions">
|
|
<div class="quantity-control">
|
|
<button type="button" aria-label="Decrease quantity of Artisan Leather Wallet">-</button>
|
|
<span aria-live="polite" aria-atomic="true">2</span>
|
|
<button type="button" aria-label="Increase quantity of Artisan Leather Wallet">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="cart-item-price" aria-label="Price: $70.00">$70.00</div>
|
|
<button type="button" class="remove-item-button" aria-label="Remove Artisan Leather Wallet from cart">
|
|
✕
|
|
</button>
|
|
</article>
|
|
|
|
<!-- Example of an empty cart message (uncomment to see) -->
|
|
<!--
|
|
<div class="empty-cart-message" role="status">
|
|
Your cart is currently empty. Start browsing our beautiful crafts!
|
|
</div>
|
|
-->
|
|
|
|
</div>
|
|
|
|
<aside class="cart-summary" aria-labelledby="summary-heading">
|
|
<h3 id="summary-heading" style="display: none;">Order Summary</h3> <!-- Hidden, used for accessibility -->
|
|
<div class="summary-row">
|
|
<span>Subtotal:</span>
|
|
<span>$219.49</span> <!-- (49.99 + 29.50 + 70.00*2) - Update dynamically -->
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Shipping:</span>
|
|
<span>$10.00</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Tax (GST):</span>
|
|
<span>$8.78</span>
|
|
</div>
|
|
<div class="summary-row total">
|
|
<span>Order Total:</span>
|
|
<span>$238.27</span>
|
|
</div>
|
|
<button type="button" class="checkout-button">Proceed to Checkout</button>
|
|
</aside>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cart Summary</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<section class="cart-summary" aria-labelledby="cart-summary-heading">
|
|
<h2 id="cart-summary-heading">Your Cart Summary</h2>
|
|
|
|
<div class="cart-items">
|
|
<!-- Cart Item 1 -->
|
|
<article class="cart-item" aria-labelledby="item-name-1">
|
|
<div class="item-image">
|
|
<!-- Placeholder for product image -->
|
|
<img src="https://via.placeholder.com/100x100/FFC107/FFFFFF?text=Craft+Item+1" alt="Handmade Ceramic Mug">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 id="item-name-1">Handmade Ceramic Mug</h3>
|
|
<p>SKU: CMUG001</p>
|
|
<p>Color: Ocean Blue</p>
|
|
</div>
|
|
<div class="item-actions">
|
|
<div class="item-quantity">
|
|
<label for="qty-1" class="sr-only">Quantity for Handmade Ceramic Mug</label>
|
|
<input type="number" id="qty-1" value="1" min="1" aria-label="Quantity">
|
|
</div>
|
|
<div class="item-price" aria-label="Price">$18.99</div>
|
|
<button class="remove-item" aria-label="Remove Handmade Ceramic Mug from cart">Remove</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Cart Item 2 -->
|
|
<article class="cart-item" aria-labelledby="item-name-2">
|
|
<div class="item-image">
|
|
<!-- Placeholder for product image -->
|
|
<img src="https://via.placeholder.com/100x100/5C6BC0/FFFFFF?text=Craft+Item+2" alt="Artisanal Leather Journal">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 id="item-name-2">Artisanal Leather Journal</h3>
|
|
<p>SKU: LJO005</p>
|
|
<p>Size: A5</p>
|
|
</div>
|
|
<div class="item-actions">
|
|
<div class="item-quantity">
|
|
<label for="qty-2" class="sr-only">Quantity for Artisanal Leather Journal</label>
|
|
<input type="number" id="qty-2" value="2" min="1" aria-label="Quantity">
|
|
</div>
|
|
<div class="item-price" aria-label="Price">$35.00</div>
|
|
<button class="remove-item" aria-label="Remove Artisanal Leather Journal from cart">Remove</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Cart Item 3 (Example: more items, or remove some for testing empty state) -->
|
|
<article class="cart-item" aria-labelledby="item-name-3">
|
|
<div class="item-image">
|
|
<!-- Placeholder for product image -->
|
|
<img src="https://via.placeholder.com/100x100/4CAF50/FFFFFF?text=Craft+Item+3" alt="Hand-knitted Wool Scarf">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 id="item-name-3">Hand-knitted Wool Scarf</h3>
|
|
<p>SKU: KNIT010</p>
|
|
<p>Material: Merino Wool</p>
|
|
</div>
|
|
<div class="item-actions">
|
|
<div class="item-quantity">
|
|
<label for="qty-3" class="sr-only">Quantity for Hand-knitted Wool Scarf</label>
|
|
<input type="number" id="qty-3" value="1" min="1" aria-label="Quantity">
|
|
</div>
|
|
<div class="item-price" aria-label="Price">$25.50</div>
|
|
<button class="remove-item" aria-label="Remove Hand-knitted Wool Scarf from cart">Remove</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="cart-summary-totals">
|
|
<div>
|
|
<span>Subtotal:</span>
|
|
<span id="cart-subtotal">$94.49</span>
|
|
</div>
|
|
<div>
|
|
<span>Shipping:</span>
|
|
<span id="cart-shipping">$5.00</span>
|
|
</div>
|
|
<div>
|
|
<span>Tax (5%):</span>
|
|
<span id="cart-tax">$4.72</span>
|
|
</div>
|
|
<div class="total-amount">
|
|
<span>Total:</span>
|
|
<span id="cart-total">$104.21</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cart-actions">
|
|
<a href="#" class="button button-secondary" role="button" aria-label="Continue shopping">Continue Shopping</a>
|
|
<a href="#" class="button button-primary" role="button" aria-label="Proceed to checkout">Proceed to Checkout</a>
|
|
</div>
|
|
|
|
<!-- Optional: Example of an empty cart state (uncomment to see) -->
|
|
<!--
|
|
<div class="cart-empty">
|
|
<p>Your cart is currently empty.</p>
|
|
<a href="#" class="button button-primary">Start Shopping</a>
|
|
</div>
|
|
-->
|
|
</section>
|
|
|
|
</body>
|
|
</html>
|
|
<section class="checkout-section">
|
|
<div class="checkout-summary">
|
|
<p class="summary-line subtotal">
|
|
<span class="summary-label">Subtotal:</span>
|
|
<span class="summary-value">$[Cart Subtotal Placeholder]</span>
|
|
</p>
|
|
<p class="summary-line total">
|
|
<span class="summary-label">Total:</span>
|
|
<span class="summary-value">$[Final Total Placeholder]</span>
|
|
</p>
|
|
</div>
|
|
<div class="checkout-actions">
|
|
<button type="button" class="proceed-to-checkout-button">Proceed to Checkout</button>
|
|
</div>
|
|
</section>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Continue Shopping</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<section class="continue-shopping-section" aria-labelledby="continueShoppingHeading">
|
|
<h2 id="continueShoppingHeading">Shopping Cart Updated!</h2>
|
|
<p>Your cart has been successfully updated. Ready to explore more unique crafts?</p>
|
|
<a href="/products" class="continue-shopping-link" aria-label="Continue shopping and browse more products">
|
|
Browse More Products
|
|
</a>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<section class="empty-cart-message" aria-labelledby="emptyCartHeading">
|
|
<div class="empty-cart-container">
|
|
<div class="empty-cart-icon-wrapper">
|
|
<!-- Placeholder for an empty cart icon -->
|
|
<span class="empty-cart-icon" aria-hidden="true">🛒</span>
|
|
</div>
|
|
<h2 id="emptyCartHeading" class="empty-cart-title">Your Cart is Empty</h2>
|
|
<p class="empty-cart-description">
|
|
Looks like you haven't added any beautiful handmade crafts yet.
|
|
Let's find something special for you!
|
|
</p>
|
|
<a href="/products" class="empty-cart-button">Start Shopping</a>
|
|
</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">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With 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>© 2024 Crafted Wonders. All rights reserved.</p><ul class="footer-1-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> |