ONDE ESTÃO AS VARIÁVEIS CSS ??? | React: desenvolvendo em React Router com JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por TIC - CRN6 - FUNCIONARIOS

| 107.4k xp | 39 posts

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

| 6883.3k xp | 10006 posts

Alura Scuba Team Monitora

12/04/2023

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

26/04/2023

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