<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIVI Jewelry</title>

<style>

body{
margin:0;
font-family:Helvetica,Arial;
background:#faf9f7;
color:#111;
}

/* NAVBAR */
nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:white;
position:sticky;
top:0;
}

.logo{
font-size:26px;
letter-spacing:8px;
font-weight:bold;
}

.cart{
cursor:pointer;
}

/* HERO */
.hero{
height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero button{
padding:15px 35px;
background:black;
color:white;
border:none;
cursor:pointer;
}

/* PRODUCTS */
.products{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
padding:60px;
}

.card{
background:white;
width:260px;
padding:20px;
text-align:center;
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
}

.card img{
width:100%;
height:260px;
object-fit:cover;
}

button.buy{
margin-top:10px;
padding:10px 20px;
border:none;
background:black;
color:white;
cursor:pointer;
}

/* CART PANEL */
.cart-panel{
position:fixed;
right:-400px;
top:0;
width:350px;
height:100%;
background:white;
box-shadow:-3px 0 10px rgba(0,0,0,0.1);
padding:20px;
transition:.4s;
overflow:auto;
}

.cart-panel.active{
right:0;
}

footer{
text-align:center;
padding:40px;
}

</style>
</head>

<body>

<section class="hero">
<h1>Everyday Jewelry by VIVI</h1>
<p>Minimal. Timeless. Effortless.</p>
<button onclick="scrollToProducts()">Shop Now</button>
</section>

<div class="card">
<img src="https://images.unsplash.com/photo-1611652022419-a9419f74343d">
<h3>Gold Necklace</h3>
<p>$39</p>
<button class="buy" onclick="addToCart('Gold Necklace',39)">Add to Cart</button>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1602752250015-52934bc45613">
<h3>Minimal Ring</h3>
<p>$29</p>
<button class="buy" onclick="addToCart('Minimal Ring',29)">Add to Cart</button>
</div>

<div class="card">
<img src="https://images.unsplash.com/photo-1588444650733-d9c1a9e9cc54">
<h3>Elegant Bracelet</h3>
<p>$35</p>
<button class="buy" onclick="addToCart('Bracelet',35)">Add to Cart</button>
</div>

</section>

<div class="cart-panel" id="cart">
<h2>Your Cart</h2>
<ul id="cart-items"></ul>
<h3 id="total">Total: $0</h3>
<button class="buy">Checkout</button>
</div>

let cart=[]
let total=0

function toggleCart(){
document.getElementById("cart").classList.toggle("active")
}

function addToCart(name,price){
cart.push({name,price})
total+=price
updateCart()
toggleCart()
}

function updateCart(){
let list=document.getElementById("cart-items")
list.innerHTML=""
cart.forEach(item=>{
let li=document.createElement("li")
li.textContent=item.name+" - $"+item.price
list.appendChild(li)
})
document.getElementById("total").innerText="Total: $"+total
}

function scrollToProducts(){
document.getElementById("shop").scrollIntoView({behavior:"smooth"})
}

</script>

</body>
</html>