Submitted almost 2 years ago

landing page used html and css only

Anthony Guilherme• 190

@oAnthonyG

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@LucianoDLima

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

Abdul• 8,560

@Samadeen

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

Please log in to post a comment

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