<!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>
<!– 1. Top Bar –>
<div>
<div><span>Help Center</span><span>Order Status</span></div>
<div><span>Login</span><span>My Account</span></div>
</div>
<!– 2. Navbar –>
<nav>
<div>E-Commerce<span>.</span></div>
<div>
<a href=”#”>HOME</a>
<a href=”#”>CATEGORIES</a>
<div>
🛒<span>3</span>
</div>
</div>
</nav>
<!– 3. Hero Section (iPhone) –>
<section>
<div>
<div>
<span>NEW ARRIVAL</span>
<h1>iPhone 13<br>Pro Max</h1>
<div>
<span>$1,200</span>
<button>BUY NOW</button>
</div>
</div>
<!– iPhone SVG (100% Working) –>
<div>
<svg viewBox=”0 0 400 600″>
<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>
<h2>Everything That <span>You Need</span></h2>
<div>
<!– NIKE REACT (SVG SHOE – 100% WORKING) –>
<div>
<div>
<!– High Quality Shoe SVG Code –>
<svg viewBox=”0 0 512 512″>
<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>Nike React</h3>
<p>PREMIUM EDITION</p>
<div>
<span>$150</span>
<button>Add To Cart</button>
</div>
</div>
<!– Laptop Item –>
<div>
<div>
<span>💻</span>
</div>
<h3>Surface Pro</h3>
<div>
<span>$850</span>
<button>Add</button>
</div>
</div>
<!– Headset Item –>
<div>
<div>
<span>🎧</span>
</div>
<h3>Beats Headset</h3>
<div>
<span>$200</span>
<button>Add</button>
</div>
</div>
<!– Camera Item –>
<div>
<div>
<span>📷</span>
</div>
<h3>Sony Alpha</h3>
<div>
<span>$1,100</span>
<button>Add</button>
</div>
</div>
</div>
</section>
<!– 5. Testimonials (3 Boxes) –>
<section>
<div>
<h4>Testimonials</h4>
<h2>What Our <span>Client’s</span> Say</h2>
<div>
<div>
<p>”The Nike shoes I ordered fit perfectly. Fast delivery!”</p>
<div>
<div></div>
<p>Jane Smith</p>
</div>
</div>
<div>
<p>”E-Commerce is the best platform for premium gadgets. Highly recommended!”</p>
<div>
<div></div>
<p>Alex Brown</p>
</div>
</div>
<div>
<p>”Amazing prices and 100% authentic products. Love it.”</p>
<div>
<div></div>
<p>Sara Wilson</p>
</div>
</div>
</div>
</div>
</section>
<!– 7. Footer –>
<footer>
<div>
<div>
<div>E-Commerce<span>.</span></div>
<p>The ultimate destination for premium shopping.</p>
</div>
<div><h4>Company</h4><ul><li>Home</li><li>Products</li><li>Policy</li></ul></div>
<div><h4>Follow</h4><div>📘 📸 🐦</div></div>
<div><h4>Newsletter</h4><div><input type=”text”><button>➔</button></div></div>
</div>
<p>© 2026 E-Commerce Premium Store</p>
</footer>
</body>
</html>