Skip to content
Submitted about 2 years ago

Loopstudios landing page

Mugiwaraβ€’270
@mmovie416
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

here I just finished loopstudios website challange. any feedback for my design are welcome thank you

Community feedback

  • Lucas πŸ‘Ύβ€’104,340
    @correlucasPosted about 2 years ago

    πŸ‘ΎHello @mmovie416, Congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    Add transitions to make the interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

    When you add some hover effects you've to think that for the mobile version there's an issue that the elements with hover get stuck on the active state of the hover until you click on something else. Something you can do to avoid this problem on mobile, the stick hover, is to add a media query saying that you want hover effects only on devices that are not touch. So you can use:

    @media (hover: hover) {
{ADD HERE ALL THE CLASSES WITH HOVER EFFECTS TO DISABLE IT ON MOBILE}
}

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Mugiwaraβ€’270
    @mmovie416Posted about 2 years ago

    @correlucas Wow thank you for your great information. it's very helpful for me

    1
  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted about 2 years ago

    Hey @mmovie416, great job on this project!

    Some suggestions to improve you code:

    • To make your content semantically correct, you'll want to set up your code in this manner (only did the parent containers):
       <body>
      <header>
        <nav></nav>
        <section> Immersive Experince That Deliver</section>
      </header>
      <main>
        <section>The Leader In Interactive VR</section>
        <section>Our Creations</section>
      </main>
      <footer></footer>
    </body>

    The <header> element represents a group of introductory content.

    The <main> element is for the main content of you page.

    The <section> element is for grouping together a single part of the page that constitutes one single piece of functionality.

    The <footer> element represents a group of end content for a page.

    • As for you use of headings, unfortunately, they're not being used properly. There can only be one <h1> heading per page. In your page, every heading is <h1>. The hero section will always start with the <h1> heading and from then on every other heading will be <h2> unless there are secondary headings, in which case they would be <h3> headings.

    • For the "Our Creations" section you want to wrap each individual image and text in a <figure> element

    More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

    Happy Coding!

    Marked as helpful
    0
    Mugiwaraβ€’270
    @mmovie416Posted about 2 years ago

    @vcarames thank you for knowledge you share. it's very helpful for me

    0

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