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.
Users should be able to:
- View the optimal layout for the section depending on their device's screen size
- Solution URL: Frontendmentor.io
- Live Site URL: fsuropaty.github.io
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I learned about :
- CSS combinator
- Selecting specific child of elements in CSS
/* Combinator */
.title > p {
text-align: center;
margin: 0;
margin-bottom: 3rem;
color: var(--Dark-Grayish-Magenta);
font-weight: 500;
font-size: 1rem;
padding: 0 0.3rem;
}
/* Select specific child */
.rating:nth-child(2) {
margin-left: 5rem;
}
.rating:nth-child(3) {
margin-left: 10rem;
}
- Website - fsuropaty
- Frontend Mentor - @fsuropaty