Skip to content
Submitted over 2 years ago

Responsive loopstudios landing page using flexbox, grid

Ricky•470
@pyaetheiN
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Loopstudios landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I enjoyed coding this challenge, it was quite fun.

Remarks:

  • using mix-blend-mode: multiplay; on child element to apply overlaying linear-gradient from parent element and display: block; to take up entire space in order for linear-gradient to work
  • removing nav menu upon clicking nav links
  • making desktop hero background image responsive using min-height: auto on parent element and padding: 7rem 0 on child element

Any feedback would be great!

Community feedback

  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Good job

    Keep up the good work completing this challenge

    Your solution looks great however I have some constructive feedback

    • The color of the text "The leader in interactive vr" is supposed to match the color specified in the style-guide.md file

    • The text on each of the cards in the "our creations" section needs a bit more opacity in order to be a bit more visible

    Lets talk about your html validation issues

    • Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. This can be fixed by using a <div> tag instead of a section tag

    Cheers

    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