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/Eko-U/social_proof/
- Live Site URL: https://eko-u.github.io/social_proof/
- Semantic HTML5 markup
- CSS custom properties
- CSS Flexbox
- CSS Grid
I have been able to reinforce my knowledge on Flexbox, CSS Grid and able to use the media query in html to change different images at the given width. Code below: 👇
<picture class="bk-bottom">
<source
srcset="./images/bg-pattern-bottom-mobile.svg"
media="(max-width: 37.5em)">
<img srcset="./images/bg-pattern-bottom-desktop.svg"" alt="" aria-hidden="true">
</picture>