<!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>
<link rel="stylesheet" href="styles.css" />
</head>
<body class="flex min-h-dvh items-center justify-center bg-cream p-4">
<main
class="flex max-w-[600px] flex-col overflow-hidden rounded-xl bg-white text-metal-400 sm:flex-row"
>
<picture class="flex-1">
<source
srcset="/images/image-product-desktop.jpg"
media="(min-width: 640px)"
/>
<img
class="min-h-full object-cover"
src="/images/image-product-mobile.jpg"
alt="Gabrielle Essence Eau De Parfum"
/>
</picture>
<div class="flex-1 p-6 sm:p-8">
<p class="text-category uppercase">Perfume</p>
<h1 class="mt-3 font-serif text-heading text-metal-700">
Gabrielle Essence Eau De Parfum
</h1>
<p class="mt-4 text-body">
A floral, solar and voluptuous interpretation composed by Olivier
Polge, Perfumer-Creator for the House of CHANEL.
</p>
<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
class="mt-5 inline-flex w-full items-center justify-center gap-3 rounded-lg bg-aquamarine-400 p-4 hover:bg-aquamarine-700"
>
<img src="/images/icon-cart.svg" width="15" height="16" />
<span class="text-body font-bold text-white"> Add to Cart </span>
</button>
</div>
</main>
</body>
</html>