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-front-end-mentor attempt-2

@codekesh

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 fixed minor mistakes. Now if any, Please suggest me.

Community feedback

Prithvi 110

@Prithvi12890

Posted

Hello Keshav!

If you want to remove the accessibility issue we can do it quickly as follows:

Since you do not have only one heading, use <h1>' tag instead of <h2>i.e., change<h2 class="firstpara center">Improve your front-end skills by building projects</h2>to<h1 class="firstpara center">Improve your front-end skills by building projects</h1>'

And, coming to center your whole card, try using relative units like % instead of px for the top attribute in the CSS file. Like, you can try changing the top attribute in section ID from #section { top: 100px; } to... #section { top: 50%; transform: translateY(-50%); }

Another alternative is to use a flexbox which will take away most of the work and make sizing and positioning easy and flexible. If you don't know flexbox, I recommend doing this short course on flexbox to get you started.

Everything else looks great!!. Hope these suggestions help you ✌

Good Styling!

0

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