Exercício número um) Crie variáveis CSS com as cores, fontes, tamanhos e espaçamentos do projeto e organize-as no arquivo estilos.css.
Conteúdo CSS em estilos.css
:root {
/* Cores */
--cor-primaria-dark: #c13724;
--cor-primaria-light: #ee6451;
--cor-secundaria-light: #fff5eb;
--cor-secundaria-dark: #f5e6d6;
--cor-terciaria-medio: #cbda74;
--cor-terciaria-dark: #a2b72b;
--cor-terciaria-light: #eff2e1;
--cor-neutra-dark: #444444;
--cor-neutra-medio: #b9b9b9;
--cor-neutra-light: #ffffff;
/* Tipografia */
--font-sigmar: "Sigmar", sans-serif;
--font-poppins: "Poppins", sans-serif;
/* Tamanhos de fonte */
--font-size-xxxl: 4.5rem;
--font-size-xxl: 2.635rem;
--fonte-size-xl: 2.438rem;
--fonte-size-l: 1.938rem;
--fonte-size-xm: 1.563rem;
--fonte-size-m: 1.25rem;
--fonte-size-b: 1rem;
--fonte-size-s: 0.813rem;
/* Altura das linhas */
--line-height: 120%;
/* Espaçamentos */
--padding-xs: 0.25rem;
--padding-s: 0.5rem;
--padding-m: 1rem;
--padding-l: 1.5rem;
--padding-xl: 2rem;
--padding-xxl: 2.5rem;
--padding-3xl: 3.75rem;
--padding-4xl: 4rem;
--padding-5xl: 4.75rem;
--gap-xs: 0.25rem;
--gap-s: 0.5rem;
--gap-m: 1rem;
--gap-l: 1.5rem;
--gap-xl: 2rem;
--gap-xxl: 2.5rem;
--gap-xxxl: 6rem;
}
Exercício número dois) Aplique essas variáveis nos arquivos CSS já existentes, como o cabecalho.css e destaque.css
Conteúdo CSS em cabecalho.css:
.cabecalho {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-m);
padding-bottom: var(--padding-xl);
}
.alinhamento-cabecalho {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--padding-l);
}
.label-busca {
display: flex;
flex-grow: 0.5;
justify-content: space-between;
align-items: center;
border: 1px solid var(--cor-neutra-dark);
padding: var(--padding-s) var(--padding-m);
border-radius: 2rem;
}
.label-busca input {
border: none;
outline: none;
}
.icone-busca {
display: flex;
align-items: center;
&::after {
content: " ";
position: relative;
background-image: url("../assets/icones/busca.png");
background-repeat: no-repeat;
cursor: pointer;
width: 20px;
height: 20px;
}
}
.botao-login {
background-color: transparent;
border: none;
display: flex;
align-items: center;
gap: var(--gap-s);
}
.navegacao {
align-content: center;
}
.menu-lista {
display: flex;
align-items: center;
justify-content: space-between;
margin: 1rem 0;
}
.menu-link {
text-decoration: none;
color: var(--cor-neutra-dark);
position: relative;
padding-bottom: var(--padding-xs);
&::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--cor-neutra-dark);
transition: width 0.3s ease;
}
}
.menu-link:hover::after, .menu-link:focus::after {
width: 100%;
}
Conteúdo CSS em destaque.css:
.destaque {
display: flex;
justify-content: center;
align-items: center;
padding: var(--padding-5xl) 0;
background-color: var(--cor-secundaria-light);
}
.banner {
display: flex;
justify-content: space-between;
align-items: center;
}
.destaque-titulo {
color: var(--cor-primaria-dark);
}
.destaque-titulo > span {
color: var(--cor-terciaria-dark);
}