body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
/* Header */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
.cart-icon {
position: relative;
font-size: 1.5rem;
cursor: pointer;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f8f9fa" width="1200" height="600"/><path fill="%23e9ecef" d="M0 300 Q300 0 600 300 T1200 300 V600 H0 Z"/></svg>');
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
margin-top: 70px;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}
.hero-content p {
font-size: 1.3rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease 0.2s both;
}
.cta-button {
display: inline-block;
background: #ff6b6b;
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s;
animation: fadeInUp 1s ease 0.4s both;
}
.cta-button:hover {
background: #ff5252;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(255,107,107,0.3);
}
/* Products Section */
.products {
padding: 100px 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #333;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.product-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.product-image {
height: 250px;
background: linear-gradient(45deg, #f0f2f5, #e9ecef);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: #999;
}
.product-info {
padding: 1.5rem;
}
.product-title {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: #333;
}
.product-price {
font-size: 1.5rem;
font-weight: bold;
color: #ff6b6b;
margin-bottom: 1rem;
}
.product-rating {
color: #ffa726;
margin-bottom: 1rem;
}
.add-to-cart {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
.add-to-cart:hover {
transform: scale(1.05);
}
/* Features Section */
.features {
background: #f8f9fa;
padding: 100px 2rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature {
text-align: center;
padding: 2rem;
}
.feature i {
font-size: 3rem;
color: #667eea;
margin-bottom: 1rem;
}
/* Footer */
footer {
background: #333;
color: white;
text-align: center;
padding: 3rem 2rem 1rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
margin-bottom: 1rem;
color: #ff6b6b;
}
.footer-section a {
color: #ccc;
text-decoration: none;
display: block;
margin-bottom: 0.5rem;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-content h1 {
font-size: 2.5rem;
}
.products {
padding: 80px 1rem;
}
}
/* Cart Modal */
.cart-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 2000;
}
.cart-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 2rem;
border-radius: 15px;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.close-cart {
float: right;
font-size: 2rem;
cursor: pointer;
color: #999;
}
</style>
StyleThread
0
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<h1>Premium Garments Collection</h1>
<p>Discover timeless style with our carefully curated collection of high-quality garments</p>
<a href="#products" class="cta-button">Shop Now</a>
</div>
</section>
<!-- Products Section -->
<section class="products" id="products">
<h2 class="section-title">Featured Collection</h2>
<div class="products-grid" id="productsGrid">
<!-- Products will be populated by JavaScript -->
</div>
</section>
<!-- Features Section -->
<section class="features">
<div class="features-grid">
<div class="feature">
<i class="fas fa-shipping-fast"></i>
<h3>Free Shipping</h3>
<p>Free shipping on orders over $50</p>
</div>
<div class="feature">
<i class="fas fa-undo"></i>
<h3>Easy Returns</h3>
<p>30-day hassle-free returns</p>
</div>
<div class="feature">
<i class="fas fa-credit-card"></i>
<h3>Secure Payment</h3>
<p>100% secure payment gateway</p>
</div>
<div class="feature">
<i class="fas fa-headset"></i>
<h3>24/7 Support</h3>
<p>Customer support available anytime</p>
</div>
</div>
</section>
<!-- Cart Modal -->
<div class="cart-modal" id="cartModal">
<div class="cart-content">
<span class="close-cart" onclick="toggleCart()">×</span>
<h2>Shopping Cart</h2>
<div id="cartItems"></div>
<div style="margin-top: 2rem; text-align: right;">
<h3>Total: $<span id="cartTotal">0</span></h3>
<button class="cta-button" style="width: 100%; margin-top: 1rem;" onclick="checkout()">Proceed to Checkout</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>StyleThread</h3>
<p>Your trusted source for premium garments and fashion essentials.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<a href="#home">Home</a>
<a href="#products">Shop</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<div class="footer-section">
<h3>Customer Care</h3>
<a href="#">Shipping Info</a>
<a href="#">Returns</a>
<a href="#">Size Guide</a>
<a href="#">FAQ</a>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<div style="font-size: 1.5rem; margin-top: 1rem;">
<i class="fab fa-facebook" style="margin: 0 1rem; color: #4267B2;"></i>
<i class="fab fa-instagram" style="margin: 0 1rem; color: #E4405F;"></i>
<i class="fab fa-twitter" style="margin: 0 1rem; color: #1DA1F2;"></i>
</div>
</div>
</div>
<p style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #555;">
© 2024 StyleThread Garments. All rights reserved.
</p>
</footer>
<script>
// Product data
const products = [
{ id: 1, name: "Classic White Shirt", price: 29.99, icon: "👔", rating: 4.8 },
{ id: 2, name: "Slim Fit Chinos", price: 49.99, icon: "👖", rating: 4.6 },
{ id: 3, name: "Cotton Polo Shirt", price: 34.99, icon: "👕", rating: 4.9 },
{ id: 4, name: "Denim Jacket", price: 69.99, icon: "🧥", rating: 4.7 },
{ id: 5, name: "Summer Dress", price: 59.99, icon: "👗", rating: 4.8 },
{ id: 6, name: "Leather Belt", price: 24.99, icon: "🥾", rating: 4.5 }
];
let cart = [];
// Initialize website
document.addEventListener('DOMContentLoaded', function() {
renderProducts();
});
function renderProducts() {
const grid = document.getElementById('productsGrid');
grid.innerHTML = products.map(product => `
<div class="product-card">
<div class="product-image">${product.icon}</div>
<div class="product-info">
<h3 class="product-title">${product.name}</h3>
<div class="product-rating">
${'★'.repeat(Math.floor(product.rating))}${'☆'.repeat(5-Math.floor(product.rating))}
<span style="font-size: 0.9rem; color: #666;">(${product.rating})</span>
</div>
<div class="product-price">$${product.price.toFixed(2)}</div>
<button class="add-to-cart" onclick="addToCart(${product.id})">
Add to Cart
</button>
</div>
</div>
`).join('');
}
function addToCart(productId) {
const product = products.find(p => p.id === productId);
const cartItem = cart.find(item => item.id === productId);
if (cartItem) {
cartItem.quantity += 1;
} else {
cart.push({ ...product, quantity: 1 });
}
updateCartCount();
showNotification('Added to cart!');
}
function updateCartCount() {
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
document.getElementById('cartCount').textContent = count;
}
function toggleCart() {
const modal = document.getElementById('cartModal');
modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
if (modal.style.display === 'block') renderCart();
}
function renderCart() {
const cartItems = document.getElementById('cartItems');
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
if (cart.length === 0) {
cartItems.innerHTML = '<p>Your cart is empty</p>';
} else {
cartItems.innerHTML = cart.map(item => `
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #eee;">
<div>
<h4>${item.name}</h4>
<p>$${item.price.toFixed(2)} x ${item.quantity}</p>
</div>
<div>
<button onclick="removeFromCart(${item.id})" style="background: #ff4757; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">Remove</button>
</div>
</div>
`).join('');
}
document.getElementById('cartTotal').textContent = total.toFixed(2);
}
function removeFromCart(productId) {
cart = cart.filter(item => item.id !== productId);
updateCartCount();
renderCart();
}
function checkout() {
if (cart.length === 0) {
alert('Your cart is empty!');
return;
}
alert('Proceeding to checkout... (This is a demo)');
cart = [];
updateCartCount();
toggleCart();
}
function showNotification(message) {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 100px;
right: 20px;
background: #4CAF50;
color: white;
padding: 1rem 2rem;
border-radius: 5px;
z