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

'QR component' Responsive landing page using Flexbox

#cube-css
Barv11β€’ 30

@Barv11

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I will appreciate uf i could get feedbacks.

Community feedback

Vanza Setiaβ€’ 27,855

@vanzasetia

Posted

Hello there! πŸ‘‹

Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰

There are some animations on this page so it's best to make sure that the animations are off for the users who prefer not to see them. You can use the prefers-reduced-motion query to do that.

I would not recommend setting height on the main element. It causes an issue where on mobile landscape view, the card gets cut off, and also the users can't scroll to see the rest of the content. So, I suggest using min-height instead.

I recommend making the bold text h1. It's not because of the styling but to give structure to the page. Keep in mind, that the heading is not about the styling, it's about the meaning. You can think of a heading like a title on a document.

Lastly, I recommend learning more about b tag by reading the MDN documentation of it. There will be some information on how to use it.

That's it! I hope you find this useful! 😊

2

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