💄 feat: ProductCard-category

This commit is contained in:
marleyrae 2023-05-28 20:45:21 -07:00
parent d712b638ae
commit b06dfddcad
2 changed files with 30 additions and 17 deletions

View file

@ -38,21 +38,24 @@
> >
</picture> </picture>
<div class="ProductCard-category">Perfume</div> <section class="ProductCard-body">
<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
the House of CHANEL. for
</p> the House of CHANEL.
</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>
</section>
</main> </main>
</div> </div>

View file

@ -1,11 +1,11 @@
/* ----------------------------------------------------------------------------------- &root ---- */ /* ----------------------------------------------------------------------------------- &root ---- */
:root { :root {
--c-dark-cyan: hsl(158, 36%, 37%); --c-darkCyan: hsl(158, 36%, 37%);
--c-cream: hsl(30, 38%, 92%); --c-cream: hsl(30, 38%, 92%);
--c-dark-blue: hsl(212, 21%, 14%); --c-darkBlue: hsl(212, 21%, 14%);
--c-gray-blue: hsl(228, 12%, 48%); --c-grayBlue: hsl(228, 12%, 48%);
--t-family-body: 'Montserrat'; --t-family-body: 'Montserrat';
--t-weight-body: 500; --t-weight-body: 500;
@ -27,6 +27,7 @@ body {
background-color: var(--c-cream); background-color: var(--c-cream);
font-family: var(--t-family-body); font-family: var(--t-family-body);
font-weight: var(--t-weight-body); font-weight: var(--t-weight-body);
color: hsla(0, 0%, 0%, 60%);
} }
.wrapper { .wrapper {
@ -38,15 +39,24 @@ body {
/* ---------------------------------------------------------------------------- &ProductCard ---- */ /* ---------------------------------------------------------------------------- &ProductCard ---- */
.ProductCard { .ProductCard {
--border-radius: 10px; --ProductCard-borderRadius: 10px;
height: 90%; height: 90%;
width: 90%; width: 90%;
background-color: white; background-color: white;
border-radius: var(--border-radius); border-radius: var(--ProductCard-borderRadius);
} }
.ProductCard-picture { .ProductCard-picture {
width: 100%; width: 100%;
border-radius: var(--border-radius) var(--border-radius) 0 0; border-radius: var(--ProductCard-borderRadius) var(--ProductCard-borderRadius) 0 0;
}
.ProductCard-body {
padding: 1.25rem 1.75rem;
}
.ProductCard-category {
text-transform: uppercase;
letter-spacing: .3rem;
} }