Spaces:

abeea
/

D3

Running

App Files Files Community

abeea commited on Apr 4

Commit

044cb3e

verified ·

1 Parent(s): 5a57dbf

Update index.html

Browse files

Files changed (1) hide show

index.html +72 -84

index.html CHANGED Viewed

@@ -3,108 +3,100 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Luxury Jewellery</title>
 <style>
 :root {
-  --c1: #FAE5D7;
-  --c2: #FAD9D1;
-  --c3: #FACDCC;
-  --c4: #FAC0C6;
-  --c5: #FAB4C0;
-  --dark: #2b2b2b;
 }
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'Segoe UI', sans-serif;
 }
 body {
-  background: var(--c1);
   color: var(--dark);
 }
-/* NAVBAR */
 nav {
   display: flex;
   justify-content: space-between;
-  padding: 20px 40px;
-  background: white;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 }
 nav h1 {
   letter-spacing: 2px;
 }
 nav button {
-  background: var(--c5);
   border: none;
-  padding: 10px 15px;
-  border-radius: 20px;
   cursor: pointer;
 }
 /* HERO */
 .hero {
-  height: 80vh;
-  background: linear-gradient(to right, var(--c2), var(--c4));
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }
 .hero h2 {
-  font-size: 3rem;
-  margin-bottom: 10px;
 }
 .hero p {
-  opacity: 0.7;
-}
-/* FILTER */
-.filter {
-  text-align: center;
-  margin: 30px;
-}
-.filter button {
-  margin: 5px;
-  padding: 10px 15px;
-  border: none;
-  background: var(--c3);
-  border-radius: 20px;
-  cursor: pointer;
 }
 /* PRODUCTS */
 .products {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  padding: 40px;
-  gap: 25px;
 }
 .card {
   background: white;
   border-radius: 20px;
   overflow: hidden;
-  transition: 0.3s;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
 }
 .card:hover {
-  transform: translateY(-8px);
 }
 .card img {
   width: 100%;
-  height: 220px;
   object-fit: cover;
 }
@@ -112,39 +104,48 @@ nav button {
   padding: 20px;
 }
 .price {
-  color: #b76e79;
-  font-weight: bold;
 }
 .card button {
-  margin-top: 10px;
-  padding: 10px;
   width: 100%;
   border: none;
-  background: var(--c5);
   border-radius: 10px;
   cursor: pointer;
 }
 /* FOOTER */
 footer {
   text-align: center;
-  padding: 20px;
-  background: var(--c2);
-  margin-top: 40px;
 }
-/* CART POPUP */
 .cart {
   position: fixed;
   right: 20px;
-  top: 70px;
   background: white;
-  padding: 15px;
-  border-radius: 10px;
   display: none;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 </style>
 </head>
@@ -152,49 +153,43 @@ footer {
 <body>
 <nav>
-  <h1>💎 LUXE</h1>
   <button onclick="toggleCart()">Cart (<span id="count">0</span>)</button>
 </nav>
 <div class="hero">
   <div>
-    <h2>Elegant Jewellery</h2>
-    <p>Luxury crafted with love & perfection</p>
   </div>
 </div>
-<div class="filter">
-  <button onclick="filter('all')">All</button>
-  <button onclick="filter('ring')">Rings</button>
-  <button onclick="filter('necklace')">Necklace</button>
-</div>
 <div class="products" id="products"></div>
 <div class="cart" id="cartBox">
-  <h3>Cart Items</h3>
   <ul id="cartItems"></ul>
 </div>
 <footer>
-  © 2026 Luxury Jewellery Store
 </footer>
 <script>
 const products = [
-  {name:"Diamond Ring", price:120, type:"ring", img:"https://images.unsplash.com/photo-1602751584552-8ba73aad10e1"},
-  {name:"Gold Necklace", price:200, type:"necklace", img:"https://images.unsplash.com/photo-1617038220319-276d3cfab638"},
-  {name:"Rose Ring", price:150, type:"ring", img:"https://images.unsplash.com/photo-1588444650700-6c3b8f3bb3b5"},
-  {name:"Pearl Necklace", price:180, type:"necklace", img:"https://images.unsplash.com/photo-1603974372033-6f73c4f93a33"}
 ];
 let cart = [];
-function display(list){
   const container = document.getElementById("products");
   container.innerHTML = "";
-  list.forEach((p,i)=>{
     container.innerHTML += `
       <div class="card">
         <img src="${p.img}">
@@ -208,25 +203,18 @@ function display(list){
   });
 }
-function filter(type){
-  if(type === 'all') display(products);
-  else display(products.filter(p => p.type === type));
-}
 function addToCart(i){
   cart.push(products[i]);
   document.getElementById("count").innerText = cart.length;
-  const list = document.getElementById("cartItems");
-  list.innerHTML += `<li>${products[i].name}</li>`;
 }
 function toggleCart(){
-  const cartBox = document.getElementById("cartBox");
-  cartBox.style.display = cartBox.style.display === "block" ? "none" : "block";
 }
-display(products);
 </script>
 </body>

 <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 */
 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 */
 .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 */
 .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;
 }
   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 */
 footer {
   text-align: center;
+  padding: 30px;
+  background: var(--soft-pink);
+  margin-top: 50px;
 }
+/* CART */
 .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}">
   });
 }
 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>