This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: https://github.com/hassanidris/four-cards-feature-section
- Live Site URL: https://hassanidris.github.io/four-cards-feature-section/
- SASS / CSS Variables
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Note: These are just examples. Delete this note and replace the list above with your own choices
To see how you can add code snippets, see below:
- CSS Variables
--clr-red: 0 78% 62%;
--clr-cyan: 180 62% 55%;
--clr-orange: 34 97% 64%;
--clr-blue: 212 86% 64%;
- Nesting media queries inside the classes
@media (max-width: 610px) {
.statement {
font-size: var(--fs-400);
text-align: center;
margin: 0 0.1em;
}
.header_title {
font-size: var(--fs-400);
text-align: center;
margin: 0 0.4em;
}
.header_text {
width: 100%;
text-align: center;
margin: 0 6em;
}
.cards {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1em;
}
}
- Github - hassanidris
- Frontend Mentor - @hassanidris