2024-07-04 11:45:56 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
type="image/png"
|
|
|
|
|
sizes="32x32"
|
|
|
|
|
href="/images/favicon-32x32.png"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<title>Product preview card component</title>
|
2024-07-04 17:06:57 +00:00
|
|
|
<link rel="stylesheet" href="styles.css" />
|
2024-07-04 11:45:56 +00:00
|
|
|
</head>
|
2024-07-04 17:06:57 +00:00
|
|
|
<body class="flex min-h-dvh items-center justify-center bg-cream p-4">
|
|
|
|
|
<main
|
2024-07-05 00:31:54 +00:00
|
|
|
class="flex max-w-[600px] flex-col overflow-hidden rounded-xl bg-white text-metal-400 sm:flex-row"
|
2024-07-04 17:06:57 +00:00
|
|
|
>
|
2024-07-05 00:44:41 +00:00
|
|
|
<picture class="flex-1">
|
2024-07-04 17:06:57 +00:00
|
|
|
<source
|
|
|
|
|
srcset="/images/image-product-desktop.jpg"
|
|
|
|
|
media="(min-width: 640px)"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
2024-07-05 00:44:41 +00:00
|
|
|
class="min-h-full object-cover"
|
2024-07-04 17:06:57 +00:00
|
|
|
src="/images/image-product-mobile.jpg"
|
|
|
|
|
alt="Gabrielle Essence Eau De Parfum"
|
|
|
|
|
/>
|
|
|
|
|
</picture>
|
2024-07-04 11:45:56 +00:00
|
|
|
|
2024-07-05 00:44:41 +00:00
|
|
|
<div class="flex-1 p-6 sm:p-8">
|
2024-07-05 00:31:54 +00:00
|
|
|
<p class="text-category uppercase">Perfume</p>
|
2024-07-04 11:45:56 +00:00
|
|
|
|
2024-07-04 17:06:57 +00:00
|
|
|
<h1 class="mt-3 font-serif text-heading text-metal-700">
|
|
|
|
|
Gabrielle Essence Eau De Parfum
|
|
|
|
|
</h1>
|
2024-07-04 11:45:56 +00:00
|
|
|
|
2024-07-04 17:06:57 +00:00
|
|
|
<p class="mt-4 text-body">
|
|
|
|
|
A floral, solar and voluptuous interpretation composed by Olivier
|
|
|
|
|
Polge, Perfumer-Creator for the House of CHANEL.
|
|
|
|
|
</p>
|
2024-07-04 11:45:56 +00:00
|
|
|
|
2024-07-04 17:06:57 +00:00
|
|
|
<div class="mt-6 flex items-center gap-5">
|
|
|
|
|
<p class="font-serif text-heading text-aquamarine-400">$149.99</p>
|
|
|
|
|
<p class="text-body line-through">$169.99</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button
|
2024-07-05 00:31:54 +00:00
|
|
|
class="mt-5 inline-flex w-full items-center justify-center gap-3 rounded-lg bg-aquamarine-400 p-4 hover:bg-aquamarine-700"
|
2024-07-04 17:06:57 +00:00
|
|
|
>
|
2024-07-05 00:31:54 +00:00
|
|
|
<img src="/images/icon-cart.svg" width="15" height="16" />
|
2024-07-04 17:06:57 +00:00
|
|
|
<span class="text-body font-bold text-white"> Add to Cart </span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
2024-07-04 11:45:56 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
