punkfairie/frontend-mentor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 feat: ProductCard

Browse source
This commit is contained in:
marleyrae 2023-05-28 19:41:22 -07:00
parent 7a1e20f07d
commit d712b638ae
2 changed files with 61 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
product-preview-card-component/index.html
View file

@ -11,7 +11,7 @@
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style> <style>
.attribution { font-size: 11px; text-align: center; } .attribution { font-size: 11px; text-align: center; margin-bottom: 10px; }
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(228, 45%, 44%); }
</style> </style>
@ -26,34 +26,42 @@
</head> </head>
<body> <body>
<main class="ProductCard"> <div class="wrapper">
<picture class="ProductCard-picture"> <main class="ProductCard">
<source media="(max-width: 999px)" srcset="images/image-product-mobile.jpg"> <picture>
<source media="(min-width: 1000px)" srcset="images/image-product-desktop.jpg"> <source media="(max-width: 999px)" srcset="images/image-product-mobile.jpg">
<img src="images/image-product-desktop.jpg" alt="Gabrielle Essence perfume bottle"> <source media="(min-width: 1000px)" srcset="images/image-product-desktop.jpg">
</picture> <img
src="images/image-product-desktop.jpg"
alt="Gabrielle Essence perfume bottle"
class="ProductCard-picture"
>
</picture>
<div class="ProductCard-category">Perfume</div> <div class="ProductCard-category">Perfume</div>
<h1 class="ProductCard-title">Gabrielle Essence Eau De Parfum</h1> <h1 class="ProductCard-title">Gabrielle Essence Eau De Parfum</h1>
<p class="ProductCard-description"> <p class="ProductCard-description">
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for
the House of CHANEL. the House of CHANEL.
</p> </p>
<div class="ProductCard-priceContainer"> <div class="ProductCard-priceContainer">
<span class="ProductCard-price">$149.99</span> <span class="ProductCard-price">$149.99</span>
<span class="ProductCard-price--discounted">$169.99</span> <span class="ProductCard-price--discounted">$169.99</span>
</div> </div>
<button class="ProductCard-addToCart">Add to Cart</button> <button class="ProductCard-addToCart">Add to Cart</button>
</main> </main>
</div>
<div class="attribution"> <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend
Mentor</a>. Mentor</a>.
Coded by <a href="https://punkfairie.net">Marley Rae</a>. Coded by <a href="https://punkfairie.net">Marley Rae</a>.
</div> </div>
<script src="./src/main.ts" type="module"></script>
</body> </body>
</html> </html>

38
product-preview-card-component/src/style.css
View file

@ -1,11 +1,11 @@
/* ----------------------------------------------------------------------------------- &root ---- */ /* ----------------------------------------------------------------------------------- &root ---- */
:root { :root {
--c-dark-cyan: 158, 36%, 37%; --c-dark-cyan: hsl(158, 36%, 37%);
--c-cream: 30, 38%, 92%; --c-cream: hsl(30, 38%, 92%);
--c-dark-blue: 212, 21%, 14%; --c-dark-blue: hsl(212, 21%, 14%);
--c-gray-blue: 228, 12%, 48%; --c-gray-blue: hsl(228, 12%, 48%);
--t-family-body: 'Montserrat'; --t-family-body: 'Montserrat';
--t-weight-body: 500; --t-weight-body: 500;
@ -17,6 +17,36 @@
font-size: 14px; font-size: 14px;
} }
html, body, .wrapper {
width: 100vw;
height: 100vh;
}
body { body {
font-size: 1rem; font-size: 1rem;
background-color: var(--c-cream);
font-family: var(--t-family-body);
font-weight: var(--t-weight-body);
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
/* ---------------------------------------------------------------------------- &ProductCard ---- */
.ProductCard {
--border-radius: 10px;
height: 90%;
width: 90%;
background-color: white;
border-radius: var(--border-radius);
}
.ProductCard-picture {
width: 100%;
border-radius: var(--border-radius) var(--border-radius) 0 0;
} }