<!-- Header -->
<header class="header">
<div class="header-container">
<a href="https://www.homeofglitters.com" class="logo">Home of Glitters</a>
<nav class="nav">
<a href="https://www.homeofglitters.com">Shop</a>
<a href="https://www.homeofglitters.com">Collections</a>
<a href="https://www.homeofglitters.com">About</a>
<a href="https://www.homeofglitters.com">Contact</a>
</nav>
<button class="cart-btn">Cart (0)</button>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<h2>Elevate Your Space</h2>
<p>Discover curated home decor pieces that transform your house into a home</p>
</section>
<!-- Category Filter -->
<div class="container">
<div class="category-filter" id="categoryFilter">
<button class="category-btn active" data-category="All">All</button>
<button class="category-btn" data-category="Wall Decor">Wall Decor</button>
<button class="category-btn" data-category="Kitchen & Dining">Kitchen & Dining</button>
<button class="category-btn" data-category="Storage">Storage</button>
<button class="category-btn" data-category="Fragrance">Fragrance</button>
<button class="category-btn" data-category="Accessories">Accessories</button>
<button class="category-btn" data-category="Vases">Vases</button>
<button class="category-btn" data-category="Florals">Florals</button>
</div>
</div>
<!-- Products Grid -->
<div class="container">
<div class="products-grid" id="productsGrid"></div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div>
<a href="https://www.homeofglitters.com">
<h3>Home of Glitters</h3>
</a>
<p>Premium home decor for modern living spaces</p>
</div>
<div>
<h4>Quick Links</h4>
<ul>
<li><a href="https://www.homeofglitters.com">Shop All</a></li>
<li><a href="https://www.homeofglitters.com">New Arrivals</a></li>
<li><a href="https://www.homeofglitters.com">Best Sellers</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li><a href="https://www.homeofglitters.com">Visit our website</a></li>
<li>contact@homeofglitters.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2026 Home of Glitters. All rights reserved. | <a href="https://www.homeofglitters.com">www.homeofglitters.com</a>
</div>
</footer>
<script>
const products = [
{
id: 1,
name: 'Minimalist Wall Art',
category: 'Wall Decor',
price: 89.99,
image: 'https://images.unsplash.com/photo-1773062811535-22dce17f7cc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Modern minimalist design perfect for any room'
},
{
id: 2,
name: 'Ceramic Mug Collection',
category: 'Kitchen & Dining',
price: 49.99,
image: 'https://images.unsplash.com/photo-1776274958289-21b4d7ac06f3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Handcrafted ceramic mugs in vibrant colors'
},
{
id: 3,
name: 'Woven Storage Basket',
category: 'Storage',
price: 64.99,
image: 'https://images.unsplash.com/photo-1757087824089-bdb33ecc3439?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Natural woven basket for elegant organization'
},
{
id: 4,
name: 'Luxury Candle Set',
category: 'Fragrance',
price: 79.99,
image: 'https://images.unsplash.com/photo-1616017199110-1df115dab5a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Premium scented candles in elegant packaging'
},
{
id: 5,
name: 'Decorative Bowl & Pearls',
category: 'Accessories',
price: 129.99,
image: 'https://images.unsplash.com/photo-1763478958715-c32e83c38b5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Elegant decorative bowl with pearl accents'
},
{
id: 6,
name: 'Glass Vase Collection',
category: 'Vases',
price: 54.99,
image: 'https://images.unsplash.com/photo-1599733687773-14a83800fd0b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Modern glass vases for fresh or dried flowers'
},
{
id: 7,
name: 'Artificial Floral Arrangement',
category: 'Florals',
price: 94.99,
image: 'https://images.unsplash.com/photo-1776083760532-ab386176f6bd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Vibrant artificial flowers that last forever'
},
{
id: 8,
name: 'Designer Perfume Bottle',
category: 'Accessories',
price: 149.99,
image: 'https://images.unsplash.com/photo-1599733687835-74c01126fa51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080',
description: 'Elegant glass perfume bottle for your vanity'
}
];
let currentCategory = 'All';
function renderProducts(category) {
const grid = document.getElementById('productsGrid');
const filtered = category === 'All'
? products
: products.filter(p => p.category === category);
grid.innerHTML = filtered.map(product => `
<div class="product-card">
<div class="product-image">
<img src="${product.image}" alt="${product.name}" loading="lazy">
</div>
<div class="product-info">
<p class="product-category">${product.category}</p>
<h3 class="product-name">${product.name}</h3>
<p class="product-description">${product.description}</p>
<div class="product-footer">
<span class="product-price">$${product.price}</span>
<button class="add-to-cart" onclick="addToCart(${product.id})">Add to Cart</button>
</div>
</div>
</div>
`).join('');
}
function addToCart(productId) {
alert('Product added to cart! Product ID: ' + productId);
// Add your cart functionality here
}
// Category filter functionality
document.getElementById('categoryFilter').addEventListener('click', (e) => {
if (e.target.classList.contains('category-btn')) {
document.querySelectorAll('.category-btn').forEach(btn => {
btn.classList.remove('active');
});
e.target.classList.add('active');
currentCategory = e.target.dataset.category;
renderProducts(currentCategory);
}
});
// Initial render
renderProducts(currentCategory);
</script>