I liked all the z-index stuff going on in this challenge, but as a result, I had a difficult time making it responsive. There's a ton of over-styling, and it's still not perfect. I think if I were to do it over, I might set two BG images for the photo div?
The slider definitely complicates things. I couldn't find a good way to set the BG image in the CSS with Javascript, so I had to set the BG image inline in the photo div and use JS to change that. My JS slider solution is kind of crude, but it works. Overall, this is a challenge I'd like to come back to when I have a little more experience...I think I've been staring at it too long!
Your challenge is to build out this social proof section and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
- Dark Blue: hsl(240, 38%, 20%)
- Grayish Blue: hsl(240, 18%, 77%)
- Font size: 32px
- Family: Inter
- Weights: 300, 500, 700