Real-World Projects
Production-quality website projects with complete code.
ShopEase — E-Commerce Storefront
- Sticky navigation with cart icon and count badge
- Hero banner with promotional text and CTA
- Product grid with images, ratings, prices, and "Add to Cart"
- Responsive layout — single column on mobile
- Multi-column footer with links and contact info
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopEase - Online Store</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; color: #333; }
/* Navigation */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 100;
}
.navbar .logo { font-size: 1.5rem; font-weight: bold; color: #e74c3c; }
.navbar nav a {
margin-left: 2rem;
text-decoration: none;
color: #333;
font-weight: 500;
}
.cart-icon { position: relative; }
.cart-count {
position: absolute;
top: -8px; right: -8px;
background: #e74c3c;
color: white;
width: 20px; height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
}
/* Hero Banner */
.hero-banner {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-align: center;
padding: 5rem 2rem;
}
.hero-banner h1 { font-size: 3rem; margin-bottom: 1rem; }
.hero-banner .btn-shop {
display: inline-block;
padding: 1rem 2.5rem;
background: white;
color: #667eea;
border-radius: 25px;
text-decoration: none;
font-weight: bold;
margin-top: 1rem;
}
/* Product Grid */
.products { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; }
.products h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; }
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.product-card:hover { transform: translateY(-5px); }
.product-card img { width: 100%; height: 250px; object-fit: cover; }
.product-card .info { padding: 1.5rem; }
.product-card .info h3 { margin-bottom: 0.5rem; }
.product-card .info .price { color: #e74c3c; font-size: 1.3rem; font-weight: bold; }
.product-card .info .rating { color: #f39c12; font-size: 0.9rem; }
.btn-add {
display: block;
width: 100%;
padding: 0.75rem;
background: #333;
color: white;
border: none;
cursor: pointer;
font-size: 1rem;
margin-top: 1rem;
border-radius: 6px;
}
.btn-add:hover { background: #555; }
/* Footer */
.footer {
background: #1a1a1a;
color: #aaa;
padding: 3rem 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.footer h4 { color: white; margin-bottom: 1rem; }
.footer a { color: #aaa; text-decoration: none; display: block; margin-bottom: 0.5rem; }
.footer a:hover { color: white; }
@media (max-width: 768px) {
.hero-banner h1 { font-size: 2rem; }
.navbar nav { display: none; }
}
</style>
</head>
<body>
<nav class="navbar">
<span class="logo">ShopEase</span>
<nav>
<a href="#">Home</a>
<a href="#">Shop</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="cart-icon">
🛒 <span class="cart-count">3</span>
</div>
</nav>
<section class="hero-banner">
<h1>Spring Collection 2024</h1>
<p>Up to 40% off on selected items</p>
<a href="#" class="btn-shop">Shop Now</a>
</section>
<section class="products">
<h2>Featured Products</h2>
<div class="product-grid">
<div class="product-card">
<img src="https://picsum.photos/300/250?1" alt="Product">
<div class="info">
<h3>Classic White Sneakers</h3>
<div class="rating">★★★★★ (128)</div>
<p class="price">$89.99</p>
<button class="btn-add">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://picsum.photos/300/250?2" alt="Product">
<div class="info">
<h3>Leather Crossbody Bag</h3>
<div class="rating">★★★★☆ (94)</div>
<p class="price">$129.99</p>
<button class="btn-add">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://picsum.photos/300/250?3" alt="Product">
<div class="info">
<h3>Minimalist Watch</h3>
<div class="rating">★★★★★ (203)</div>
<p class="price">$199.99</p>
<button class="btn-add">Add to Cart</button>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-grid">
<div><h4>ShopEase</h4><p>Your one-stop online store for quality products.</p></div>
<div><h4>Quick Links</h4><a href="#">Home</a><a href="#">Shop</a><a href="#">About</a></div>
<div><h4>Support</h4><a href="#">FAQ</a><a href="#">Shipping</a><a href="#">Returns</a></div>
<div><h4>Contact</h4><p>[email protected]</p><p>+1 234 567 890</p></div>
</div>
</footer>
</body>
</html>