2
respostas

Aplicação de variaveis

Boa tarde, entao terminei a aula de variáveis no CSS, porem faço tudo conforme a aula porem ao aplicar as variáveis no código, não da certo, e como se tivesse removido/não aplicado a cor e fica com padrão do CSS. Segue abaixo meu código:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

@import url('https://fonts.googleapis.com/css2? family= Krona+One & display=swap'); @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');*{

:root { --cor-primaria: #0C2D57; --cor-segundaria: #FC6736; --cor-terciaria: #FFB0B0; --cor-houver: #EFECEC;

--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;

} *{ margin: 0; padding: 0; }

body { /* height: 100vh; / box-sizing: border-box; background-color: var(--cor-primaria); / aqui quando aplico a variável a pagina fica em branco em vez do azul, e assim em todos locais qu tento aplicar a cor */ color: #EFECEC;}

.cabecalho { padding: 2% 0% 0% 8%; }

.cabecalho_menu { display: flex; gap: 80px; }

.cabecalho_menu_link { font: 'Montserrat', sans-serif; font-size: 24px; font-weight: 600; color: white; text-decoration: none; } .destaque-titulo { color: #FC6736; }

.destaque-texto { color: #FFB0B0; }

.apresentacao { padding: 5% 8%; display: flex; align-items: center; justify-content: space-between; }

.apresentacao_conteudo { width: 615px; display: flex; flex-direction: column; gap: 40px; }

.apresentacao-titulo { font-size: 36px; font-family: 'Krona One', sans-serif; text-align: justify; }

.apresentacao_texto { font-size: 24px; text-align: justify; font-family: 'Montserrat', sans-serif; }

.apresentacao_links { display: flex; flex-direction:column; justify-content: space-between; align-items: center; gap: 32px; }

.apresentacao_links_subtitulo { font-family: 'Krona One', sans-serif; font-weight: 400; font-size: 24px; } .aprest__links__link { display: flex; justify-content: center; gap: 16px; border: 2px solid #FC6736; width: 378px; text-align: center; border-radius: 8px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: white; font: 'Montserrat', sans-serif;

} .aprest__links__link:hover { background-color: #265073; /* font-size: 25px; */ color: #FFB0B0;}

.rodape { padding: 24px; color: white; background-color: #FC6736; text-align: center; font: 'Montserrat', sans-serif; font-size: 24px; font-weight: 400;

}

2 respostas

Boa noite Sidney, pelo código que você postou, tem um asterisco e abertura de chave sobrando no final do segundo @import:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');*{

Apaga só esses dois símbolos e vê se dá certo.

deu certo, obrigado