1
Fork 0
This repository has been archived on 2024-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
product-preview-card/index.html

60 lines
1.8 KiB
HTML
Raw Normal View History

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
>
<picture>
<source
srcset="/images/image-product-desktop.jpg"
media="(min-width: 640px)"
/>
<img
2024-07-05 00:31:54 +00:00
class="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:31:54 +00:00
<div class="p-6 sm:p-8">
<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>