silvera / index.html
Bossmarc747's picture
undefined - Initial Deployment
5077596 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazada Philippines | Best Deals & Free Shipping, Shop Now!</title>
<link rel="icon" type="image/x-icon" href="https://img.lazcdn.com/g/tps/images/ims-web/TB19SB7aMFY.1VjSZFnXXcFHXXa.png">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.flash-sale-timer {
background: linear-gradient(90deg, #FF3A3A 0%, #FF6B6B 100%);
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.product-card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Top Navigation -->
<nav class="bg-orange-500 text-white py-2 px-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex space-x-4 text-sm">
<a href="#" class="hover:underline">SAVE MORE ON APP</a>
<a href="#" class="hover:underline">SELL ON LAZADA</a>
<a href="#" class="hover:underline">CUSTOMER CARE</a>
<a href="#" class="hover:underline">TRACK MY ORDER</a>
</div>
<div class="flex space-x-4 text-sm">
<a href="#" class="hover:underline">LOGIN</a>
<a href="#" class="hover:underline">SIGNUP</a>
</div>
</div>
</nav>
<!-- Main Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto py-4 px-4 flex items-center justify-between">
<div class="flex items-center">
<a href="#">
<img src="https://img.lazcdn.com/g/tps/images/ims-web/TB19SB7aMFY.1VjSZFnXXcFHXXa.png" alt="Lazada Logo" class="h-10">
</a>
</div>
<div class="flex-1 mx-8">
<div class="relative">
<input type="text" placeholder="Search in Lazada" class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-orange-500">
<button class="absolute right-0 top-0 h-full px-6 bg-orange-500 text-white rounded-r-full">
<i data-feather="search"></i>
</button>
</div>
</div>
<div class="flex items-center space-x-6">
<a href="#" class="flex flex-col items-center">
<i data-feather="user"></i>
<span class="text-xs mt-1">Account</span>
</a>
<a href="#" class="flex flex-col items-center">
<i data-feather="heart"></i>
<span class="text-xs mt-1">Wishlist</span>
</a>
<a href="#" class="flex flex-col items-center">
<i data-feather="shopping-cart"></i>
<span class="text-xs mt-1">Cart</span>
</a>
</div>
</div>
</header>
<!-- Categories Navigation -->
<div class="bg-white border-b">
<div class="container mx-auto py-2 px-4 overflow-x-auto">
<div class="flex space-x-8">
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Home</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">LazMall</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Vouchers</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Top-Up & Bills</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Beauty</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Fashion</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Mobiles</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Home & Living</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Appliances</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Electronics</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Sports</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Toys</a>
<a href="#" class="whitespace-nowrap text-sm hover:text-orange-500">Grocery</a>
</div>
</div>
</div>
<!-- Hero Banner -->
<div class="bg-white py-4">
<div class="container mx-auto px-4">
<div class="relative rounded-lg overflow-hidden">
<img src="https://img.lazcdn.com/g/tps/imgextra/i4/O1CN01FyQRgf1mR9cKoIfeD_!!6000000004950-0-tps-1976-688.jpg_2200x2200q80.jpg" alt="Hero Banner" class="w-full h-auto">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
<h2 class="text-white text-2xl font-bold">Shop Now & Save Big!</h2>
<p class="text-white">Exclusive deals just for you</p>
</div>
</div>
</div>
</div>
<!-- Flash Sale Section -->
<div class="bg-white mt-4 py-6 px-4">
<div class="container mx-auto">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<h2 class="text-xl font-bold text-red-600">FLASH SALE</h2>
<div class="ml-4 flash-sale-timer text-white px-3 py-1 rounded-md flex items-center">
<span class="font-bold">Ending in</span>
<div class="ml-2 flex space-x-1">
<span class="bg-white text-red-600 px-2 py-1 rounded font-bold">56</span>
<span class="text-white">:</span>
<span class="bg-white text-red-600 px-2 py-1 rounded font-bold">01</span>
<span class="text-white">:</span>
<span class="bg-white text-red-600 px-2 py-1 rounded font-bold">12</span>
</div>
</div>
</div>
<a href="#" class="text-orange-500 hover:underline">SHOP ALL PRODUCTS</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<!-- Product 1 -->
<div class="product-card bg-white p-3 rounded-lg border border-gray-100 transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/bd02eeafaefe35e0f32d9b80fe9503a7.jpg_400x400q80.jpg" alt="Product" class="w-full h-auto mb-2">
<h3 class="text-sm font-medium mb-1">Rivers Snow Foam Shampoo for cars or motorcycles - 1 gal.</h3>
<div class="flex items-center">
<span class="text-red-600 font-bold">₱489.90</span>
<span class="text-gray-500 text-xs line-through ml-2">₱599.00</span>
<span class="text-xs bg-red-100 text-red-600 px-1 ml-2 rounded">-18%</span>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white p-3 rounded-lg border border-gray-100 transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/5a7e56e454489fa31bb60426af9dfd8c.jpg_400x400q80.jpg" alt="Product" class="w-full h-auto mb-2">
<h3 class="text-sm font-medium mb-1">Mitsushi MGFJ25 220V 700W Economy Air Blower</h3>
<div class="flex items-center">
<span class="text-red-600 font-bold">₱475.00</span>
<span class="text-gray-500 text-xs line-through ml-2">₱1,799.00</span>
<span class="text-xs bg-red-100 text-red-600 px-1 ml-2 rounded">-74%</span>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white p-3 rounded-lg border border-gray-100 transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/87099153e6df15f35c41121ec8a081e4.jpg_400x400q80.jpg" alt="Product" class="w-full h-auto mb-2">
<h3 class="text-sm font-medium mb-1">Pedigree Beef Canned Dog Food 1.15KG</h3>
<div class="flex items-center">
<span class="text-red-600 font-bold">₱239.63</span>
<span class="text-gray-500 text-xs line-through ml-2">₱266.25</span>
<span class="text-xs bg-red-100 text-red-600 px-1 ml-2 rounded">-10%</span>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white p-3 rounded-lg border border-gray-100 transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/2463668b9b22423e0be31e1da58bf6c9.jpg_400x400q80.jpg" alt="Product" class="w-full h-auto mb-2">
<h3 class="text-sm font-medium mb-1">FOCALLURE Face Liquid Blusher Makeup</h3>
<div class="flex items-center">
<span class="text-red-600 font-bold">₱132.45</span>
<span class="text-gray-500 text-xs line-through ml-2">₱649.00</span>
<span class="text-xs bg-red-100 text-red-600 px-1 ml-2 rounded">-80%</span>
</div>
</div>
<!-- Product 5 -->
<div class="product-card bg-white p-3 rounded-lg border border-gray-100 transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/c013eaea6ffd9f9f5e079da5ed166094.jpg_400x400q80.jpg" alt="Product" class="w-full h-auto mb-2">
<h3 class="text-sm font-medium mb-1">Handy Stitch Sewing Machine Portable</h3>
<div class="flex items-center">
<span class="text-red-600 font-bold">₱126.85</span>
<span class="text-gray-500 text-xs line-through ml-2">₱1,049.85</span>
<span class="text-xs bg-red-100 text-red-600 px-1 ml-2 rounded">-88%</span>
</div>
</div>
<!-- Product 6 -->
<div class="product-card bg-white p-3 rounded-lg border border-gray-100 transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/df946164e2f4371a11b769f3338d600e.jpg_400x400q80.jpg" alt="Product" class="w-full h-auto mb-2">
<h3 class="text-sm font-medium mb-1">Del Monte Sarap Savers Filipino Style Party Pack</h3>
<div class="flex items-center">
<span class="text-red-600 font-bold">₱131.96</span>
<span class="text-gray-500 text-xs line-through ml-2">₱155.25</span>
<span class="text-xs bg-red-100 text-red-600 px-1 ml-2 rounded">-15%</span>
</div>
</div>
</div>
</div>
</div>
<!-- Categories Section -->
<div class="bg-white mt-4 py-6 px-4">
<div class="container mx-auto">
<h2 class="text-xl font-bold mb-6">Categories</h2>
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4">
<!-- Category 1 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/177c3195ee215b57ec8b5e245e4adcaa.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Mobiles</span>
</a>
<!-- Category 2 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/8a578a87d960dfc39882d8eda8207449.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Outdoor Lighting</span>
</a>
<!-- Category 3 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/a05e14dd224fd1b9101af41d7227699c.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">T-Shirts & Tanks</span>
</a>
<!-- Category 4 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/6fc340f010800343bcfc032d267c02de.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Baby Diapers</span>
</a>
<!-- Category 5 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/d14ce87b0d592f239426e6072bcae333.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Wireless Earbuds</span>
</a>
<!-- Category 6 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/752ccfb0ca1f73b01b39d6e95105f6fa.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Power Banks</span>
</a>
<!-- Category 7 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/e5d29cf284c2f854f32a163e73b5a6d4.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Christmas Decor</span>
</a>
<!-- Category 8 -->
<a href="#" class="category-card bg-white p-3 rounded-lg border border-gray-100 flex flex-col items-center transition-all duration-300">
<img src="https://img.lazcdn.com/g/p/1f557e638eaad20a32281666a023a927.jpg_170x170q80.jpg" alt="Category" class="w-16 h-16 mb-2">
<span class="text-xs text-center">Electrical Parts</span>
</a>
</div>
</div>
</div>
<!-- App Download Banner -->
<div class="bg-orange-50 mt-6 py-8 px-4">
<div class="container mx-auto flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-6 md:mb-0">
<h2 class="text-2xl font-bold mb-2">TRY OUR APP</h2>
<p class="text-gray-700 mb-4">Download the App for the best experience</p>
<div class="flex items-center mb-4">
<div class="flex items-center mr-4">
<img src="https://img.lazcdn.com/g/tps/imgextra/i4/O1CN01cAMOjU1zqQJZU8EbT_!!6000000006765-2-tps-19-18.png_80x80q80.png" alt="Rating" class="w-4 h-4 mr-1">
<span class="text-sm">4.8 Rated</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="flex items-center">
<img src="https://img.lazcdn.com/g/tps/imgextra/i2/O1CN01n3PMa828kJZVuCbPp_!!6000000007970-2-tps-72-72.png_150x150q80.png" alt="Free Shipping" class="w-8 h-8 mr-2">
<span class="text-sm">FREE SHIPPING</span>
</div>
<div class="flex items-center">
<img src="https://img.lazcdn.com/g/tps/imgextra/i3/O1CN01J03SMW1lebTE7xkaN_!!6000000004844-2-tps-72-72.png_150x150q80.png" alt="Vouchers" class="w-8 h-8 mr-2">
<span class="text-sm">EXCLUSIVE VOUCHERS</span>
</div>
</div>
<div class="flex space-x-4">
<a href="#"><img src="https://img.lazcdn.com/us/domino/392fe20d-96d5-4573-956d-396590336135_PH-126-42.png" alt="App Store" class="h-10"></a>
<a href="#"><img src="https://img.lazcdn.com/us/domino/53ad5c74-1b53-4e43-83ce-7ffc0c9ffa4b_PH-126-42.png" alt="Play Store" class="h-10"></a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://img.lazcdn.com/us/domino/0942ea5ea6ff9ca262ea382b52b1500e.png_360x360q80.png" alt="App QR Code" class="w-48 h-48">
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-100 mt-8 py-8 px-4">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="font-bold mb-4">Customer Care</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-orange-500">Help Center</a></li>
<li><a href="#" class="hover:text-orange-500">How to Buy</a></li>
<li><a href="#" class="hover:text-orange-500">Shipping & Delivery</a></li>
<li><a href="#" class="hover:text-orange-500">International Product Policy</a></li>
<li><a href="#" class="hover:text-orange-500">How to Return</a></li>
<li><a href="#" class="hover:text-orange-500">Contact Us</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Lazada</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-orange-500">About Lazada</a></li>
<li><a href="#" class="hover:text-orange-500">Affiliate Program</a></li>
<li><a href="#" class="hover:text-orange-500">Careers</a></li>
<li><a href="#" class="hover:text-orange-500">Terms & Conditions</a></li>
<li><a href="#" class="hover:text-orange-500">Privacy Policy</a></li>
<li><a href="#" class="hover:text-orange-500">Press & Media</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Download the App</h3>
<div class="flex space-x-2 mb-4">
<a href="#"><img src="https://img.lazcdn.com/us/domino/392fe20d-96d5-4573-956d-396590336135_PH-126-42.png" alt="App Store" class="h-10"></a>
<a href="#"><img src="https://img.lazcdn.com/us/domino/53ad5c74-1b53-4e43-83ce-7ffc0c9ffa4b_PH-126-42.png" alt="Play Store" class="h-10"></a>
</div>
<img src="https://img.lazcdn.com/us/media/d33f1c45a4bd2fc773f8614625ed9cee-165-165.png" alt="Download App" class="w-32">
</div>
<div>
<h3 class="font-bold mb-4">Payment Methods</h3>
<div class="grid grid-cols-3 gap-2 mb-4">
<img src="https://img.lazcdn.com/g/tps/tfs/TB1a7taR.Y1gK0jSZFCXXcwqXXa-824-305.png" alt="Lazada Wallet" class="h-8">
<img src="https://img.lazcdn.com/us/domino/92e4b5da-14a4-4f22-a72b-6334933196ff_PH-117-70.png" alt="Visa" class="h-8">
<img src="https://img.lazcdn.com/us/domino/2cd27cdf-a067-4ca6-a117-3a9232b058b3_PH-63-48.png" alt="Mastercard" class="h-8">
<img src="https://img.lazcdn.com/us/domino/862b3627-86a5-4d33-a548-2ad2feab3f35_PH-53-39.png" alt="JCB" class="h-8">
<img src="https://img.lazcdn.com/g/tps/tfs/TB1uQjzOVzqK1RjSZFvXXcB7VXa-225-114.png" alt="American Express" class="h-8">
<img src="https://img.lazcdn.com/us/domino/df528871-ca3b-49ae-8338-2f23fc7bdc60_PH-42-42.png" alt="GCash" class="h-8">
</div>
<h3 class="font-bold mb-2 mt-4">Delivery Services</h3>
<div class="grid grid-cols-3 gap-2">
<img src="https://img.lazcdn.com/g/tps/imgextra/i3/O1CN01RNizk522j2cPtaRjc_!!6000000007155-2-tps-96-70.png" alt="Lazada Logistics" class="h-8">
<img src="https://img.lazcdn.com/g/tps/imgextra/i2/O1CN01md1Up71hMVCAxe2HZ_!!6000000004263-2-tps-96-70.png" alt="JT" class="h-8">
<img src="https://img.lazcdn.com/g/tps/imgextra/i2/O1CN013FblIV1u8qO5VGIBd_!!6000000005993-2-tps-96-70.png" alt="Flash Express" class="h-8">
</div>
</div>
</div>
<div class="border-t border-gray-200 mt-8 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm text-gray-600">© Lazada 2025</p>
</div>
<div class="flex space-x-4">
<a href="#"><img src="https://img.lazcdn.com/g/tps/imgextra/i3/O1CN01Wdetn224xMIRNihao_!!6000000007457-2-tps-34-34.png" alt="Facebook" class="h-6"></a>
<a href="#"><img src="https://img.lazcdn.com/g/tps/imgextra/i4/O1CN01D6oQr31GPG1ONK9jd_!!6000000000614-2-tps-34-34.png" alt="LinkedIn" class="h-6"></a>
<a href="#"><img src="https://img.lazcdn.com/g/tps/imgextra/i4/O1CN01zt1zOu1zsFnzoIWje_!!6000000006769-2-tps-34-34.png" alt="YouTube" class="h-6"></a>
<a href="#"><img src="https://img.lazcdn.com/g/tps/imgextra/i4/O1CN011gka8L1E0PIZlHK7e_!!6000000000289-2-tps-34-34.png" alt="Instagram" class="h-6"></a>
<a href="#"><img src="https://img.lazcdn.com/g/tps/imgextra/i3/O1CN01bSHOIg1O2N9lO20XK_!!6000000001647-2-tps-34-34.png" alt="Twitter" class="h-6"></a>
</div>
</div>
</div>
</div>
</footer>
<script>
AOS.init();
feather.replace();
</script>
</body>
</html>