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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Loopstudios landing page

@filipjuszczak

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


Hi!

Any feedback/best practices appreciated! :)

P.S. Is there a better way to implement the "our creations" section?

Community feedback

BT738844 600

@BT453567

Posted

Hello there

With regards to the VR section ("The leader in interactive VR"), this could be implemented with grid.

At the moment when you reduce the window size, the VR text box goes out of alignment with the image.

To implement with grid, if you setup 4 columns, where the image spans columns 1-3 and the text box spans columns 3-4.

Ensure the text box has a higher z-index, is positioned at the bottom of the column and the background colour is transparent so you can see the image around the text box.

Grid is the best way to implement "Our Creations" in my opinion. Try adding support for mobile screen with the following in CSS:

@media only screen and (max-width: 767px) { .. }

You can also change to the mobile image when the screen reduces by the following in HTML:

<picture> <source srcset="./assets/images/mobile/image-pocket-borealis.jpg" media="(max-width: 767px)"> <img class="creations-section__grid-image" src="./assets/images/desktop/image-pocket-borealis.jpg" alt=""> </picture>

Hope that helps

0

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