<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<div class="container">
<!-- Cart Badge -->
<div class="cart-badge">
<i class="bi bi-cart3" style="font-size: 24px; color: #667eea;"></i>
<span>Cart</span>
<span class="cart-count" id="cartCount">0</span>
</div>
<!-- Toast Notification -->
<div class="toast-notification" id="toast">
<div class="toast-icon">
<i class="bi bi-check-lg"></i>
</div>
<div>
<strong>Added to Cart!</strong>
<p class="mb-0" style="font-size: 14px; color: #7f8c8d;">Product successfully added to your cart</p>
</div>
</div>
<div class="row justify-content-center">
<!-- Product Card 1 -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop" alt="Wireless Headphones">
<span class="badge-sale">-25% OFF</span>
<button class="wishlist-btn" onclick="toggleWishlist(this)">
<i class="bi bi-heart" style="font-size: 20px;"></i>
</button>
</div>
<div class="product-info">
<div class="product-category">Electronics</div>
<h3 class="product-title">Wireless Headphones Pro</h3>
<p class="product-description">Premium noise-cancelling headphones with 30-hour battery life</p>
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
<span>(4.5) 128 reviews</span>
</div>
<div class="price-section">
<span class="current-price">$149</span>
<span class="original-price">$199</span>
<span class="discount-badge">Save $50</span>
</div>
<ul class="features-list">
<li><i class="bi bi-check-circle-fill"></i> Free Shipping</li>
<li><i class="bi bi-check-circle-fill"></i> 2-Year Warranty</li>
<li><i class="bi bi-check-circle-fill"></i> 30-Day Returns</li>
</ul>
<div class="quantity-selector">
<button class="quantity-btn" onclick="decreaseQty(this)">-</button>
<input type="number" class="quantity-input" value="1" min="1" max="10" readonly>
<button class="quantity-btn" onclick="increaseQty(this)">+</button>
</div>
<button class="btn btn-add-cart" onclick="addToCart(this, 'Wireless Headphones Pro', 149)">
<i class="bi bi-cart-plus" style="font-size: 20px;"></i>
Add to Cart
</button>
<button class="btn btn-buy-now">Buy Now</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=400&fit=crop" alt="Smart Watch">
<span class="badge-new">NEW</span>
<button class="wishlist-btn" onclick="toggleWishlist(this)">
<i class="bi bi-heart" style="font-size: 20px;"></i>
</button>
</div>
<div class="product-info">
<div class="product-category">Wearables</div>
<h3 class="product-title">Smart Watch Series 5</h3>
<p class="product-description">Advanced fitness tracking with heart rate monitor and GPS</p>
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<span>(5.0) 256 reviews</span>
</div>
<div class="price-section">
<span class="current-price">$299</span>
</div>
<ul class="features-list">
<li><i class="bi bi-check-circle-fill"></i> Free Shipping</li>
<li><i class="bi bi-check-circle-fill"></i> 1-Year Warranty</li>
<li><i class="bi bi-check-circle-fill"></i> 14-Day Returns</li>
</ul>
<div class="quantity-selector">
<button class="quantity-btn" onclick="decreaseQty(this)">-</button>
<input type="number" class="quantity-input" value="1" min="1" max="10" readonly>
<button class="quantity-btn" onclick="increaseQty(this)">+</button>
</div>
<button class="btn btn-add-cart" onclick="addToCart(this, 'Smart Watch Series 5', 299)">
<i class="bi bi-cart-plus" style="font-size: 20px;"></i>
Add to Cart
</button>
<button class="btn btn-buy-now">Buy Now</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=400&h=400&fit=crop" alt="Sunglasses">
<span class="badge-sale">-15% OFF</span>
<button class="wishlist-btn" onclick="toggleWishlist(this)">
<i class="bi bi-heart" style="font-size: 20px;"></i>
</button>
</div>
<div class="product-info">
<div class="product-category">Fashion</div>
<h3 class="product-title">Designer Sunglasses</h3>
<p class="product-description">Polarized UV400 protection with premium metal frame</p>
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star"></i>
<span>(4.0) 89 reviews</span>
</div>
<div class="price-section">
<span class="current-price">$85</span>
<span class="original-price">$100</span>
<span class="discount-badge">Save $15</span>
</div>
<ul class="features-list">
<li><i class="bi bi-check-circle-fill"></i> Free Shipping</li>
<li><i class="bi bi-check-circle-fill"></i> 6-Month Warranty</li>
<li><i class="bi bi-check-circle-fill"></i> 30-Day Returns</li>
</ul>
<div class="quantity-selector">
<button class="quantity-btn" onclick="decreaseQty(this)">-</button>
<input type="number" class="quantity-input" value="1" min="1" max="10" readonly>
<button class="quantity-btn" onclick="increaseQty(this)">+</button>
</div>
<button class="btn btn-add-cart" onclick="addToCart(this, 'Designer Sunglasses', 85)">
<i class="bi bi-cart-plus" style="font-size: 20px;"></i>
Add to Cart
</button>
<button class="btn btn-buy-now">Buy Now</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 40px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.product-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
.product-image {
position: relative;
overflow: hidden;
height: 280px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.badge-sale {
position: absolute;
top: 15px;
left: 15px;
background: #ff4757;
color: white;
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 12px;
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
}
.badge-new {
position: absolute;
top: 15px;
right: 15px;
background: #2ed573;
color: white;
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 12px;
box-shadow: 0 4px 12px rgba(46, 213, 115, 0.4);
}
.wishlist-btn {
position: absolute;
bottom: 15px;
right: 15px;
width: 45px;
height: 45px;
background: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.wishlist-btn:hover {
background: #ff4757;
color: white;
transform: scale(1.1);
}
.wishlist-btn.active {
background: #ff4757;
color: white;
}
.product-info {
padding: 25px;
}
.product-category {
color: #7f8c8d;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 8px;
}
.product-title {
font-size: 22px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 12px;
}
.product-description {
color: #7f8c8d;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 15px;
}
.rating i {
color: #ffa502;
font-size: 16px;
}
.rating span {
color: #7f8c8d;
font-size: 14px;
margin-left: 5px;
}
.price-section {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.current-price {
font-size: 32px;
font-weight: 700;
color: #2ed573;
}
.original-price {
font-size: 20px;
color: #bdc3c7;
text-decoration: line-through;
}
.discount-badge {
background: #ffeaa7;
color: #d63031;
padding: 4px 10px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.quantity-btn {
width: 40px;
height: 40px;
border: 2px solid #dfe6e9;
background: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
.quantity-btn:hover {
border-color: #3498db;
color: #3498db;
background: #ecf6ff;
}
.quantity-input {
width: 60px;
height: 40px;
border: 2px solid #dfe6e9;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 16px;
}
.quantity-input:focus {
outline: none;
border-color: #3498db;
}
.btn-add-cart {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 14px 30px;
border-radius: 10px;
font-weight: 600;
font-size: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
.btn-add-cart:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}
.btn-add-cart:active {
transform: translateY(0);
}
.btn-add-cart.added {
background: linear-gradient(135deg, #2ed573 0%, #26de81 100%);
box-shadow: 0 8px 20px rgba(46, 213, 115, 0.3);
}
.btn-buy-now {
background: white;
color: #667eea;
border: 2px solid #667eea;
padding: 14px 30px;
border-radius: 10px;
font-weight: 600;
font-size: 16px;
width: 100%;
margin-top: 10px;
transition: all 0.3s;
}
.btn-buy-now:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
}
.features-list {
list-style: none;
padding: 0;
margin: 20px 0;
}
.features-list li {
padding: 8px 0;
color: #555;
display: flex;
align-items: center;
gap: 10px;
}
.features-list i {
color: #2ed573;
font-size: 18px;
}
.cart-badge {
position: fixed;
top: 30px;
right: 30px;
background: white;
padding: 15px 25px;
border-radius: 50px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
z-index: 1000;
transition: all 0.3s;
}
.cart-badge:hover {
transform: scale(1.05);
}
.cart-count {
background: #ff4757;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.toast-notification {
position: fixed;
top: 100px;
right: 30px;
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
display: none;
align-items: center;
gap: 15px;
z-index: 1001;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-notification.show {
display: flex;
}
.toast-icon {
width: 50px;
height: 50px;
background: #2ed573;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
@media (max-width: 768px) {
.cart-badge {
top: 15px;
right: 15px;
padding: 12px 20px;
}
.toast-notification {
top: 80px;
right: 15px;
left: 15px;
}
}
let cartItems = 0;
function increaseQty(btn) {
const input = btn.previousElementSibling;
const currentValue = parseInt(input.value);
if (currentValue < 10) {
input.value = currentValue + 1;
}
}
function decreaseQty(btn) {
const input = btn.nextElementSibling;
const currentValue = parseInt(input.value);
if (currentValue > 1) {
input.value = currentValue - 1;
}
}
function toggleWishlist(btn) {
btn.classList.toggle('active');
const icon = btn.querySelector('i');
if (btn.classList.contains('active')) {
icon.classList.remove('bi-heart');
icon.classList.add('bi-heart-fill');
} else {
icon.classList.remove('bi-heart-fill');
icon.classList.add('bi-heart');
}
}
function addToCart(btn, productName, price) {
const card = btn.closest('.product-card');
const qtyInput = card.querySelector('.quantity-input');
const quantity = parseInt(qtyInput.value);
// Update cart count
cartItems += quantity;
document.getElementById('cartCount').textContent = cartItems;
// Change button appearance
btn.classList.add('added');
btn.innerHTML = '<i class="bi bi-check-lg" style="font-size: 20px;"></i> Added to Cart';
// Show toast notification
const toast = document.getElementById('toast');
toast.classList.add('show');
// Reset button after 2 seconds
setTimeout(() => {
btn.classList.remove('added');
btn.innerHTML = '<i class="bi bi-cart-plus" style="font-size: 20px;"></i> Add to Cart';
}, 2000);
// Hide toast after 3 seconds
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
// Log to console (in real app, send to backend)
console.log('Added to cart:', {
product: productName,
price: price,
quantity: quantity,
total: price * quantity
});
}
No comments yet. Be the first!