Skip to content
Submitted over 2 years ago

landing page used html and css only

Anthony Guilherme•190
@oAnthonyG
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

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

Community feedback

  • Luciano Lima•1,290
    @LucianoDLimaPosted over 2 years ago

    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
    2
  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    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
    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