Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>ShopHub - Premium Marketplace</title>
<!-- Google Fonts & Font Awesome Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #e9ecef;
color: #1e2a3e;
line-height: 1.4;
}
/* Utility classes */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
/* Header - Amazon style navbar */
.navbar {
background-color: #131921;
color: white;
padding: 12px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
}
.logo {
font-size: 1.9rem;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #febd69, #ffa41c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
text-shadow: none;
}
.logo span {
color: #ffa41c;
background: none;
-webkit-background-clip: unset;
background-clip: unset;
}
.delivery-location {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
background: rgba(255,255,255,0.1);
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
}
.delivery-location i {
font-size: 1.1rem;
}
.search-bar {
flex: 1;
display: flex;
max-width: 650px;
background-color: white;
border-radius: 8px;
overflow: hidden;
}
.search-bar select {
background: #f3f3f3;
border: none;
padding: 0 12px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
border-right: 1px solid #ccc;
}
.search-bar input {
flex: 1;
padding: 12px 16px;
border: none;
outline: none;
font-size: 1rem;
}
.search-bar button {
background-color: #febd69;
border: none;
width: 48px;
cursor: pointer;
color: #131921;
font-size: 1.2rem;
transition: background 0.2s;
}
.search-bar button:hover {
background-color: #f3a847;
}
.nav-actions {
display: flex;
align-items: center;
gap: 22px;
}
.nav-item {
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: opacity 0.2s;
text-align: center;
}
.nav-item i {
display: block;
font-size: 1.4rem;
margin-bottom: 3px;
}
.cart-icon {
position: relative;
}
.cart-count {
background-color: #f08804;
border-radius: 20px;
padding: 0px 6px;
font-size: 0.75rem;
font-weight: bold;
position: absolute;
top: -8px;
right: -12px;
}
/* Secondary nav (categories) */
.secondary-nav {
background-color: #232f3e;
color: white;
padding: 8px 0;
font-size: 0.85rem;
overflow-x: auto;
white-space: nowrap;
}
.category-list {
display: flex;
gap: 24px;
list-style: none;
}
.category-list li {
cursor: pointer;
font-weight: 500;
transition: color 0.2s;
}
.category-list li:hover {
color: #febd69;
}
/* Hero banner */
.hero {
background: linear-gradient(97deg, #0a2b3e 0%, #1b4f6e 100%);
color: white;
padding: 48px 0;
margin-bottom: 32px;
border-radius: 0 0 24px 24px;
}
.hero-content h1 {
font-size: 2.2rem;
margin-bottom: 12px;
}
.hero-content p {
font-size: 1.1rem;
max-width: 550px;
margin-bottom: 24px;
}
.btn-primary {
background-color: #febd69;
border: none;
padding: 12px 28px;
font-weight: 700;
border-radius: 30px;
cursor: pointer;
font-size: 1rem;
transition: transform 0.1s, background 0.2s;
}
.btn-primary:hover {
background-color: #ffa41c;
transform: scale(0.98);
}
/* Product Grid */
.section-title {
font-size: 1.7rem;
font-weight: 700;
margin: 32px 0 20px 0;
padding-bottom: 6px;
border-bottom: 3px solid #febd69;
display: inline-block;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 28px;
margin-bottom: 48px;
}
.product-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
transition: all 0.25s ease;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 30px -12px rgba(0,0,0,0.2);
}
.product-img {
width: 100%;
height: 220px;
object-fit: contain;
background: #faf9f8;
padding: 16px;
transition: transform 0.3s;
}
.product-card:hover .product-img {
transform: scale(1.02);
}
.product-info {
padding: 16px;
border-top: 1px solid #edf2f7;
}
.product-title {
font-weight: 600;
font-size: 1rem;
margin-bottom: 8px;
line-height: 1.3;
min-height: 48px;
}
.rating {
color: #ffb81c;
font-size: 0.85rem;
margin: 5px 0;
}
.price {
font-weight: 800;
font-size: 1.4rem;
color: #b12704;
margin: 8px 0;
}
.original-price {
text-decoration: line-through;
font-size: 0.8rem;
color: #565959;
margin-left: 8px;
font-weight: normal;
}
.add-to-cart {
background-color: #ffd814;
border: none;
width: 100%;
padding: 12px;
font-weight: 700;
border-radius: 50px;
margin-top: 8px;
cursor: pointer;
transition: background 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.add-to-cart:hover {
background-color: #f7ca00;
}
/* Cart Modal (Side drawer style) */
.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}
.cart-drawer {
position: fixed;
right: 0;
top: 0;
width: 420px;
max-width: 90vw;
height: 100%;
background: white;
box-shadow: -5px 0 20px rgba(0,0,0,0.2);
z-index: 1001;
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.cart-overlay.active {
visibility: visible;
opacity: 1;
}
.cart-overlay.active .cart-drawer {
transform: translateX(0);
}
.cart-header {
padding: 20px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 1.3rem;
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.cart-item {
display: flex;
gap: 12px;
border-bottom: 1px solid #f1f5f9;
padding: 12px 0;
}
.cart-item-img {
width: 60px;
height: 60px;
object-fit: contain;
background: #f8f9fa;
}
.cart-item-details {
flex: 1;
}
.cart-item-title {
font-size: 0.9rem;
font-weight: 500;
}
.cart-item-price {
color: #b12704;
font-weight: 700;
}
.cart-qty {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.qty-btn {
background: #e2e8f0;
border: none;
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
.cart-footer {
padding: 20px;
border-top: 2px solid #e9ecef;
}
.total-price {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 16px;
}
.checkout-btn {
background: #febd69;
width: 100%;
padding: 14px;
border: none;
font-weight: 700;
border-radius: 12px;
font-size: 1rem;
cursor: pointer;
}
.close-cart {
background: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
}
footer {
background: #232f3e;
color: #dddddd;
padding: 40px 0 24px;
margin-top: 48px;
font-size: 0.85rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
gap: 32px;
margin-bottom: 32px;
}
.footer-col h4 {
color: white;
margin-bottom: 16px;
}
.footer-col p {
margin: 6px 0;
cursor: pointer;
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid #3a4655;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
align-items: stretch;
}
.search-bar {
max-width: 100%;
}
.hero-content h1 {
font-size: 1.6rem;
}
}
</style>
</head>
<body>
<!-- Header / Navbar (Amazon style) -->
<header>
<div class="navbar">
<div class="container nav-container">
<div class="logo">Shop<span>Hub</span> <i class="fas fa-box-open" style="color:#febd69; font-size:1.4rem;"></i></div>
<div class="delivery-location">
<i class="fas fa-map-marker-alt"></i>
<span>Deliver to Pakistan <i class="fas fa-chevron-down"></i></span>
</div>
<div class="search-bar">
<select id="categoryFilter">
<option>All</option>
<option>Electronics</option>
<option>Fashion</option>
<option>Home & Kitchen</option>
<option>Books</option>
</select>
<input type="text" id="searchInput" placeholder="Search products...">
<button id="searchBtn"><i class="fas fa-search"></i></button>
</div>
<div class="nav-actions">
<div class="nav-item"><i class="far fa-user"></i> Account</div>
<div class="nav-item"><i class="far fa-heart"></i> Wishlist</div>
<div class="nav-item cart-icon" id="cartIconBtn">
<i class="fas fa-shopping-cart"></i> Cart
<span class="cart-count" id="cartCountBadge">0</span>
</div>
</div>
</div>
</div>
<div class="secondary-nav">
<div class="container">
<ul class="category-list" id="categoryNav">
<li data-cat="all">All</li>
<li data-cat="Electronics">Electronics</li>
<li data-cat="Fashion">Fashion</li>
<li data-cat="Home & Kitchen">Home & Kitchen</li>
<li data-cat="Books">Books</li>
<li data-cat="Deals">Today's Deals</li>
</ul>
</div>
</div>
</header>
<!-- Hero Banner -->
<section class="hero">
<div class="container hero-content">
<h1>Big Savings, Smart Shopping</h1>
<p>Unbeatable deals on top brands. Free delivery on orders over $25. Shop with confidence.</p>
<button class="btn-primary" id="shopNowBtn">Shop Now →</button>
</div>
</section>
<!-- Main Products Section -->
<main class="container">
<div class="section-title">Recommended for you</div>
<div id="productsGrid" class="product-grid">
<!-- dynamic products injected via JS -->
</div>
</main>
<!-- Cart Side Drawer -->
<div id="cartOverlay" class="cart-overlay">
<div class="cart-drawer">
<div class="cart-header">
<span>Shopping Cart (<span id="cartItemCount">0</span>)</span>
<button class="close-cart" id="closeCartBtn">×</button>
</div>
<div id="cartItemsList" class="cart-items">
<!-- dynamic cart items -->
</div>
<div class="cart-footer">
<div class="total-price">Total: $<span id="cartTotalPrice">0.00</span></div>
<button class="checkout-btn" id="checkoutBtn">Proceed to checkout</button>
</div>
</div>
</div>
<footer>
<div class="container footer-grid">
<div class="footer-col"><h4>Get to Know Us</h4><p>About ShopHub</p><p>Careers</p><p>Press Releases</p></div>
<div class="footer-col"><h4>Connect with Us</h4><p>Facebook</p><p>Twitter</p><p>Instagram</p></div>
<div class="footer-col"><h4>Make Money with Us</h4><p>Sell on ShopHub</p><p>Advertise</p><p>Become Affiliate</p></div>
<div class="footer-col"><h4>Let Us Help You</h4><p>Your Account</p><p>Returns Centre</p><p>Help</p></div>
</div>
<div class="container copyright">© 2025 ShopHub, Inc. All rights reserved. Inspired by premium marketplaces.</div>
</footer>
<script>
// ---------- PRODUCT DATABASE (Amazon style) ----------
const products = [
{ id: 1, name: "Wireless Noise Cancelling Headphones", price: 89.99, originalPrice: 149.99, rating: 4.5, category: "Electronics", image: "https://placehold.co/400x400?text=Headphones", popular: true },
{ id: 2, name: "Smart Watch 44mm, GPS + Cellular", price: 279.99, originalPrice: 399.99, rating: 4.7, category: "Electronics", image: "https://placehold.co/400x400?text=Smart+Watch", popular: true },
{ id: 3, name: "Premium Cotton Casual Shirt", price: 29.99, originalPrice: 59.99, rating: 4.2, category: "Fashion", image: "https://placehold.co/400x400?text=Shirt", popular: false },
{ id: 4, name: "Slim Fit Jeans - Stretch Denim", price: 49.99, originalPrice: 79.99, rating: 4.3, category: "Fashion", image: "https://placehold.co/400x400?text=Jeans", popular: true },
{ id: 5, name: "Non-Stick Cookware Set, 10-Piece", price: 119.99, originalPrice: 199.99, rating: 4.8, category: "Home & Kitchen", image: "https://placehold.co/400x400?text=Cookware", popular: true },
{ id: 6, name: "LED Desk Lamp with Wireless Charger", price: 39.99, originalPrice: 69.99, rating: 4.4, category: "Home & Kitchen", image: "https://placehold.co/400x400?text=Lamp", popular: false },
{ id: 7, name: "Bestseller Mystery Thriller Novel", price: 15.99, originalPrice: 24.99, rating: 4.6, category: "Books", image: "https://placehold.co/400x400?text=Book", popular: true },
{ id: 8, name: "Gaming Mouse with RGB, 16000 DPI", price: 34.99, originalPrice: 59.99, rating: 4.5, category: "Electronics", image: "https://placehold.co/400x400?text=Gaming+Mouse", popular: false },
{ id: 9, name: "Women's Running Shoes - Breathable", price: 59.99, originalPrice: 89.99, rating: 4.3, category: "Fashion", image: "https://placehold.co/400x400?text=Shoes", popular: true },
{ id: 10, name: "Robot Vacuum Cleaner", price: 229.99, originalPrice: 399.99, rating: 4.9, category: "Home & Kitchen", image: "https://placehold.co/400x400?text=Vacuum", popular: true }
];
// ---------- GLOBAL STATE ----------
let cart = []; // each item: { id, name, price, quantity, image }
let currentFilterCategory = "all";
let searchQuery = "";
// DOM elements
const productsGrid = document.getElementById("productsGrid");
const cartCountBadge = document.getElementById("cartCountBadge");
const cartOverlay = document.getElementById("cartOverlay");
const cartIconBtn = document.getElementById("cartIconBtn");
const closeCartBtn = document.getElementById("closeCartBtn");
const cartItemsList = document.getElementById("cartItemsList");
const cartTotalPriceSpan = document.getElementById("cartTotalPrice");
const cartItemCountSpan = document.getElementById("cartItemCount");
const searchInput = document.getElementById("searchInput");
const searchBtn = document.getElementById("searchBtn");
const categoryNavItems = document.querySelectorAll("#categoryNav li");
const categoryFilterSelect = document.getElementById("categoryFilter");
// Helper: update cart UI badges & localstorage (optional)
function updateCartUI() {
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
cartCountBadge.innerText = totalItems;
if(cartItemCountSpan) cartItemCountSpan.innerText = totalItems;
renderCartDrawer();
saveCartToLocal();
}
function saveCartToLocal() {
localStorage.setItem("shopHubCart", JSON.stringify(cart));
}
function loadCartFromLocal() {
const saved = localStorage.getItem("shopHubCart");
if(saved) {
try {
cart = JSON.parse(saved);
updateCartUI();
} catch(e) { console.warn(e); }
}
}
// Add to cart logic
function addToCart(productId) {
const product = products.find(p => p.id === productId);
if(!product) return;
const existingItem = cart.find(item => item.id === productId);
if(existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
id: product.id,
name: product.name,
price: product.price,
quantity: 1,
image: product.image
});
}
updateCartUI();
showTemporaryMessage(`🛒 ${product.name} added to cart`);
}
function removeCartItem(productId) {
cart = cart.filter(item => item.id !== productId);
updateCartUI();
}
function updateQuantity(productId, newQty) {
if(newQty <= 0) {
removeCartItem(productId);
return;
}
const item = cart.find(i => i.id === productId);
if(item) item.quantity = newQty;
updateCartUI();
}
function renderCartDrawer() {
if(!cartItemsList) return;
if(cart.length === 0) {
cartItemsList.innerHTML = `<div style="text-align:center; padding:40px;">Your cart is empty.<br>Add some amazing products!</div>`;
cartTotalPriceSpan.innerText = "0.00";
return;
}
let total = 0;
cartItemsList.innerHTML = "";
cart.forEach(item => {
total += item.price * item.quantity;
const cartItemDiv = document.createElement("div");
cartItemDiv.className = "cart-item";
cartItemDiv.innerHTML = `
<img class="cart-item-img" src="${item.image}" alt="${item.name}">
<div class="cart-item-details">
<div class="cart-item-title">${item.name}</div>
<div class="cart-item-price">$${item.price.toFixed(2)}</div>
<div class="cart-qty">
<button class="qty-btn" data-id="${item.id}" data-delta="-1">-</button>
<span>${item.quantity}</span>
<button class="qty-btn" data-id="${item.id}" data-delta="1">+</button>
<button class="qty-btn" data-id="${item.id}" data-remove="true" style="background:#ffcccc;">🗑️</button>
</div>
</div>
`;
cartItemsList.appendChild(cartItemDiv);
});
cartTotalPriceSpan.innerText = total.toFixed(2);
// attach event listeners to newly created qty buttons
document.querySelectorAll('.cart-item .qty-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const id = parseInt(btn.dataset.id);
if(btn.dataset.remove === "true") {
removeCartItem(id);
} else {
const delta = parseInt(btn.dataset.delta);
const item = cart.find(i => i.id === id);
if(item) {
updateQuantity(id, item.quantity + delta);
}
}
});
});
}
function showTemporaryMessage(msg) {
// simple alert alternative - better UX: toast style but for brevity, small alert simulation
const tempDiv = document.createElement("div");
tempDiv.innerText = msg;
tempDiv.style.position = "fixed";
tempDiv.style.bottom = "30px";
tempDiv.style.left = "50%";
tempDiv.style.transform = "translateX(-50%)";
tempDiv.style.backgroundColor = "#232f3e";
tempDiv.style.color = "white";
tempDiv.style.padding = "12px 24px";
tempDiv.style.borderRadius = "40px";
tempDiv.style.zIndex = "1100";
tempDiv.style.fontWeight = "500";
tempDiv.style.boxShadow = "0 2px 10px rgba(0,0,0,0.2)";
document.body.appendChild(tempDiv);
setTimeout(() => tempDiv.remove(), 2000);
}
// Filter & Render products
function filterProducts() {
let filtered = products;
if(currentFilterCategory !== "all") {
filtered = filtered.filter(p => p.category === currentFilterCategory);
}
if(searchQuery.trim() !== "") {
filtered = filtered.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()));
}
renderProducts(filtered);
}
function renderProducts(productArray) {
if(!productsGrid) return;
if(productArray.length === 0) {
productsGrid.innerHTML = `<div style="grid-column:1/-1; text-align:center;padding:60px;">No products found. Try a different category!</div>`;
return;
}
productsGrid.innerHTML = productArray.map(product => `
<div class="product-card" data-id="${product.id}">
<img class="product-img" src="${product.image}" alt="${product.name}" loading="lazy">
<div class="product-info">
<div class="product-title">${product.name}</div>
<div class="rating">${'★'.repeat(Math.floor(product.rating))}${product.rating % 1 >= 0.5 ? '½' : ''} (${product.rating})</div>
<div class="price">$${product.price.toFixed(2)} <span class="original-price">$${product.originalPrice.toFixed(2)}</span></div>
<button class="add-to-cart" data-id="${product.id}"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
</div>
</div>
`).join("");
// attach add-to-cart events
document.querySelectorAll('.add-to-cart').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const id = parseInt(btn.dataset.id);
addToCart(id);
});
});
// product card click for detail (optional)
document.querySelectorAll('.product-card').forEach(card => {
card.addEventListener('click', (e) => {
if(e.target.classList.contains('add-to-cart')) return;
const id = parseInt(card.dataset.id);
showTemporaryMessage(`✨ View details for product #${id} (Demo)`);
});
});
}
// Event listeners for filters, search, categories
function initFilters() {
searchBtn.addEventListener('click', () => {
searchQuery = searchInput.value;
filterProducts();
});
searchInput.addEventListener('keyup', (e) => {
if(e.key === 'Enter') {
searchQuery = searchInput.value;
filterProducts();
}
});
categoryNavItems.forEach(cat => {
cat.addEventListener('click', () => {
const categoryValue = cat.dataset.cat;
if(categoryValue === "all") currentFilterCategory = "all";
else if(categoryValue === "Deals") currentFilterCategory = "all"; // deals demo same as all
else currentFilterCategory = categoryValue;
// Also sync select dropdown
if(categoryFilterSelect) categoryFilterSelect.value = currentFilterCategory === "all" ? "All" : currentFilterCategory;
filterProducts();
});
});
if(categoryFilterSelect) {
categoryFilterSelect.addEventListener('change', (e) => {
let val = e.target.value;
currentFilterCategory = (val === "All") ? "all" : val;
filterProducts();
});
}
}
// Cart drawer toggles
function openCartDrawer() {
cartOverlay.classList.add('active');
renderCartDrawer();
}
function closeCartDrawer() {
cartOverlay.classList.remove('active');
}
cartIconBtn.addEventListener('click', openCartDrawer);
closeCartBtn.addEventListener('click', closeCartDrawer);
cartOverlay.addEventListener('click', (e) => {
if(e.target === cartOverlay) closeCartDrawer();
});
document.getElementById("checkoutBtn")?.addEventListener('click', () => {
if(cart.length === 0) {
showTemporaryMessage("Cart is empty! Add items before checkout.");
} else {
showTemporaryMessage("⚡ Checkout simulation: Thank you for shopping!");
cart = [];
updateCartUI();
closeCartDrawer();
}
});
document.getElementById("shopNowBtn")?.addEventListener('click', () => {
currentFilterCategory = "all";
searchQuery = "";
searchInput.value = "";
filterProducts();
window.scrollTo({ top: 500, behavior: 'smooth' });
});
// initial load
loadCartFromLocal();
initFilters();
filterProducts();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
16
Requests
5
Domains
279KB
Transfer Size
367KB
Content Size
232.0ms
Dom Content Loaded
312.0ms
First Paint
410.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...