Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Q.R code page

the-benn 30

@the-benn

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm proud I was able to complete this project

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

I had help from the frontend community when faced with CSS structuring challenges

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

CSS

Community feedback

DevIanL 30

@DevIanL

Posted

Acredito que poderia melhorar um pouco o resultado final. Colocando todos os elementos de texto dentro de um outro elemento semântico ( seja ele um div, um article, um footer, dentre outros... ), e a partir do CSS alinhar todos os elementos de texto dentro do elemento semântico e aumentar um pouco o seu padding( parte do conteúdo do elemento ), para que assim os elemento fiquem mais compactos dentro do elemento principal.

FICARIA ASSIM:

HTML:

<article class="Texto"> <h1 class="Titulo">Melhore suas habilidades de front-end construindo projetos</h1> <p class="Paragrafo"> Escaneie o código QR para visitar o Frontend Mentor e leve suas habilidades de codificação para o próximo nível </p> </article>

CSS:

.Texto { margin-top: 10px; padding: 30px; } .Titulo { font-size: 25px; font-family: Arial, Helvetica, sans-serif; margin: auto; margin-bottom: 30px; } .Paragrafo { color: hsl(220, 15%, 55%); font-size: 17px; font-family: Arial, Helvetica, sans-serif; }

0

Please log in to post a comment

Log in with GitHub
Discord logo

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