Design comparison
Solution retrospective
This challenge brings together all the know-how learned so far, I am happy to have been able to go all the way. I took my time, I came up against many difficulties but almost every time I quickly found a solution. That's the job that comes in!
What challenges did you encounter, and how did you overcome them?Three big challenges: 1. make the hero image overflow on both sides of the screen. I didn't manage it but I think it's just a minor detail so I didn't bother. 2. Put two hero images on the desktop version. I ended up putting all the hero images in the html, then making the ones I wanted appear in the css (display: none / display: block). I don't know if this is a good way of doing it! 3. I had a lot of trouble getting the background image to fit into the footer as I wanted because I didn't know this function well. After playing around a bit and trying different combinations, I finally settled on a largely acceptable solution.
What specific areas of your project would you like help with?I haven't had any major difficulties to overcome yet, however I welcome any advice!
Community feedback
- @christianb3llPosted 20 days ago
Great job! It's really accurate to the design. Espescially the hero images. I wasn't sure on the best way to tackle showing/hiding the hero images either. I opted to use the picture tag to swap the left image with the main image on lower screen sizes. Then I just hid the right hand image. I don't think there's an elegant way to do it really.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord