1
resposta

Unidade de medidas

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root { --cor-de-fundo: #000000; --cor-primaria: #22D4FD; --cor-segundaria: #F6F6F6; --cor-tercerizada: #272727;

--fonte-titulo: "Krona One", sans-serif;
--fonte-paragrafo: "Montserrat", sans-serif;

}

body { box-sizing: border-box; background-color: var(--cor-de-fundo); color: var(--cor-segundaria); }

.cabecalho { padding: 2.5% 0% 0% 15%; }

.menu { display: flex; gap: 2.5rem; font-family: var(--fonte-paragrafo); font-weight: 600; font-size: 1.5rem; }

.link-menu { text-decoration: none; color: var(--cor-primaria); }

.link-menu:hover { color: var(--cor-segundaria); }

.container { padding: 6% 15%; display: flex; justify-content: space-between; align-items: center; }

.conteudo { display: flex; flex-direction: column; gap: 2.5rem; width: 615px; }

.titulo { font-family: var(--fonte-titulo); font-size: 2.25rem; }

.titulo-destacar { color: var(--cor-primaria); }

.texto { font-family: var(--fonte-paragrafo); font-size: 1.5rem; }

.botao { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; }

.texto-botao { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.5rem; }

.link { text-decoration: none; color: var(--cor-segundaria); font-family: var(--fonte-paragrafo); font-size: 1.5rem; font-weight: 600; border: 2px solid var(--cor-primaria); border-radius: 1rem; padding: 16px 0; width: 378px; display: flex; justify-content: center; flex-direction: row; gap: 1rem; }

.link:hover { background-color: var(--cor-tercerizada); font-size: 1.5625rem; }

.rodape { background-color: var(--cor-primaria); color: var(--cor-de-fundo); padding: 24px; text-align: center; font-family: var(--fonte-paragrafo); font-size: 1.5rem; }

1 resposta

Oi, Orlans! Como vai?

Obrigado por compartilhar suas reflexões e aprendizados com a comunidade Alura.

Seu código está bem estruturado e a utilização de variáveis CSS para armazenar cores e fontes torna a manutenção mais fácil. Gostei também da organização das classes, deixando o layout mais claro e responsivo.

Ícone de sugestão Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

Espero ter ajudado! Bons estudos!

Sucesso