Oi, Arthur! Como vai?
É muito comum passar por isso no início. O CSS é bem rigoroso com a escrita e com a forma como os elementos ocupam espaço na tela. Analisando seu código, identifiquei três pontos que estão impedindo a exibição das formas:
1. Diferença entre maiúsculas e minúsculas (Case Sensitivity)
No seu HTML, a classe está escrita como Quadrado (com a primeira letra maiúscula), mas no CSS você definiu .quadrado. Para o navegador, esses nomes são diferentes.
- Como ajustar: Altere no HTML para minúsculo ou no CSS para maiúsculo. O padrão da comunidade é usar sempre minúsculos.
2. Dimensões relativas de 0%
No seu círculo, você definiu width: 0% e height: 0%. Como a div não tem nenhum conteúdo dentro dela e o elemento pai (o body) não teve a altura definida explicitamente, o navegador entende que o tamanho desse círculo é zero pixels.
- Como ajustar: Use valores fixos em pixels para testar, como
width: 100px; e height: 100px;.
3. Acentos e a lógica das bordas
No triângulo, há dois problemas:
- O nome da classe: No CSS você usou
.triângulo (com acento) e no HTML triangulo (sem acento). Isso impede a conexão do estilo. - A lógica do desenho: Para criar um triângulo, você não pode usar o atalho
border: 50px solid #3498db; em todos os lados, pois isso cria um quadrado. Você deve deixar as bordas laterais transparentes e dar cor apenas à base (ou ao topo).
Código corrigido:
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projeto Formas Geométricas</title>
</head>
<body>
<section class="grid-formas">
<div class="card">
<div class="quadrado"></div>
<p>Quadrado</p>
</div>
<div class="card">
<div class="circulo"></div>
<p>Círculo</p>
</div>
<div class="card">
<div class="triangulo"></div>
<p>Triângulo</p>
</div>
<div class="card">
<div class="losango"></div>
<p>Losango</p>
</div>
<div class="card">
<div class="pacman"></div>
<p>Pac-Man</p>
</div>
<div class="card">
<div class="paralelogramo"></div>
<p>Paralelogramo</p>
</div>
</section>
</body>
</html>
/* Configuração Geral da Página */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.grid-formas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
padding: 20px;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card p {
margin-top: 20px;
color: #333;
font-size: 14px;
}
/* Estilos das Formas */
.quadrado {
width: 100px;
height: 100px;
background-color: #3498db;
}
.circulo {
width: 100px;
height: 100px;
background-color: #e74c3c;
border-radius: 50%;
}
.triangulo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f1c40f;
}
.losango {
width: 80px;
height: 80px;
background-color: #9b59b6;
transform: rotate(45deg);
}
.pacman {
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-top: 50px solid #2ecc71;
border-left: 50px solid #2ecc71;
border-bottom: 50px solid #2ecc71;
border-radius: 50%;
}
.paralelogramo {
width: 120px;
height: 80px;
background-color: #34495e;
transform: skew(-20deg);
}
Espero ter ajudado,
Um abraço e bons estudos.
