Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

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

Referente ao curso React: desenvolvendo em React Router com JavaScript, no capítulo SPA com react-router-dom e atividade Desenvolvendo Banner

por TIC - CRN6 - FUNCIONARIOS
| 116.2k xp | 39 posts
TI

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!
por Lorena Garcia
| 8364.6k xp | 12215 posts
Alura Scuba Team Suporte Educacional

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.

por Edi Carlos da Silva
| 420.2k xp | 34 posts
Gerente TI

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