Submitted about 12 hours ago

QR CODE card

Morrango•40

@Moranggoo

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Brian Muniz Silveira•120

@BrianMunizSilveiraPosted about 12 hours ago

Sugestões para o Desafio: Component de QR Code

Seu código está muito bem estruturado e funcional! Aqui estão algumas sugestões para melhorar ainda mais o projeto e torná-lo mais profissional:

1. Responsividade

Embora o layout funcione bem em telas menores, é uma boa prática adicionar media queries para melhorar a aparência em dispositivos de diferentes tamanhos. Por exemplo:

@media (max-width: 320px) {
  main {
    max-width: 90%;
    padding: 15px;
  }

  img {
    width: 100%;
  }

  h1 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.9rem;
  }
}

2. Acessibilidade

Melhore a acessibilidade do seu site para garantir que todos os usuários possam aproveitá-lo:
Adicione uma descrição mais detalhada ao atributo alt da imagem:

<img src="imagens/image-qr-code.png" alt="QR Code para acessar o site Frontend Mentor">

Utilize tags semânticas como <section> ou <header> para descrever melhor as áreas do conteúdo.

3. Centralização Melhorada

A centralização atual funciona bem, mas pode ser otimizada usando flexbox no lugar do position: absolute; e transform. Isso também ajuda na responsividade. Exemplo:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

main {
  background-color: white;
  max-width: 260px;
  padding: 20px;
  border-radius: 20px;
}

4. Melhorias Tipográficas

Pequenas melhorias podem tornar o texto mais legível e visualmente agradável:
Ajuste o espaçamento das letras e o line-height:

h1 {
  margin: 20px 0;
  text-align: center;
  color: hsl(218, 44%, 22%);
  font-size: 1.5rem;
  line-height: 1.4;
}

p {
  color: hsl(216, 15%, 48%);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
}

5. Sombras e Interatividade

Adicione sombras sutis e efeitos de hover para melhorar a aparência e a interatividade:

main {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

6. Separação de Estilos

Considere mover o CSS para um arquivo separado (ex.: style.css) para melhorar a organização. Exemplo de estrutura de arquivos:

/
|-- index.html
|-- style.css
|-- imagens/
    |-- image-qr-code.png

O <head> no HTML ficaria assim:

<link rel="stylesheet" href="style.css">

Resumo

Pontos Fortes: Estrutura limpa, design funcional e foco na simplicidade.
Melhorias Sugeridas: Responsividade, acessibilidade, centralização com flexbox e interatividade.

Essas sugestões vão ajudar você a criar um projeto mais refinado e profissional. Continue praticando e evoluindo! 🚀😊

Brian.

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