*{
padding:0;
margin:0;
box-sizing: border-box;
}
h1{
font-size: var(--font-size-h1);
color:var(--cor-texto);
text-align: left;
width:100%;
}
p.urgente{
max-width: 100%;
color:#ff8dff;
font-size:var(--font-size-p);
text-align: justify;
padding:10px;
margin:0 5px;
text-shadow: 2px 2px 3px #000;
}
h2.urgente-h2{
font-size: var(--font-size-h2);
color:#abffff;
text-align: left;
width:100%;
padding:10px;
}
Oi, Jailson!
Obrigada por compartilhar seu código com a comunidade Alura.
Legal como você configurou os estilos de forma organizada, utilizando variáveis CSS pra facilitar a manutenção e personalização das propriedades. Essa abordagem torna o código mais limpo e flexível, especialmente em projetos maiores.
Para saber mais:
A título de curiosidade, você sabia que é possível fazer animações incríveis no CSS utilizando apenas transições e transformações? Isso pode ser feito com propriedades como transform e transition, que permitem que você mova, gire ou redimensione elementos de forma suave ao longo do tempo. Veja um exemplo simples:
div {
width: 100px;
height: 100px;
background-color: #4CAF50;
transition: transform 0.3s ease;
}
div:hover {
transform: scale(1.2) rotate(45deg);
}Essa animação faz o elemento aumentar de tamanho e girar ao ser passado o mouse sobre ele. As possibilidades de animações no CSS são vastas e podem deixar seu site bem mais dinâmico e interativo.
Se você quer aprender mais sobre como criar animações com CSS, confira este artigo do MDN Web Docs sobre Transições CSS.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!