Just basic CSS media queries

Parabéns pelo excelente trabalho em completar o desafio! Tenho algumas sugestões sobre seu código que podem ser úteis.

HTML:

• Envolver todo o conteúdo principal da página dentro da tag <main> não só ajuda na organização do código, como também melhora a semântica do código, tornando-o mais acessível. Além disso, remover classes desnecessárias pode tornar o código mais limpo e fácil de manter.

• É importante prestar atenção à estruturação dos cabeçalhos no seu documento. Para garantir uma hierarquia clara e coerente, é recomendável sempre iniciar com <h1> e descer os níveis de cabeçalho de maneira ordenada, como <h2>, <h3>, etc. Isso ajuda a tornar o conteúdo mais fácil de navegar e compreender para o leitor. Mantenha essa boa prática em mente ao criar seus documentos.

CSS:

• Para centralizar o componente na página, sugiro utilizar o Flexbox ou o Grid. Abaixo, você pode ver exemplos de como implementar ambas as opções:

.body {
    width: 100%; 
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body {
    width: 100%; 
    min-height: 100vh;
    display: grid;
    place-content: center;
}

Espero que essas sugestões sejam úteis!"

Hi Haileleul

Use CSS grid or flexbox to create the layout, instead of using media queries.

Use semantic HTML elements for better accessibility.

Extract the repeated styles and create a separate class for them.

Use CSS variables for maintaining consistency in colors and fonts.

Organize your CSS code into separate files for different components or sections of your site.

Use a CSS reset or normalize stylesheet to standardize the default styling of HTML elements across different browsers.

Regularly test your code on different browsers and devices to catch any compatibility issues early.

Good Luck