Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

ONDE ESTÃO AS VARIÁVEIS CSS ???

As configurações de CSS disponibilizadas na aula, não estão funcionando. Onde estão as variáveis CSS criadas e usadas no código ?

.banner {
    padding: 3rem 7.5rem 6.25rem;
    background-color: var(--azul-escuro);
    color: var(--branco);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.titulo {
    font-family: var(--fonte-secundaria);
    font-size: 4rem;
    margin-top: 4.875rem;
    margin-bottom: 2rem;
}

.paragrafo {
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 2rem;
}

.imagens {
    position: relative;
    height: 406px;
}

.imagens > .minhaFoto {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18vw;
    border-radius: 50%;
}

.imagens > .circuloColorido {
    position: absolute;
    right: 7vw;
    bottom: 2.2vw;
    width: 25vw;
}

@media (max-width: 1100px) {    
    .banner {
        padding: 3.5rem 1.5rem;
    }

    .titulo {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .paragrafo {
        margin-bottom: 1.5rem;
    }

    .imagens {
        height: 338px;
    }

    .imagens > .minhaFoto {
        width: 25vw;
    }

    .imagens > .circuloColorido {
        right: 10vw;
        width: 35vw;
    }
}

@media (max-width: 744px) {
    .banner {
        padding: 2rem 1rem;
        display: block;
    }

    .titulo {
        margin-bottom: 2rem;
    }

    .paragrafo {
        margin-bottom: 2rem;
    }

    .imagens {
        height: 307px;
    }

    .imagens > .minhaFoto, .imagens > .circuloColorido {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .imagens > .minhaFoto {
        width: 170px;
        transform: translate(5rem, 0px);
    }

    .imagens > .circuloColorido {
        width: 240px;
        transform: translate(-1.5rem, 0px);
    }
}
2 respostas
solução!

Oi estudante, tudo bem?

Você pode encontrar as variáveis aqui no repositório do GitHub. No começo de cada aula tem essa atividade chamada Projeto da aula anterior, onde você pode encontrar o link para o repositório do projeto e ver o que mudou a cada aula.

Mas vou copiar e colar aqui pra você também:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --azul-escuro: #041833;
  --azul-medio: #1875E8;
  --cor-fonte-principal: #041833;
  --cor-fonte-post: #444444;
  --branco: #FFF;
  --fonte-principal: 'Raleway', sans-serif;
  --fonte-secundaria: 'Playfair Display', sans-serif;

  font-family: var(--fonte-principal);
}

#root {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

a, button, input, textarea {
  font: inherit;
  color: inherit;
}

button {
  background-color: transparent;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 5rem;
}

Espero ter ajudado.

Um abraço e bons estudos.

Oi, bom dia. Obrigado. Não abri esse forum, mas isso me ajudou muito aqui. rsrs