BEM'd the files

This commit is contained in:
Robert McGovern 2022-01-31 02:17:57 +00:00
parent be960b0435
commit bacac581a5
2 changed files with 28 additions and 30 deletions

View File

@ -11,7 +11,6 @@
*/ */
:root { :root {
/* Colors */ /* Colors */
--clr-pale-blue: hsl(225, 100%, 94%); --clr-pale-blue: hsl(225, 100%, 94%);
--clr-bright-blue: hsl(245, 75%, 52%); --clr-bright-blue: hsl(245, 75%, 52%);
@ -70,13 +69,13 @@ main {
background-color: white; background-color: white;
text-align: center; text-align: center;
} }
.hero-image img { .card__hero-image {
width: 100%; width: 100%;
border-radius: var(--br-20) var(--br-20) 0 0; border-radius: var(--br-20) var(--br-20) 0 0;
margin-bottom: clamp(2rem, 8vw, 2.815rem); margin-bottom: clamp(2rem, 8vw, 2.815rem);
} }
.card h1 { .card__title {
font-weight: var(--fw-900); font-weight: var(--fw-900);
font-size: clamp(1.375rem, 2.5vw, 1.815rem); font-size: clamp(1.375rem, 2.5vw, 1.815rem);
line-height: 1.3195; line-height: 1.3195;
@ -84,7 +83,7 @@ main {
color: var(--clr-dark-blue); color: var(--clr-dark-blue);
} }
.card p { .card__info {
font-weight: var(--fw-500); font-weight: var(--fw-500);
margin: 0 clamp(2rem, 4vw, 3rem); margin: 0 clamp(2rem, 4vw, 3rem);
font-size: var(--font-width-15px-16px); font-size: var(--font-width-15px-16px);
@ -92,7 +91,7 @@ main {
line-height: 165%; line-height: 165%;
} }
.price-plan { .card__price-plan {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
@ -105,32 +104,31 @@ main {
background-color: var(--clr-very-pale-blue); background-color: var(--clr-very-pale-blue);
} }
.plan-type { .card__plan-type {
color: var(--clr-dark-blue); color: var(--clr-dark-blue);
font-size: var(--font-width-14px-16px); font-size: var(--font-width-14px-16px);
font-weight: var(--fw-900); font-weight: var(--fw-900);
margin-bottom: clamp(0.1875rem, 0.8vw, 0.375rem); margin-bottom: clamp(0.1875rem, 0.8vw, 0.375rem);
} }
.plan-price { .card__plan-price {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
} }
.change-button { .card__change-button {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: var(--fw-700); font-weight: var(--fw-700);
color: var(--clr-bright-blue); color: var(--clr-bright-blue);
} }
.button-area a { .card__button-area a {
display: block; display: block;
text-decoration: none; text-decoration: none;
font-weight: var(--fw-900); font-weight: var(--fw-900);
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 20px; line-height: 20px;
} }
.payment-button { .card__payment-button {
color: white; color: white;
/* margin-bottom: 1.5rem; */
background-color: var(--clr-bright-blue); background-color: var(--clr-bright-blue);
width: 85%; width: 85%;
margin: 0 auto clamp(1.5rem, 4vw, 2rem) auto; margin: 0 auto clamp(1.5rem, 4vw, 2rem) auto;
@ -138,7 +136,7 @@ main {
border-radius: var(--br-11); border-radius: var(--br-11);
padding: 15px 0; padding: 15px 0;
} }
.cancel-button { .card__cancel-button {
margin-bottom: clamp(2rem, 8vw, 3rem); margin-bottom: clamp(2rem, 8vw, 3rem);
} }
@ -150,15 +148,15 @@ main {
background-image: url(../images/pattern-background-desktop.svg); background-image: url(../images/pattern-background-desktop.svg);
} }
.change-button:hover { .card__change-button:hover {
color: var(--clr-light-purple); color: var(--clr-light-purple);
} }
.payment-button:hover { .card__payment-button:hover {
background-color: var(--clr-light-purple); background-color: var(--clr-light-purple);
} }
.cancel-button:hover { .card__cancel-button:hover {
color: var(--clr-dark-blue); color: var(--clr-dark-blue);
} }
} }

View File

@ -29,26 +29,26 @@
<main> <main>
<div class="card"> <div class="card">
<div class="hero-image"> <img class="card__hero-image" src="./images/illustration-hero.svg"
<img src="./images/illustration-hero.svg"
alt="Hero Image Person holding an audio device and wearing headphones"> alt="Hero Image Person holding an audio device and wearing headphones">
</div> <h1 class="card__title">Order Summary</h1>
<h1>Order Summary</h1> <p class="card__info">
<p>
You can now listen to millions of songs, audiobooks, and podcasts on any You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like! device anywhere you like!
</p> </p>
<div class="price-plan"> <div class="card__price-plan">
<img class="icon" src="./images/icon-music.svg" alt="Music icon" aria-hidden="true"> <!-- maybe price-plan, then price-plan__icon, __plan-type, __plan-price, __change-button? -->
<div class="plan-type-area"> <img class="card__icon" src="./images/icon-music.svg" alt="Music icon" aria-hidden="true">
<div class="plan-type">Annual Plan</div> <div class="card__plan-type-area">
<div class="plan-price">$59.99/year</div> <div class="card__plan-type">Annual Plan</div>
<div class="card__plan-price">$59.99/year</div>
</div> </div>
<a href="#" class="change-button">Change</a> <a href="#" class="card__change-button">Change</a>
</div> </div>
<div class="button-area"> <!-- maybe button-area, button-area__payment-button, button-area__cancel-button? -->
<a href="#" class="payment-button">Proceed to Payment</a> <div class="card__button-area">
<a href="#" class="cancel-button">Cancel Order</a> <a href="#" class="card__payment-button">Proceed to Payment</a>
<a href="#" class="card__cancel-button">Cancel Order</a>
</div> </div>
</div> </div>
</main> </main>