Skip to content
Submitted 9 months ago

flexbox css html

teolima•50
@teolima
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

What are you most proud of, and what would you do differently next time?

O que eu mais tenho orgulho é de enfrentar o primeiro desafio, mesmo sabendo que estou começando na área da tecnologia. Foi errando muito nas primeiras tentativas e revendo os erros. Sei que ainda tenho muito a aprender, mas não adianta desistir. Então, é praticar e continuar tentando.

What challenges did you encounter, and how did you overcome them?

Os desafios encontrados foram muitos. Posso dividi-los em 4 etapas, que são: 1) Conseguir alinhar o QR Code no centro da página. 2) Conseguir fazer com que o QR Code ficasse com as bordas arredondadas. 3) Fazer com que o H1 e o parágrafo ficassem todos abaixo da imagem. 4) Tornar a página responsiva. Comecei a superar esses desafios a partir do momento em que parei e comecei a inspecionar a página. Nessa hora, a mente se abriu. Sei que talvez não esteja tudo perfeito, mas o legal foi que consegui alinhar o QR Code no centro da página.

What specific areas of your project would you like help with?

Gostaria muito de ajuda sobre responsividade. Eu terminei, mas não sei se fiz certo ainda. Sou iniciante e, como estou no início, não sei muita coisa e estou inseguro. Gostaria de orientação sobre se usei as divs corretamente. Não sei se usei código demais ou não. Onde posso melhorar? O que estudar mais?

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 9 months ago

    Fala @teolima!

    Seu projeto ficou ótimo!

    Sobre sua dúvida pra centralizar o card:

    📌 Existe uma forma bem eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):

    • Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):
    body {
    min-height: 100vh;
    display: flex; /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}

    Espero que ajude!

    Fora isso, você fez um excelente trabalho!

    Marked as helpful
    0
    teolima•50
    @teolimaPosted 9 months ago

    @danielmrz-dev tá blza valeu pela dica.👍

    0

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