| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Luxe Jewels</title> |
|
|
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| body { |
| background: #0f0f0f; |
| color: #fff; |
| } |
| |
| header { |
| display: flex; |
| justify-content: space-between; |
| padding: 20px 60px; |
| align-items: center; |
| background: rgba(0,0,0,0.6); |
| backdrop-filter: blur(10px); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .logo { |
| font-size: 24px; |
| font-weight: bold; |
| color: gold; |
| letter-spacing: 2px; |
| } |
| |
| nav a { |
| margin: 0 15px; |
| text-decoration: none; |
| color: #ddd; |
| transition: 0.3s; |
| } |
| |
| nav a:hover { |
| color: gold; |
| } |
| |
| .hero { |
| height: 90vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| background: linear-gradient(to bottom, rgba(0,0,0,0.6), #0f0f0f), |
| url('https://images.unsplash.com/photo-1515562141207-7a88fb7ce338'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .hero h1 { |
| font-size: 50px; |
| margin-bottom: 20px; |
| color: gold; |
| } |
| |
| .hero p { |
| margin-bottom: 30px; |
| color: #ccc; |
| } |
| |
| .btn { |
| padding: 12px 25px; |
| background: gold; |
| color: black; |
| border: none; |
| cursor: pointer; |
| border-radius: 30px; |
| font-weight: bold; |
| transition: 0.3s; |
| } |
| |
| .btn:hover { |
| background: #d4af37; |
| transform: scale(1.05); |
| } |
| |
| .section { |
| padding: 60px; |
| text-align: center; |
| } |
| |
| .section h2 { |
| margin-bottom: 40px; |
| color: gold; |
| } |
| |
| .products { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 25px; |
| } |
| |
| .card { |
| background: #1a1a1a; |
| border-radius: 15px; |
| overflow: hidden; |
| transition: 0.3s; |
| cursor: pointer; |
| } |
| |
| .card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 30px rgba(255,215,0,0.2); |
| } |
| |
| .card img { |
| width: 100%; |
| height: 250px; |
| object-fit: cover; |
| } |
| |
| .card-content { |
| padding: 15px; |
| } |
| |
| .price { |
| color: gold; |
| margin-top: 10px; |
| } |
| |
| footer { |
| background: #000; |
| text-align: center; |
| padding: 20px; |
| color: #aaa; |
| } |
| </style> |
| </head> |
|
|
| <body> |
|
|
| <header> |
| <div class="logo">LUXE</div> |
| <nav> |
| <a href="#">Home</a> |
| <a href="#">Collections</a> |
| <a href="#">About</a> |
| <a href="#">Contact</a> |
| </nav> |
| </header> |
|
|
| <section class="hero"> |
| <div> |
| <h1>Elegance in Every Sparkle</h1> |
| <p>Discover timeless jewellery crafted with perfection</p> |
| <button class="btn" onclick="scrollToProducts()">Explore Now</button> |
| </div> |
| </section> |
|
|
| <section class="section" id="products"> |
| <h2>Featured Collection</h2> |
| <div class="products"> |
|
|
| <div class="card"> |
| <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e"> |
| <div class="card-content"> |
| <h3>Diamond Ring</h3> |
| <p class="price">$499</p> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <img src="https://images.unsplash.com/photo-1588444650733-d45c64d0a1a3"> |
| <div class="card-content"> |
| <h3>Gold Necklace</h3> |
| <p class="price">$799</p> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f"> |
| <div class="card-content"> |
| <h3>Luxury Earrings</h3> |
| <p class="price">$299</p> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <img src="https://images.unsplash.com/photo-1617038220319-276d3cfab638"> |
| <div class="card-content"> |
| <h3>Bracelet</h3> |
| <p class="price">$199</p> |
| </div> |
| </div> |
|
|
| </div> |
| </section> |
|
|
| <footer> |
| © 2026 Luxe Jewellery — Designed with elegance |
| </footer> |
|
|
| <script> |
| function scrollToProducts() { |
| document.getElementById("products").scrollIntoView({ |
| behavior: "smooth" |
| }); |
| } |
| |
| |
| const cards = document.querySelectorAll('.card'); |
| |
| window.addEventListener('scroll', () => { |
| cards.forEach(card => { |
| const position = card.getBoundingClientRect().top; |
| const screen = window.innerHeight; |
| |
| if(position < screen - 100) { |
| card.style.opacity = "1"; |
| card.style.transform = "translateY(0)"; |
| } |
| }); |
| }); |
| |
| |
| cards.forEach(card => { |
| card.style.opacity = "0"; |
| card.style.transform = "translateY(50px)"; |
| card.style.transition = "0.6s"; |
| }); |
| </script> |
|
|
| </body> |
| </html> |
