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: https://github.com/FazleLabib/frontend-mentor-social-proof-section
- Live Site URL: https://fazlelabib.github.io/frontend-mentor-social-proof-section
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Learned how to add multiple images as background images. Also figured out how to play with positioning of divs. I was able to position the rating cards and the review cards by manipulating the margins as shown in the given css code.
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url(./images/bg-pattern-top-desktop.svg), url(./images/bg-pattern-bottom-desktop.svg);
background-size: 60rem, 95rem;
background-position: top left, bottom right;
background-repeat: no-repeat, no-repeat;
}
#c-2 {
margin-bottom: -1rem;
margin-top: 1rem;
}
#c-3 {
margin-bottom: -2rem;
margin-top: 2rem;
}
- CSS3 Backgrounds - This helped me use multiple images as the background image.
- Frontend Mentor - @FazleLabib