Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Document</title>
</head>
<body>
<!-- Promotion Announcement -->
<div class="bg-indigo-600 px-4 py-3 text-white">
<p class="text-center font-medium">
PROMO HINGGA 60%
<a href="#" class="inline-block underline"> Berlaku hari ini saja </a>
</p>
</div>
<!-- End Promotion -->
<!-- NavBar Header-->
<header>
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:py-12 lg:px-8">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="text-center sm:text-left">
<h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">
CUY STORE
</h1>
<p class="mt-1.5 text-sm text-gray-500">
Belanja koleksi langka dan murah
</p>
</div>
<div class="flex items-center gap-4">
<div class="sm:flex sm:gap-4">
<a class="block rounded-md bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-teal-700" href="#">
Cara Belanja
</a>
<a class="hidden rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-indigo-600 transition hover:text-teal-600/75 sm:block" href="#">
Chat Admin
</a>
</div>
<button class="block rounded-sm bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden">
<span class="sr-only">Toggle menu</span>
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
</header>
<!-- End NavBar-->
<!-- Call To Action -->
<section class="bg-gray-50">
<div class="p-8 md:p-12 lg:px-16 lg:py-24">
<div class="mx-auto max-w-lg text-center">
<h2 class="text-2xl font-bold text-gray-900 md:text-3xl">
Lorem, ipsum dolor sit amet consectetur adipisicing elit
</h2>
<p class="hidden text-gray-500 sm:mt-4 sm:block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dolor officia blanditiis
repellat in, vero, aperiam porro ipsum laboriosam consequuntur exercitationem incidunt
tempora nisi?
</p>
</div>
<div class="mx-auto mt-8 max-w-xl">
<form action="#" class="sm:flex sm:gap-4">
<div class="sm:flex-1">
<input type="text" placeholder="Lemari Jam dinding Langka" class="w-full rounded-md border-gray-200 bg-white p-3 text-gray-700 shadow-xs transition focus:border-white focus:ring-2 focus:ring-yellow-400 focus:outline-hidden" fdprocessedid="ekj9om">
</div>
<button type="submit" class="group mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-indigo-600 px-5 py-3 text-white transition focus:ring-2 focus:ring-yellow-400 focus:outline-hidden sm:mt-0 sm:w-auto" fdprocessedid="sdvbhq">
<span class="text-sm font-medium"> Cari Barang </span>
<svg class="size-5 shadow-sm rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</button>
</form>
</div>
</div>
</section>
<span id="PING_IFRAME_FORM_DETECTION" style="display: none;"></span>
<!-- End Call To Action-->
<!-- Product List -->
<div class="container grid grid-cols-3 gap-4 max-w-xl mx-auto py-8">
<a href="#" class="group block">
<img src="https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160" alt="" class="h-[350px] w-full object-cover sm:h-[450px]">
<div class="mt-3 flex justify-between text-sm">
<div>
<h3 class="text-gray-900 group-hover:underline group-hover:underline-offset-4">
Small Headphones
</h3>
<p class="mt-1.5 text-xs text-pretty text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis, quia soluta
quisquam voluptatem nemo.
</p>
</div>
<p class="text-gray-900">$299</p>
</div>
</a>
<a href="#" class="group block">
<img src="https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160" alt="" class="h-[350px] w-full object-cover sm:h-[450px]">
<div class="mt-3 flex justify-between text-sm">
<div>
<h3 class="text-gray-900 group-hover:underline group-hover:underline-offset-4">
Small Headphones
</h3>
<p class="mt-1.5 text-xs text-pretty text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis, quia soluta
quisquam voluptatem nemo.
</p>
</div>
<p class="text-gray-900">$299</p>
</div>
</a>
<a href="#" class="group block">
<img src="https://images.unsplash.com/photo-1592921870789-04563d55041c?auto=format&fit=crop&q=80&w=1160" alt="" class="h-[350px] w-full object-cover sm:h-[450px]">
<div class="mt-3 flex justify-between text-sm">
<div>
<h3 class="text-gray-900 group-hover:underline group-hover:underline-offset-4">
Small Headphones
</h3>
<p class="mt-1.5 text-xs text-pretty text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi nobis, quia soluta
quisquam voluptatem nemo.
</p>
</div>
<p class="text-gray-900">$299</p>
</div>
</a>
</div>
<!-- End Product List-->
<!-- Footer -->
<footer class="bg-gray-50">
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="flex justify-center text-indigo-600 sm:justify-start font-bold">
Cuy Store
</div>
<p class="mt-4 text-center text-sm text-gray-500 lg:mt-0 lg:text-right">
Copyright © 2025. All rights reserved.
</p>
</div>
</div>
</footer>
<!-- End Footer-->
</body>
</html>
Tidak ada komentar:
Posting Komentar