This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: GitHub
- Live Site URL: GitHub Page
- HTML
- CSS
- CSS variables
- BEM
- Flexbox
In the current projection, I have attempted to apply the BEM methodology.
<div class="text">
<h1 class="text__title">Order Summary</h1>
<p class="text__description">
You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!
</p>
</div>
.text {
text-align: center;
margin-bottom: 1.5rem;
}
.text__title {
font-size: 1.75rem;
font-weight: 900;
margin: 1rem 0;
color: var(--darkBlueColor);
}
.text__description {
margin: 1rem 48px;
color: var(--desaturatedBlueColor);
}
In the next task, I will focus on using the SCSS preprocessor. The SCSS preprocessor works well with BEM.
- BEM - This page helped me understand how BEM.
- Frontend Mentor - @maciej-szeremeta