Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Loopstudios [Landing Page]

#react#react-router#vite#sass/scss

@VCarames

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

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

@VCarames

Posted

@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
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

@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
Discord logo

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