Social proof section solution

Table of contents

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

Overview

Screenshot

Links

• Solution URL: https://github.com/hassanidris/social-proof-section
• Live Site URL: https://hassanidris.github.io/social-proof-section/

My process

Built with

• CSS Variables
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

To see how you can add code snippets, see below:

• CSS Variables

--clr-veryDarkMagenta: hsl(300, 43%, 22%);
--clr-softPink: hsl(333, 80%, 67%);

• Nesting media queries inside the classes

&__title {
  font-size: var(--fs-300);
  color: var(--clr-veryDarkMagenta);
  line-height: 1;
  max-width: 11ch;
  margin-bottom: 0.5em;
  font-weight: var(--fw-700);

  @media (max-width: 50em) {
    margin-inline: auto;
    margin-bottom: 1em;
  }
}

Author

• Github - hassanidris
• Frontend Mentor - @hassanidris