Skip to content
Submitted about 3 years ago

landing page used html and css only

Anthony Guilherme•190
@oAnthonyG
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Feedback welcome. I still think there are things to improve and I'm not really sure if it's working perfectly on all platforms

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • P
    Luciano Lima•1,270
    @LucianoDLima

    Boa mano!

    O que tu pode fazer pra melhorar seria ao invés de usar <div id="container-card"> tu pode trocar por <main> que é a semântica correta para o conteúdo principal da sua página.

    Pra centralizar a página de forma correta (vertical e horizontal) tu pode primeiro remover o padding-top: 80px do seu <div id="container-card">, ai tem duas manerias boas pra seguir, que seria com grid ou flexbox, tu escolhe.

    -Com grid: Vai no <body> e adiciona -> display:grid; , place-items:center. Isso vai centralizar seus itens na tela.

    -Com flexbox: Ainda no <body> adiciona: display:flex; , flex-direction: column; , justify-content: center; , align-items: center. Isso vai deixar tudo no centro da tela, independente do zoom, e o flex-direction:column vai deixar um embaixo do outro ao invés de um do lado do outro o seu <div class="attribution">

    Marked as helpful
  • Abdul•8,560
    @Samadeen

    Hey!! Cheers 🥂 on completing this challenge.. .

    Lets firstly work on your accessibility issues.

    • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="container-card"> instead of <div class="container-card">.
    • And your footer should be <footer class="attribution"> instead of <div class="attribution">.

    This should fix most of your accessibility issues.

    -You can use flex or grid to center your container horizontally and vertically.

    . Regardless you did amazing... hope you find this helpful... Happy coding!!!

    Marked as helpful

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