<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>E-Commerce – 100% Fixed Image</title>
<script src=”https://cdn.tailwindcss.com”></script>
<link href=”https://fonts.googleapis.com” rel=”stylesheet”>
<style>
body { font-family: ‘Poppins’, sans-serif; background-color: #ffffff; color: #000000; }
.bg-navy { background-color: #1A1A3D; }
.text-yellow { color: #FFD700; }
.bg-yellow { background-color: #FFD700; }
.hero-gradient { background: linear-gradient(135deg, #E0E7FF 0%, #FBCFE8 100%); }
/* Tamam prices aur titles ko pakka black karne ke liye */
.text-black-bold { color: #000000 !important; font-weight: 800; }
.card-shadow { box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
</style>
</head>
<body class=”overflow-x-hidden”>
<!– 1. Top Bar –>
<div class=”bg-navy text-white text-[10px] py-2 px-10 flex justify-between items-center”>
<div class=”flex gap-4″><span>Help Center</span><span>Order Status</span></div>
<div class=”flex gap-4″><span>Login</span><span>My Account</span></div>
</div>
<!– 2. Navbar –>
<nav class=”bg-white py-5 px-10 shadow-sm sticky top-0 z-50 flex items-center justify-between border-b border-gray-100″>
<div class=”text-2xl font-black italic text-navy uppercase”>E-Commerce<span class=”text-yellow”>.</span></div>
<div class=”flex gap-8 font-bold text-sm items-center”>
<a href=”#” class=”text-black hover:text-yellow”>HOME</a>
<a href=”#” class=”text-black hover:text-yellow”>CATEGORIES</a>
<div class=”bg-yellow p-2 rounded-full relative shadow-md cursor-pointer”>
🛒<span class=”absolute -top-1 -right-1 bg-navy text-white text-[9px] px-1.5 rounded-full”>3</span>
</div>
</div>
</nav>
<!– 3. Hero Section (iPhone) –>
<section class=”max-w-7xl mx-auto mt-6 px-6″>
<div class=”hero-gradient rounded-[50px] p-12 flex flex-col md:flex-row items-center justify-between relative overflow-hidden”>
<div class=”md:w-1/2 z-10″>
<span class=”bg-yellow text-navy font-black px-4 py-1 rounded text-[10px] tracking-widest”>NEW ARRIVAL</span>
<h1 class=”text-6xl font-black mt-6 leading-tight text-black”>iPhone 13<br>Pro Max</h1>
<div class=”mt-10 flex items-center gap-8″>
<span class=”text-5xl font-black text-black”>$1,200</span>
<button class=”bg-navy text-white px-12 py-4 rounded-full font-black shadow-2xl hover:bg-black transition-all”>BUY NOW</button>
</div>
</div>
<!– iPhone SVG (100% Working) –>
<div class=”md:w-1/2 flex justify-end”>
<svg viewBox=”0 0 400 600″ class=”w-80 drop-shadow-2xl rotate-12″>
<rect x=”50″ y=”50″ width=”300″ height=”550″ rx=”50″ fill=”#111″ />
<rect x=”65″ y=”65″ width=”270″ height=”520″ rx=”40″ fill=”#A2C2E8″ />
<rect x=”140″ y=”65″ width=”120″ height=”30″ rx=”15″ fill=”#111″ />
</svg>
</div>
</div>
</section>
<!– 4. Product Grid –>
<section class=”max-w-7xl mx-auto mt-20 px-6″>
<h2 class=”text-center font-black text-black text-4xl mb-16 tracking-tighter uppercase”>Everything That <span class=”text-yellow”>You Need</span></h2>
<div class=”grid grid-cols-1 md:grid-cols-4 gap-10″>
<!– NIKE REACT (SVG SHOE – 100% WORKING) –>
<div class=”bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group hover:border-yellow transition-all”>
<div class=”bg-gray-100 rounded-[30px] h-60 flex items-center justify-center p-6 relative overflow-hidden”>
<!– High Quality Shoe SVG Code –>
<svg viewBox=”0 0 512 512″ class=”w-full h-full transform -rotate-12 group-hover:scale-110 transition-transform”>
<path d=”M450 300 Q480 350 400 400 L100 400 Q50 400 80 320 L150 200 Q200 150 300 180 L450 300″ fill=”#333″ />
<path d=”M100 400 L400 400 L420 420 L80 420 Z” fill=”#FFD700″ />
<circle cx=”200″ cy=”220″ r=”10″ fill=”white” opacity=”0.5″ />
<circle cx=”230″ cy=”240″ r=”10″ fill=”white” opacity=”0.5″ />
</svg>
</div>
<h3 class=”text-black-bold mt-6 text-xl”>Nike React</h3>
<p class=”text-[10px] text-gray-400 font-black tracking-widest”>PREMIUM EDITION</p>
<div class=”flex justify-between items-center mt-4″>
<span class=”text-2xl font-black text-black”>$150</span>
<button class=”bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase hover:bg-yellow hover:text-navy transition-colors”>Add To Cart</button>
</div>
</div>
<!– Laptop Item –>
<div class=”bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group”>
<div class=”bg-gray-100 rounded-[30px] h-60 flex items-center justify-center”>
<span class=”text-8xl”>💻</span>
</div>
<h3 class=”text-black-bold mt-6 text-xl”>Surface Pro</h3>
<div class=”flex justify-between items-center mt-4″>
<span class=”text-2xl font-black text-black”>$850</span>
<button class=”bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase”>Add</button>
</div>
</div>
<!– Headset Item –>
<div class=”bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group”>
<div class=”bg-gray-100 rounded-[30px] h-60 flex items-center justify-center”>
<span class=”text-8xl”>🎧</span>
</div>
<h3 class=”text-black-bold mt-6 text-xl”>Beats Headset</h3>
<div class=”flex justify-between items-center mt-4″>
<span class=”text-2xl font-black text-black”>$200</span>
<button class=”bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase”>Add</button>
</div>
</div>
<!– Camera Item –>
<div class=”bg-white p-6 rounded-[40px] card-shadow border border-gray-50 group”>
<div class=”bg-gray-100 rounded-[30px] h-60 flex items-center justify-center”>
<span class=”text-8xl”>📷</span>
</div>
<h3 class=”text-black-bold mt-6 text-xl”>Sony Alpha</h3>
<div class=”flex justify-between items-center mt-4″>
<span class=”text-2xl font-black text-black”>$1,100</span>
<button class=”bg-navy text-white text-[10px] px-5 py-2 rounded-full font-black uppercase”>Add</button>
</div>
</div>
</div>
</section>
<!– 5. Testimonials (3 Boxes) –>
<section class=”py-24 mt-24 bg-gray-50″>
<div class=”max-w-7xl mx-auto px-6 text-center”>
<h4 class=”text-yellow font-black uppercase text-[10px] tracking-[5px] mb-2″>Testimonials</h4>
<h2 class=”text-4xl font-black text-black”>What Our <span class=”text-yellow”>Client’s</span> Say</h2>
<div class=”grid grid-cols-1 md:grid-cols-3 gap-10 mt-20 items-center”>
<div class=”bg-white p-12 rounded-[50px] shadow-xl text-left border border-gray-100″>
<p class=”text-black italic text-sm leading-relaxed”>”The Nike shoes I ordered fit perfectly. Fast delivery!”</p>
<div class=”mt-8 flex items-center gap-4″>
<div class=”w-10 h-10 bg-navy rounded-full”></div>
<p class=”text-xs font-black text-black”>Jane Smith</p>
</div>
</div>
<div class=”bg-navy p-14 rounded-[50px] shadow-2xl scale-110 text-left text-white”>
<p class=”italic text-sm leading-relaxed opacity-90″>”E-Commerce is the best platform for premium gadgets. Highly recommended!”</p>
<div class=”mt-8 flex items-center gap-4″>
<div class=”w-12 h-12 bg-yellow rounded-full”></div>
<p class=”text-xs font-black”>Alex Brown</p>
</div>
</div>
<div class=”bg-white p-12 rounded-[50px] shadow-xl text-left border border-gray-100″>
<p class=”text-black italic text-sm leading-relaxed”>”Amazing prices and 100% authentic products. Love it.”</p>
<div class=”mt-8 flex items-center gap-4″>
<div class=”w-10 h-10 bg-navy rounded-full”></div>
<p class=”text-xs font-black text-black”>Sara Wilson</p>
</div>
</div>
</div>
</div>
</section>
<!– 7. Footer –>
<footer class=”bg-navy text-white mt-24 pt-20 pb-12 px-10″>
<div class=”max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-16 border-b border-white/10 pb-16″>
<div class=”col-span-1″>
<div class=”text-3xl font-black italic mb-6″>E-Commerce<span class=”text-yellow”>.</span></div>
<p class=”text-[10px] opacity-50 leading-loose”>The ultimate destination for premium shopping.</p>
</div>
<div><h4 class=”font-black text-yellow text-xs mb-8 uppercase tracking-widest”>Company</h4><ul class=”text-[11px] space-y-4 opacity-60″><li>Home</li><li>Products</li><li>Policy</li></ul></div>
<div><h4 class=”font-black text-yellow text-xs mb-8 uppercase tracking-widest”>Follow</h4><div class=”flex gap-5 text-xl”>📘 📸 🐦</div></div>
<div><h4 class=”font-black text-yellow text-xs mb-8 uppercase tracking-widest”>Newsletter</h4><div class=”flex”><input type=”text” class=”bg-white/10 rounded-l-full px-5 py-2 w-full outline-none text-xs”><button class=”bg-yellow text-navy px-5 rounded-r-full font-black”>➔</button></div></div>
</div>
<p class=”text-center mt-10 text-[10px] opacity-30 tracking-[4px] uppercase”>© 2026 E-Commerce Premium Store</p>
</footer>
</body>
</html>