Responsive Loopstudio landing page

Hey there! 👋 Unfortunalty, there are a lot issues that I would not expect at this challenge level... I would highly recommend starting with an easier challenge.

Here are some suggestions to help improve your code:

• Your navigation needs to be rewritten⚠️. There should not be two separate codes for your navigation menu, there should only be one and you will use CSS to style it for mobile/desktop.

• Since your logo is wrapped inside an anchor element, you need to include ⚠️ an aria-label stating the logo's name ("Loopstudios") and where it leads to ("Home").

• The nav toggle should be the first thing inside of the nav to improve accessibility and it should⚠️ be a button not an anchor. It should also have aria-expanded, area-label and an aria-control.

• Remove all the br elements you have added, they are being used incorrectly🚩.

• The "Our Creations" heading should be an h2 not and h3. As for the card headings, they should all be h3.

• For the card, instead of doing this [example provided at bottom of text], it far better to use the picture element.

❌:

 <a href="#" class="img-desktop"><img src="images/desktop/image-deep-earth.jpg" alt="#"></a>
<a href="#" class="img-mobile"><img src="images/mobile/image-deep-earth.jpg" alt="#"></a>

• In the card, the images should not❌ be the element that is interactive, it should be the text and you have the text "breakout" to make the entire card interactive.

Here is a helpful article on how to achieve that https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 👾