This is a solution from Dimitris Kaffes to the Social proof section challenge on Frontend Mentor.
Mobile first design approach was implemented for this challenge.
A modern CSS reset (by Andy Bell) was implemented.
Extensive use of Grid takes place for the overall layout as well as for the ratings and cards containers layout.
Flexbox is used for small groups of elements.
Users should be able to:
- View the optimal layout for the section depending on their device's screen size
- Solution URL: social-proof-section solution on Github
- Live Site URL: social-proof-section live site
The HTML structure was built with semantic elements.
The HTML design took into account how the layout should look like in both mobile and desktop versions so as to have the smallest adjustments in the media query.
Custom properties were used for the colors and font-weights.
Grid layout was used for the whole .section as well as for the .ratings-container and .cards-container.
Flexbox was used for small group of elements such as the .rating--box and the .card--buyer-box.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
A pretty good practice on a complex Grid and Flexbox combination layout.
Learned how to combine 2 background images with their appropriate background-repeat and background-position properties.
Learned how to repeat an image (the icon-star.svg) so as to achieve the given design.
Futrher improve the design decisions and especially when it has to do with the choice between Grid and Flexbox.
- MDN background-image - This helped me implement the combination of background images given in the design. Furthermore, it helped me produce the repeating
icon-star.svgimage.
- Frontend Mentor - @dkaffes