| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Éclat Jewellery</title> |
|
|
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Poppins:wght@300;400&display=swap" rel="stylesheet"> |
|
|
| <style> |
| :root { |
| --bg: #fff8f6; |
| --soft-pink: #f8e1e7; |
| --rose: #e8b4b8; |
| --accent: #d4a373; |
| --dark: #2a2a2a; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| background: var(--bg); |
| font-family: 'Poppins', sans-serif; |
| color: var(--dark); |
| } |
| |
| |
| nav { |
| display: flex; |
| justify-content: space-between; |
| padding: 20px 60px; |
| position: sticky; |
| top: 0; |
| background: rgba(255,255,255,0.7); |
| backdrop-filter: blur(10px); |
| } |
| |
| nav h1 { |
| font-family: 'Playfair Display', serif; |
| letter-spacing: 2px; |
| } |
| |
| nav button { |
| background: var(--accent); |
| border: none; |
| padding: 10px 18px; |
| border-radius: 25px; |
| color: white; |
| cursor: pointer; |
| } |
| |
| |
| .hero { |
| height: 90vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: linear-gradient(135deg, #f8e1e7, #fff); |
| text-align: center; |
| } |
| |
| .hero h2 { |
| font-family: 'Playfair Display', serif; |
| font-size: 3.5rem; |
| } |
| |
| .hero p { |
| margin-top: 10px; |
| opacity: 0.6; |
| } |
| |
| |
| .products { |
| padding: 60px; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); |
| gap: 30px; |
| } |
| |
| .card { |
| background: white; |
| border-radius: 20px; |
| overflow: hidden; |
| transition: 0.4s; |
| box-shadow: 0 15px 30px rgba(0,0,0,0.05); |
| } |
| |
| .card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 25px 50px rgba(0,0,0,0.1); |
| } |
| |
| .card img { |
| width: 100%; |
| height: 260px; |
| object-fit: cover; |
| } |
| |
| .card-content { |
| padding: 20px; |
| } |
| |
| .card-content h3 { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .price { |
| color: var(--accent); |
| margin: 8px 0; |
| } |
| |
| .card button { |
| width: 100%; |
| padding: 10px; |
| border: none; |
| background: var(--dark); |
| color: white; |
| border-radius: 10px; |
| cursor: pointer; |
| transition: 0.3s; |
| } |
| |
| .card button:hover { |
| background: var(--accent); |
| } |
| |
| |
| footer { |
| text-align: center; |
| padding: 30px; |
| background: var(--soft-pink); |
| margin-top: 50px; |
| } |
| |
| |
| .cart { |
| position: fixed; |
| right: 20px; |
| top: 80px; |
| background: white; |
| padding: 20px; |
| border-radius: 15px; |
| display: none; |
| box-shadow: 0 15px 30px rgba(0,0,0,0.15); |
| } |
| </style> |
| </head> |
|
|
| <body> |
|
|
| <nav> |
| <h1>ÉCLAT</h1> |
| <button onclick="toggleCart()">Cart (<span id="count">0</span>)</button> |
| </nav> |
|
|
| <div class="hero"> |
| <div> |
| <h2>Timeless Elegance</h2> |
| <p>Crafted for moments that shine forever</p> |
| </div> |
| </div> |
|
|
| <div class="products" id="products"></div> |
|
|
| <div class="cart" id="cartBox"> |
| <h3>Your Cart</h3> |
| <ul id="cartItems"></ul> |
| </div> |
|
|
| <footer> |
| © 2026 Éclat Jewellery |
| </footer> |
|
|
| <script> |
| const products = [ |
| {name:"Diamond Ring", price:250, img:"https://images.unsplash.com/photo-1602751584552-8ba73aad10e1"}, |
| {name:"Gold Necklace", price:400, img:"https://images.unsplash.com/photo-1617038220319-276d3cfab638"}, |
| {name:"Luxury Bracelet", price:180, img:"https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f"}, |
| {name:"Pearl Set", price:350, img:"https://images.unsplash.com/photo-1603974372033-6f73c4f93a33"} |
| ]; |
| |
| let cart = []; |
| |
| function display(){ |
| const container = document.getElementById("products"); |
| container.innerHTML = ""; |
| |
| products.forEach((p,i)=>{ |
| container.innerHTML += ` |
| <div class="card"> |
| <img src="${p.img}"> |
| <div class="card-content"> |
| <h3>${p.name}</h3> |
| <p class="price">$${p.price}</p> |
| <button onclick="addToCart(${i})">Add to Cart</button> |
| </div> |
| </div> |
| `; |
| }); |
| } |
| |
| function addToCart(i){ |
| cart.push(products[i]); |
| document.getElementById("count").innerText = cart.length; |
| document.getElementById("cartItems").innerHTML += `<li>${products[i].name}</li>`; |
| } |
| |
| function toggleCart(){ |
| const c = document.getElementById("cartBox"); |
| c.style.display = c.style.display === "block" ? "none" : "block"; |
| } |
| |
| display(); |
| </script> |
|
|
| </body> |
| </html> |
