Submitted almost 2 years ago

Loopstudios landing page

Mugiwara• 250

@mmovie416

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS
JS

2junior

View challenge

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,420

@correlucas

Posted almost 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

Mugiwara• 250

@mmovie416

Posted almost 2 years ago

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

バレンタイン 😈• 64,190

@VCarames

Posted almost 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

Mugiwara• 250

@mmovie416

Posted almost 2 years ago

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

Please log in to post a comment

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