frontend-mentor/product-preview-card-component/index.html
2023-05-28 19:22:47 -07:00

59 lines
2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<title>Frontend Mentor | Product preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap"
rel="stylesheet"
>
</head>
<body>
<main class="ProductCard">
<picture class="ProductCard-picture">
<source media="(max-width: 999px)" srcset="images/image-product-mobile.jpg">
<source media="(min-width: 1000px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-desktop.jpg" alt="Gabrielle Essence perfume bottle">
</picture>
<div class="ProductCard-category">Perfume</div>
<h1 class="ProductCard-title">Gabrielle Essence Eau De Parfum</h1>
<p class="ProductCard-description">
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for
the House of CHANEL.
</p>
<div class="ProductCard-priceContainer">
<span class="ProductCard-price">$149.99</span>
<span class="ProductCard-price--discounted">$169.99</span>
</div>
<button class="ProductCard-addToCart">Add to Cart</button>
</main>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend
Mentor</a>.
Coded by <a href="https://punkfairie.net">Marley Rae</a>.
</div>
</body>
</html>