This is a solution to the Social proof section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the section depending on their device's screen size
- Solution URL: Github
- Live Site URL: Github Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I used a section element as the main container since this is just a part/section and I think it's easier to add this to a project (if there's a whole challenge with this on it) if it's already in a section element.
<section class="social-proof">
</section>
I learned to used two background images on this project. I encountered a problem with the right bottom positioning of the bottom image and gald I found how to fixed it with "fixed" as background-attachment.
body {
background: url(../images/bg-pattern-top-mobile.svg) left top, url(../images/bg-pattern-bottom-mobile.svg) right bottom;
background-repeat: no-repeat, no-repeat;
background-attachment: scroll, fixed;
}
I also tried using BEM. I watched a video of Kevin Powell and he mentioned it, and as a curious cat, I searched more about it. It's very effective in my opinion because someone else can read the css code and not be confused on what's selector/s is/are inside an element/selector/s or if it's just a styling an element.
I added classes in the h2 and p elements because I think it's more cleaner in the css and can be easier to udnerstand.
/* ----- INTRO */
.intro {
text-align: center;
margin-bottom: 2.5em;
}
.intro__heading {
color: var(--clr-primary-600);
font-size: 2em;
line-height: 1em;
margin-bottom: 0.95em;
}
.intro__desc {
color: var(--clr-neutral-400);
font-size: 0.97em;
line-height: 1.5em;
}
My past challenges wasn't so responsive (or not at all), so I focused on this project's reponsiveness using CSS Flexbox only. It took me longer than usual, but I'm glad I did because I learned a lot about flexbox.