💄 feat: ProductCard
This commit is contained in:
parent
7a1e20f07d
commit
d712b638ae
2 changed files with 61 additions and 23 deletions
|
@ -11,7 +11,7 @@
|
|||
|
||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||
<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%); }
|
||||
</style>
|
||||
|
@ -26,34 +26,42 @@
|
|||
</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="wrapper">
|
||||
<main 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"
|
||||
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">
|
||||
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for
|
||||
the House of CHANEL.
|
||||
</p>
|
||||
<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>
|
||||
<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>
|
||||
<button class="ProductCard-addToCart">Add to Cart</button>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<script src="./src/main.ts" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
/* ----------------------------------------------------------------------------------- &root ---- */
|
||||
|
||||
:root {
|
||||
--c-dark-cyan: 158, 36%, 37%;
|
||||
--c-cream: 30, 38%, 92%;
|
||||
--c-dark-cyan: hsl(158, 36%, 37%);
|
||||
--c-cream: hsl(30, 38%, 92%);
|
||||
|
||||
--c-dark-blue: 212, 21%, 14%;
|
||||
--c-gray-blue: 228, 12%, 48%;
|
||||
--c-dark-blue: hsl(212, 21%, 14%);
|
||||
--c-gray-blue: hsl(228, 12%, 48%);
|
||||
|
||||
--t-family-body: 'Montserrat';
|
||||
--t-weight-body: 500;
|
||||
|
@ -17,6 +17,36 @@
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
html, body, .wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue