Design comparison
Solution retrospective
Hello everyone. This is my solution for the Sunnyside Agency Landing Page challenge.
This project was pretty much a CSS-only challenge. I chose this one thinking "I am going to chill with a Junior Project" and let me confess: It was not easy.
Many hard choices especially with the images! I chose to add them in the markup instead of using the CSS background-image because it seems to me that they are as important as the rest of the content. This decision led to more absolute positioning than I'm used to.
I am not really pleased with the current layout above 1440px. The images are not wide enough for this, so it gets really pixelated.
I can't really add a max-width to the whole thing tho it does not look like this type of layout. If you think about a solution feel free to share! 😄
Thank you for your time. Have a good day/night. Peace 😀
Community feedback
- @elaineleungPosted about 2 years ago
Hi Antoine, great job here as usual! I did this challenge a while back, and I pretty much share the same thoughts you had. I think the most challenging thing for me was in how to make the images look optimal at the appropriate widths and breakpoints, especially in making sure the image with text on top won't have important features covered by text.
By the way, I agree with you about the images being important content, as I also felt that the visual content is a crucial aspect, especially for a creative agency. This is a comment I usually make in these solutions whenever I see others using them as
background-image. I think I only had two images turned intobackground-image(the "photography" and "graphic design" ones), but I agree with your choices and might try the same if I did this again.I don't really have suggestions, but just one thing to note: Shortly past the 768px breakpoint, the titles in the "photography" and "graphic design" sections are overlapping with the images and can be a bit hard to read, so you might want to try changing the height of the section or the breakpoint.
Marked as helpful1@mattari97Posted about 2 years ago@elaineleung Hello Elaine. actually i did not see that. i will 100% try and fix that. I really appreciate your comment Elaine Ive looked at many of your projects and you write really clean code! I am also impressed by how pixel perfect you get without the figma files. So any positive comment from you is extra-appreciated by me. Peace 😊
1@elaineleungPosted about 2 years ago@AntoineC-dev Aw thanks for the comment, Antoine, that means a lot to me! 😊
1
Please log in to post a comment
Log in with GitHub
Join 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