Frontend Mentor - Product preview card component solution

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.

Overview
- Screenshot
- Links
My process
- Built with
- What I learned
Author

Overview

Screenshot

My process

Built with

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

What I learned

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;
  }
}

Author

Github - hassanidris
Frontend Mentor - @hassanidris

hassanidris/four-cards-feature-section