Entrar Ainda não tem acesso?
3
respostas

Faça como eu fiz: aplicando variáveis CSS

Referente ao curso CSS: explorando seletores e utilizando variáveis, no capítulo Variáveis CSS e atividade Faça como eu fiz: aplicando variáveis CSS

por Guilherme de Freitas Santos
| 67.3k xp | 132 posts

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);
}
3 respostas
por Guilherme de Freitas Santos
| 67.3k xp | 132 posts

Exercício número três) Desenvolva a estilização da seção de serviços, criando um novo arquivo servicos.css e importando-o no estilos.css

Conteúdo CSS em servicos.css:

.servicos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-xxxl);
    align-items: center;
    width: 100%;
    padding: var(--padding-5xl) 0;
}

.servicos {
    color: var(--cor-primaria-light);
}

.servicos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m);
    justify-content: space-between;
    align-items: center;
}

.servicos-lista > li > .link {
    position: relative;
    background-color: var(--cor-secundaria-light);
    text-decoration: none;
    border-radius: 1rem;
    padding: var(--padding-m) var(--padding-l);
    font-family: var(--font-sigmar);
    font-size: var(--font-size-m);
    color: var(--cor-primaria-light);
}

.link::before {
    content: " ";
    position: absolute;
    left: -10px;
    bottom: 50%;
    width: 35px;
    height: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(0);
    transition: transform 0.3s ease, left 0.3s ease;
}

.banho-e-tosa > .link::before {
    background-image: url("../assets/icones/banho-e-tosa.png");
}

.hospedagem > .link::before {
    background-image: url("../assets/icones/hospedagem.png");
}

.veterinario > .link::before {
    background-image: url("../assets/icones/veterinario.png");
}

.adestramento > .link::before {
    background-image: url("../assets/icones/adestramento.png");
}

.petsiter > .link::before {
    background-image: url("../assets/icones/petsiter.png");
}

.servicos-lista > li > .link:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in;
    padding-left: var(--padding-xxl);
}

.link:hover::before {
    transform: scale(1) translateY(50%);
    left: 0.5rem;
}

Conteúdo CSS em estilo.css:

@import url("./servicos.css");
por Guilherme de Freitas Santos
| 67.3k xp | 132 posts

Exercício número quatro) Implemente pseudo-classes e pseudo-elementos para adicionar animações e interações na seção de serviços.

Conteúdo CSS em servicos.css:

.servicos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-xxxl);
    align-items: center;
    width: 100%;
    padding: var(--padding-5xl) 0;
}

.servicos {
    color: var(--cor-primaria-light);
}

.servicos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m);
    justify-content: space-between;
    align-items: center;
}

.servicos-lista > li > .link {
    position: relative;
    background-color: var(--cor-secundaria-light);
    text-decoration: none;
    border-radius: 1rem;
    padding: var(--padding-m) var(--padding-l);
    font-family: var(--font-sigmar);
    font-size: var(--font-size-m);
    color: var(--cor-primaria-light);
}

.link::before {
    content: " ";
    position: absolute;
    left: -10px;
    bottom: 50%;
    width: 35px;
    height: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(0);
    transition: transform 0.3s ease, left 0.3s ease;
}

.banho-e-tosa > .link::before {
    background-image: url("../assets/icones/banho-e-tosa.png");
}

.hospedagem > .link::before {
    background-image: url("../assets/icones/hospedagem.png");
}

.veterinario > .link::before {
    background-image: url("../assets/icones/veterinario.png");
}

.adestramento > .link::before {
    background-image: url("../assets/icones/adestramento.png");
}

.petsiter > .link::before {
    background-image: url("../assets/icones/petsiter.png");
}

.servicos-lista > li > .link:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in;
    padding-left: var(--padding-xxl);
}

.link:hover::before {
    transform: scale(1) translateY(50%);
    left: 0.5rem;
}
por Victor Costa Santos
| 2290.5k xp | 4572 posts
Alura Scuba Team

Oi, Guilherme!

Obrigado por compartilhar o avanço com o CSS!

Se tiver algo que você queira revisar, ajustar ou se surgir alguma dúvida no processo, pode mandar por aqui que te ajudo com o maior prazer.

Fico à disposição. Abraços e bons estudos!

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade