Loopstudios [Landing Page]
Design comparison
Solution retrospective
The challenge was pretty straightforward and a great way to practice responsive images and overlapping content.
The "Creations" section required the most attention, as I wanted the entire image to be "clickable" and be accessible, while also applying gradient-background to the image.
To make things easier to manage, I decided to implement each creation item as a JSON and then render it as list using map().
After that I "overlapped" the links and images on top of one another using CSS Grid:
&__item {
display: grid;
grid-template-areas: "stack";
& > * {
grid-area: stack;
}
}
For the layout, I used grid-template-columns and simply changed the layout during certain breakpoints.
To make the entire image "clickable" I used Andy Bell's method of doing so:
More details provided in the GitHub README...
As always, all feedback to better improve this challenge is greatly appreciated! ♥️
Community feedback
- @ApplePieGiraffePosted over 1 year ago
Hello, バレンタイン 😈! 👋
Nice job on this challenge! 👍 Your solution looks great in the design comparison! 👏
I think the "Leader in interactive VR" section might be missing its background color in the desktop layout (since at the moment some of the text in that section gets hidden behind the image next to it) 😅
Also (as your solution report suggests), you can probably leave the alt text for the images in the "Our creations" section empty since the links that they are a part of already have text inside them to identify them
And don't forget to add a favicon to your site 😉
Keep coding (and happy coding, too)! 😁
0@VCaramesPosted over 1 year ago@ApplePieGiraffe
Thank you for the feedback!
Regarding the "Leader in Interactive VR", I tested the site in Safari, Chrome and Firefox but unfortunately, I am not able to replicate the error you're experiencing...
1@ApplePieGiraffePosted over 1 year ago@vcarames
No problem! 👍
I took another look at the bug in the "Leader in interactive VR section" and it looks like it only shows up in my specific Chrome profile so I'm guessing it might actually be caused by one of my browser extensions or something. My bad 😅
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