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">
<title>STYLEMAX - Find Your Style, Max Your Savings</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load Inter font -->
<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:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom Tailwind Configuration for the unique theme -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
// Khaki for backgrounds (using a light, neutral beige)
'khaki': {
100: '#F5F5DC', // Beige
200: '#F0E68C', // Khaki
},
// Golden for CTAs and accents
'golden': {
500: '#FFD700', // Gold
600: '#EAB308', // Darker Gold
},
// Purple for headers, footers, and text
'brand-purple': {
700: '#4C1D95', // Deep purple
800: '#3B0764',
},
// Pink for sales and secondary accents
'brand-pink': {
500: '#EC4899', // Hot pink
600: '#DB2777',
}
}
}
}
}
</script>
<style>
/* Simple scrollbar for aesthetics */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: #DB2777; /* brand-pink-600 */
border-radius: 10px;
}
::-webkit-scrollbar-track {
background: #F5F5DC; /* khaki-100 */
}
</style>
</head>
<body class="bg-khaki-100 font-sans">
<!-- Header -->
<header class="bg-brand-purple-800 text-white shadow-lg sticky top-0 z-40">
<nav class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-3xl font-bold tracking-tighter text-golden-500">
STYLEMAX
</a>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="text-white hover:text-golden-500 transition duration-200">Men</a>
<a href="#" class="text-white hover:text-golden-500 transition duration-200">Women</a>
<a href="#" class="text-white hover:text-golden-500 transition duration-200">Jeans</a>
<a href="#" class="text-white hover:text-golden-500 transition duration-200">Pajamas</a>
<a href="#" class="bg-brand-pink-500 px-3 py-1 rounded-full text-sm font-medium hover:bg-brand-pink-600 transition duration-200">Sale</a>
</div>
<!-- Search Bar (Desktop) -->
<div class="hidden md:flex relative">
<input type="text" placeholder="Search jeans, dresses..." class="px-4 py-2 rounded-full bg-khaki-100 text-brand-purple-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-golden-500">
<button class="absolute right-2 top-1/2 -translate-y-1/2 bg-golden-500 text-brand-purple-800 p-1.5 rounded-full hover:bg-golden-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
<!-- Mobile Menu (Hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden bg-brand-purple-700 px-4 pt-2 pb-4 space-y-2">
<a href="#" class="block text-white hover:text-golden-500 transition duration-200">Men</a>
<a href="#" class="block text-white hover:text-golden-500 transition duration-200">Women</a>
<a href="#" class="block text-white hover:text-golden-500 transition duration-200">Jeans</a>
<a href="#" class="block text-white hover:text-golden-500 transition duration-200">Pajamas</a>
<a href="#" class="block text-white hover:text-golden-500 transition duration-200">Sale</a>
<!-- Search Bar (Mobile) -->
<div class="relative pt-2">
<input type="text" placeholder="Search jeans, dresses..." class="w-full px-4 py-2 rounded-full bg-khaki-100 text-brand-purple-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-golden-500">
<button class="absolute right-2 top-1/2 pt-2 -translate-y-1/2 bg-golden-500 text-brand-purple-800 p-1.5 rounded-full hover:bg-golden-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Hero Section -->
<section class="bg-gradient-to-r from-brand-pink-500 to-purple-500 text-white p-8 sm:p-12 rounded-lg shadow-xl mb-12 text-center">
<h1 class="text-3xl md:text-5xl font-bold mb-4">Never Overpay for Fashion Again.</h1>
<p class="text-lg md:text-xl mb-6 max-w-2xl mx-auto">STYLEMAX scans the entire internet to find you the absolute best prices on the clothes you love.</p>
<!-- Prominent search bar -->
<form class="mt-8 max-w-2xl mx-auto" onsubmit="event.preventDefault(); showMessage('Search submitted! (This is a demo)');">
<div class="relative">
<input
type="text"
placeholder="Search jeans, dresses, pajamas, shirts & more..."
class="w-full px-6 py-4 rounded-full text-lg bg-white text-brand-purple-800 placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-golden-500 focus:ring-opacity-75">
<button
type="submit"
class="absolute right-2 top-1/2 -translate-y-1/2 bg-golden-500 text-brand-purple-800 font-bold py-3 px-6 rounded-full text-lg hover:bg-golden-600 hover:shadow-lg transform hover:scale-105 transition-all duration-300">
Search
</button>
</div>
</form>
</section>
<!-- NEW: Shop by Category Section -->
<section id="categories" class="mb-12">
<h2 class="text-3xl font-bold text-brand-purple-800 mb-6">Shop by Category</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Category Card: Men -->
<a href="#" class="group relative rounded-lg overflow-hidden shadow-lg">
<img src="http://googleusercontent.com/image_collection/image_retrieval/14840378831906160294"
onerror="this.src='https://placehold.co/600x600/4C1D95/FFD700?text=Men'"
alt="Men's Fashion" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-40 transition-all duration-300 group-hover:bg-opacity-50 flex items-center justify-center p-4">
<h3 class="text-white text-3xl font-bold tracking-tight">Men</h3>
</div>
</a>
<!-- Category Card: Women -->
<a href="#" class="group relative rounded-lg overflow-hidden shadow-lg">
<img src="http://googleusercontent.com/image_collection/image_retrieval/16991430080051425484"
onerror="this.src='https://placehold.co/600x600/EC4899/F5F5DC?text=Women'"
alt="Women's Fashion" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-40 transition-all duration-300 group-hover:bg-opacity-50 flex items-center justify-center p-4">
<h3 class="text-white text-3xl font-bold tracking-tight">Women</h3>
</div>
</a>
<!-- Category Card: Jeans -->
<a href="#" class="group relative rounded-lg overflow-hidden shadow-lg">
<img src="http://googleusercontent.com/image_collection/image_retrieval/3355245709246725293"
onerror="this.src='https://placehold.co/600x600/4C1D95/FFD700?text=Jeans'"
alt="Denim Jeans" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-40 transition-all duration-300 group-hover:bg-opacity-50 flex items-center justify-center p-4">
<h3 class="text-white text-3xl font-bold tracking-tight">Jeans</h3>
</div>
</a>
<!-- Category Card: Pajamas -->
<a href="#" class="group relative rounded-lg overflow-hidden shadow-lg">
<img src="http://googleusercontent.com/image_collection/image_retrieval/12462566607118617353"
onerror="this.src='https://placehold.co/600x600/EC4899/F5F5DC?text=Pajamas'"
alt="Pajamas" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-40 transition-all duration-300 group-hover:bg-opacity-50 flex items-center justify-center p-4">
<h3 class="text-white text-3xl font-bold tracking-tight">Pajamas</h3>
</div>
</a>
</div>
</section>
<!-- End of new category section -->
<!-- Product Grid -->
<section id="products">
<h2 class="text-3xl font-bold text-brand-purple-800 mb-6">Featured Deals</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product Card 1: Jeans -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-xl flex flex-col">
<img src="http://googleusercontent.com/image_collection/image_retrieval/16481358687399877277"
onerror="this.src='https://placehold.co/600x600/4C1D95/FFD700?text=Image+Error'"
alt="Classic Denim Jeans" class="w-full h-64 object-cover">
<div class="p-4 flex-grow">
<h3 class="text-lg font-semibold text-brand-purple-800">Classic Denim Jeans</h3>
<p class="text-gray-600">Men's Relaxed Fit</p>
</div>
<div class="p-4 border-t border-gray-100">
<span class="text-2xl font-bold text-brand-pink-600">$59.99</span>
<button onclick="openModal('jeans')" data-product-id="jeans" class="w-full mt-2 bg-golden-500 text-brand-purple-800 font-semibold py-2 px-4 rounded-lg hover:bg-golden-600 transition-all duration-200">
Compare 5+ Prices
</button>
</div>
</div>
<!-- Product Card 2: Pajamas -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-xl flex flex-col">
<img src="http://googleusercontent.com/image_collection/image_retrieval/6243457191218199151"
onerror="this.src='https://placehold.co/600x600/EC4899/F5F5DC?text=Image+Error'"
alt="Silk Pajama Set" class="w-full h-64 object-cover">
<div class="p-4 flex-grow">
<h3 class="text-lg font-semibold text-brand-purple-800">Luxury Silk Pajama Set</h3>
<p class="text-gray-600">Women's Collection</p>
</div>
<div class="p-4 border-t border-gray-100">
<span class="text-2xl font-bold text-brand-pink-600">$89.00</span>
<button onclick="openModal('pajamas')" data-product-id="pajamas" class="w-full mt-2 bg-golden-500 text-brand-purple-800 font-semibold py-2 px-4 rounded-lg hover:bg-golden-600 transition-all duration-200">
Compare 5+ Prices
</button>
</div>
</div>
<!-- Product Card 3: T-Shirt -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-xl flex flex-col">
<img src="http://googleusercontent.com/image_collection/image_retrieval/7783854005049852566"
onerror="this.src='https://placehold.co/600x600/4C1D95/FFD700?text=Image+Error'"
alt="Graphic T-Shirt" class="w-full h-64 object-cover">
<div class="p-4 flex-grow">
<h3 class="text-lg font-semibold text-brand-purple-800">Vintage Graphic Tee</h3>
<p class="text-gray-600">Unisex Cotton</p>
</div>
<div class="p-4 border-t border-gray-100">
<span class="text-2xl font-bold text-brand-pink-600">$24.50</span>
<button onclick="openModal('tee')" data-product-id="tee" class="w-full mt-2 bg-golden-500 text-brand-purple-800 font-semibold py-2 px-4 rounded-lg hover:bg-golden-600 transition-all duration-200">
Compare 5+ Prices
</button>
</div>
</div>
<!-- Product Card 4: Dress -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-xl flex flex-col">
<img src="http://googleusercontent.com/image_collection/image_retrieval/13075828680195092600"
onerror="this.src='https://placehold.co/600x600/EC4899/F5F5DC?text=Image+Error'"
alt="Floral Maxi Dress" class="w-full h-64 object-cover">
<div class="p-4 flex-grow">
<h3 class="text-lg font-semibold text-brand-purple-800">Floral Maxi Dress</h3>
<p class="text-gray-600">Women's Summer</p>
</div>
<div class="p-4 border-t border-gray-100">
<span class="text-2xl font-bold text-brand-pink-600">$75.00</span>
<button onclick="openModal('dress')" data-product-id="dress" class="w-full mt-2 bg-golden-500 text-brand-purple-800 font-semibold py-2 px-4 rounded-lg hover:bg-golden-600 transition-all duration-200">
Compare 5+ Prices
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-brand-purple-800 text-khaki-100 mt-12 py-10">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<h5 class="text-xl font-bold text-golden-500 mb-3">STYLEMAX</h5>
<p class="text-sm">Find your style, max your savings. The ultimate fashion price comparator.</p>
</div>
<div>
<h5 class="font-semibold text-lg text-white mb-3">Shop</h5>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-golden-500">Men's Clothing</a></li>
<li><a href="#" class="hover:text-golden-500">Women's Clothing</a></li>
<li><a href="#" class="hover:text-golden-500">Top Deals</a></li>
<li><a href="#" class="hover:text-golden-500">New Arrivals</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold text-lg text-white mb-3">Company</h5>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-golden-500">About Us</a></li>
<li><a href="#" class="hover:text-golden-500">Careers</a></li>
<li><a href="#" class="hover:text-golden-500">Press</a></li>
<li><a href="#" class="hover:text-golden-500">Privacy Policy</a></li>
</ul>
</div>
<div>
<h5 class="font-semibold text-lg text-white mb-3">Follow Us</h5>
<div class="flex space-x-4">
<!-- Social Icons (Placeholder) -->
<a href="#" class="hover:text-golden-500" aria-label="Facebook">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3l-.5 3h-2.5v6.8c4.56-.93 8-4.96 8-9.8z"/></svg>
</a>
<a href="#" class="hover:text-golden-500" aria-label="Instagram">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.7 2 8.3 2.02 7.1.07 5.9.12 5.07.33 4.3.6 3.53.87 2.9 1.2 2.22 1.73c-.5.38-.9.7-1.2 1.2-.38.5-.7.9-1.2 1.2C.33 5.07.12 5.9.07 7.1.02 8.3 0 8.7 0 12s.02 3.7.07 4.9c.05 1.2.26 2.03.6 2.77.38.73.8 1.17 1.3 1.67.5.5 1 .85 1.73 1.2.77.34 1.6.55 2.77.6 1.2.05 1.6.07 4.9.07s3.7-.02 4.9-.07c1.17-.05 2-.26 2.77-.6.73-.35 1.17-.8 1.67-1.3.5-.5.85-1 1.2-1.73.34-.77.55-1.6.6-2.77.05-1.2.07-1.6.07-4.9s-.02-3.7-.07-4.9c-.05-1.17-.26-2-.6-2.77-.35-.73-.8-1.17-1.3-1.67-.5-.5-1-.85-1.73-1.2C18.93.33 18.07.12 16.9.07 15.7.02 15.3 0 12 0zm0 1.8c3.2 0 3.58.01 4.85.07 1.1.05 1.7.25 2.1.4.45.18.73.38 1.05.7.32.32.52.6.7 1.05.15.4.35 1 .4 2.1.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.1-.25 1.7-.4 2.1-.18.45-.38.73-.7 1.05-.32.32-.6.52-1.05.7-.4.15-1 .35-2.1.4-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.1-.05-1.7-.25-2.1-.4-.45-.18-.73-.38-1.05-.7-.32-.32-.52-.6-.7-1.05-.15-.4-.35-1-.4-2.1-.06-1.27-.07-1.65-Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
19
Requests
6
Domains
204KB
Transfer Size
494KB
Content Size
626.0ms
Dom Content Loaded
716.0ms
First Paint
1,303.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...