Skip to content
Submitted almost 3 years ago

qr-code-component

Leonam Monteiro•10
@lpdm1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First ever challenge. I'm studying Front-End for about 3 weeks now. Any suggestions?

Community feedback

  • Brendan Hyde•330
    @hyde-brendanPosted almost 3 years ago

    Hey there! Great job with this solution. You can center the component vertically by:

    • On <body>, add:
    min-height: 100vh;
display: grid;
place-items: center;
    • Remove or set display: none; to the #99fd803e-8fff-4139-9542-d0a0011cc7ff-quickmenu <div> after the hero <div>.

    Also, to fix the Document should have one main landmark issue, change your hero from a <div> to a <main>.

    Marked as helpful
    1
  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    For this being your first challenge here, you did really well man. Nice work.

    Marked as helpful
    1
  • Vinicius Henrique•590
    @viniciusshenri96Posted almost 3 years ago

    @lpdm1 Olá, parabéns por finalizar o desafio, não sei se você está iniciando, mas evite pular níveis de título: sempre comece de <h1>, seguido de <h2> e assim por diante. Por exemplo você começou com <h3>Improve your front-end skills by building projects</h3> poderia ter usado h1. Leia esse artigo, pra você saber mais.

    Espero ter ajudado :)

    Marked as helpful
    1
  • Account deleted

    Hi there 👋

    Congratulate on finishing your project 🎉. You did a great job 💡

    I give some suggestions to help you take your project design to the next level 📈😉

    • Add some box-shadow to the card ✅
    • Using percentages in border radius is not good in most cases, let's change the border radius of the card from 5% to 15px

    Happy coding ☕

    Maqsud

    Marked as helpful
    1

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