Amazon-Style Product Card Grid Using HTML & CS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aurora Product Grid | Learn with Arshyan</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6e7f4adf91.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="site-header">
<h1 class="brand">Aurora Shop</h1>
<div class="theme-toggle">
<input type="checkbox" id="toggle-theme" />
<label for="toggle-theme" class="switch">
<span class="slider">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</span>
</label>
</div>
</header>
<main class="product-grid">
<!-- 1 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://images.unsplash.com/photo-1684703147716-014da6a31aa3?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Wireless Headphones" />
</div>
<div class="product-info">
<h3>Wireless Headphones</h3>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p class="product-price">$129.99</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★★☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 2 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://images.unsplash.com/photo-1592925455477-cdc17ec9ec9d?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Smartphone Pro" />
</div>
<div class="product-info">
<h3>Smartphone Pro</h3>
<p class="product-price">$799.00</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★★☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 3 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://media.istockphoto.com/id/1128791436/photo/laptop-displaying-images-on-a-blog-on-a-white-table.webp?a=1&s=612x612&w=0&k=20&c=uHKbWBrrEbNwrBnukFWOAXbJa8iBt5sCjBV0DI0DmAo="
alt="Laptop" />
</div>
<div class="product-info">
<h3>Ultra Laptop</h3>
<p class="product-price">$1499.99</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★½☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 4 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://images.unsplash.com/photo-1606986601547-a4d886b671b2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGRzbHIlMjBjYW1lcmF8ZW58MHx8MHx8fDA%3D"
alt="DSLR Camera" />
</div>
<div class="product-info">
<h3>DSLR Camera</h3>
<p class="product-price">$499.99</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★☆☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 5 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHNtYXJ0d2F0Y2h8ZW58MHwwfDB8fHww"
alt="Smart Watch" />
</div>
<div class="product-info">
<h3>Smart Watch</h3>
<p class="product-price">$199.00</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★½☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 6 -->
<div class="product-card">
<div class="product-image">
<img decoding="async" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=400&q=80"
alt="Running Shoes" />
</div>
<div class="product-info">
<h3>Running Shoes</h3>
<p class="product-price">$89.99</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★★☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 7 -->
<div class="product-card">
<div class="product-image">
<img decoding="async" src="https://cdn.thewirecutter.com/wp-content/media/2025/03/BEST-MECHANICAL-KEYBOARDS-2048px-0673.jpg"
alt="Keyboard" />
</div>
<div class="product-info">
<h3>Mechanical Keyboard</h3>
<p class="product-price">$79.00</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★½☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 8 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://images.unsplash.com/photo-1526430752879-b9eb53fbd772?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Tablet" />
</div>
<div class="product-info">
<h3>Tablet S10</h3>
<p class="product-price">$299.00</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★☆☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 9 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://images.unsplash.com/photo-1629429407756-4a7703614972?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Z2FtaW5nJTIwaGVhZHNldHxlbnwwfDB8MHx8fDA%3D"
alt="Gaming Headset" />
</div>
<div class="product-info">
<h3>Gaming Headset</h3>
<p class="product-price">$59.00</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★½☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<!-- 10 -->
<div class="product-card">
<div class="product-image">
<img decoding="async"
src="https://plus.unsplash.com/premium_photo-1724092241795-3d3c7ce5b25a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE2fHx8ZW58MHx8fHx8"
alt="Monitor" />
</div>
<div class="product-info">
<h3>4K Monitor</h3>
<p class="product-price">$399.00</p>
<div class="product-rating"><i class="fas fa-star"></i> ★★★★☆</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
CSS
/* RESET + BASE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #fff;
color: #111;
line-height: 1.6;
}
img {
max-width: 100%;
display: block;
object-fit: contain;
}
/* HEADER */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #232f3e;
color: white;
}
.site-header .brand {
font-size: 1.5rem;
font-weight: 600;
}
/* THEME SWITCH STYLED LIKE A TOGGLE */
.theme-toggle {
position: relative;
width: 60px;
height: 30px;
}
.theme-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.switch {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 30px;
transition: 0.4s;
}
.slider {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 26px;
width: 26px;
left: 2px;
top: 2px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
font-size: 14px;
color: #111;
}
.switch .fa-moon {
display: none;
}
#toggle-theme:checked + .switch {
background-color: #4b5563;
}
#toggle-theme:checked + .switch .slider {
transform: translateX(30px);
}
#toggle-theme:checked + .switch .fa-sun {
display: none;
}
#toggle-theme:checked + .switch .fa-moon {
display: inline-block;
}
body.dark {
background-color: #121212;
color: #eee;
}
body.dark .site-header {
background-color: #1a1a1a;
}
body.dark .product-card {
background-color: #1e1e1e;
border-color: #333;
}
body.dark .add-to-cart {
background-color: #facc15;
color: #111;
}
/* GRID */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
padding: 2rem;
}
/* CARD */
.product-card {
border: 1px solid #ddd;
background-color: white;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: box-shadow 0.2s ease;
}
.product-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.product-image {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 1rem;
}
.product-image img {
height: 100%;
}
/* INFO */
.product-info h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.product-price {
color: #b12704;
font-weight: 600;
margin-bottom: 0.5rem;
}
.product-rating {
color: #f59e0b;
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* BUTTON */
.add-to-cart {
background-color: #ffd814;
color: #111;
border: none;
padding: 0.5rem;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s;
}
.add-to-cart:hover {
background-color: #f7ca00;
}
JavaScript
const toggle = document.getElementById('toggle-theme');
const body = document.body;
toggle.addEventListener('change', () => {
body.classList.toggle('dark');
localStorage.setItem('theme', body.classList.contains('dark') ? 'dark' : 'light');
});
window.addEventListener('DOMContentLoaded', () => {
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark');
toggle.checked = true;
}
});