<div class="shop-card">
<div class="image-box" id="product-bg">
<img src="https://placehold.co/300x300/ffffff/111827?text=Sneakers" alt="Product">
</div>
<div class="product-info">
<h2>Urban Running Shoes</h2>
<p class="price">$120.00</p>
<div class="color-picker">
<p>Select Color:</p>
<div class="color-buttons">
<button class="color-btn active" data-color="#f3f4f6" style="background-color: #f3f4f6;"></button>
<button class="color-btn" data-color="#fef08a" style="background-color: #fef08a;"></button>
<button class="color-btn" data-color="#fecaca" style="background-color: #fecaca;"></button>
<button class="color-btn" data-color="#bbf7d0" style="background-color: #bbf7d0;"></button>
</div>
</div>
<button class="add-cart">Add to Cart</button>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f8fafc;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.shop-card {
background: #ffffff;
border-radius: 24px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 350px;
}
.image-box {
background: #f3f4f6;
padding: 40px 20px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.4s ease;
}
.image-box img {
width: 100%;
max-width: 250px;
transform: rotate(-15deg);
transition: transform 0.4s ease;
}
.image-box:hover img {
transform: rotate(-5deg) scale(1.05);
}
.product-info {
padding: 30px;
}
.product-info h2 {
margin: 0 0 8px 0;
color: #0f172a;
font-size: 1.5rem;
}
.price {
color: #3b82f6;
font-weight: 700;
font-size: 1.25rem;
margin: 0 0 24px 0;
}
.color-picker p {
margin: 0 0 12px 0;
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
}
.color-buttons {
display: flex;
gap: 12px;
margin-bottom: 30px;
}
.color-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px #cbd5e1;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.color-btn.active {
box-shadow: 0 0 0 2px #0f172a;
transform: scale(1.1);
}
.add-cart {
width: 100%;
background: #0f172a;
color: #ffffff;
border: none;
padding: 16px;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.add-cart:hover {
background: #334155;
}
const bgContainer = document.getElementById("product-bg");
const buttons = document.querySelectorAll(".color-btn");
buttons.forEach(function(btn) {
btn.addEventListener("click", function() {
// Remove active class from all buttons
buttons.forEach(function(b) {
b.classList.remove("active");
});
// Add active class to clicked button
btn.classList.add("active");
// Change background color of the image box
const selectedColor = btn.getAttribute("data-color");
bgContainer.style.backgroundColor = selectedColor;
});
});
