QR code desafio Front-end mentor

Bom dia Ramon,

Quanto ao seu HTML:

Nas linhas 13 e 14 ao invés de usar dois <div> pra melhorar a semântica dá pra usar:

<main class="display">
<figure class="img>

Além disso, a frase Melhore suas habilidades de front-end criando projetos na minha opinião se encaixa melhor como um <h2>. O <h1> que creio ser mais descritivo é:

<h1 class:"sr-only"> Card com QR code âncorado ao site FrontendMentor </h1>

sendo que esta classe esconde, deixando-o visível apenas ao leitor de tela.

O porquê de fazer isso com o h1 está neste link do MDN.

Quanto ao CSS:

na tua linha 24, ao invés de usar max-width: 21rem, sugiro que uses width: 100%.

Assim ele vai até onde o .display { padding: 1rem} permitir.

Se este comentário te ajudou, por favor marque como helpful na parte inferior direita aqui dentro dele.

Bem vindo a comunidade,

Um salve de Curitiba/PR :D

Parabéns pela solução!

Vi que acabou não colocando as cores das fontes. Por que não aproveita e cria variáveis com as cores e aí pode usar onde quiser.

Exemplo:

:root {
/* Color variables  */
--color-dark-blue: hsl(218, 44%, 22%);

/* Font variables  */
--font-primary: "Outfit", sans-serif;
}

h1 {
color: var(--color-dark-blue)
} 

Tente organizar seu CSS em que os seletores fiquem ordenados por tipo ou especificidade, por exemplo:

body {} h1,h2, etc{} .display{}

Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add background color to body to make background as per design

body
{
background:hsl(212, 45%, 89%);
}