Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Lista de exercícios: Responsividade

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root {
    --cor-primaria: #034C53;
    --cor-secundaria:#FFC1B4;
    --cor-terciaria:#F38C79;
    --cor-hover:#007074;

    --font-primaria:'Krona One', sans-serif;
    --font-secundaria:'Montserrat', sans-serif;
    
}

*{
    margin: 0;
    padding: 0;
}

body{
    /* height: 100vh; */
    box-sizing: border-box;
    background-color:var(--cor-primaria);
    color: var(--cor-secundaria);
}
.cabecalho{
    padding: 2% 0% 0% 15%;
}
.cabecalho__menu{
    display: flex;
    gap: 80px;
}
.cabecalho__menu__link{
    font-family: var(--font-secundaria);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}
.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;

}

.apresentacao__conteudo{
    width:50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 2.25rem ;
    font-family: var(--font-primaria);
}
.titulo-destaque{
    color: var(--cor-terciaria);
} 
.apresentacao__conteudo__texto{
    font-size: 1.5rem;
    font-family: var(--font-secundaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.apresentacao__links__subtitulo{
    font-family: var(--font-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}
.apresentacao__links__navegacao{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 50%;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-terciaria);
    font-family: var(--font-secundaria);
}
.apresentacao__links__link:hover{
    background-color:var(--cor-hover);
}

.apresentacao__imagem{
    width: 50%;
}

.rodape{
    color:var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--font-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}

@media(max-width: 1023px ) {
    .cabecalho{
        padding: 10%;
    }

    .cabecalho__menu{
        justify-content: center;
    }

    .apresentacao{
        flex-direction: column-reverse
        }
}
@media(max-width: 1023px ) {
    .cabecalho{
        padding: 10%;
    }

    .cabecalho__menu{
        justify-content: center;
    }

    .apresentacao{
        flex-direction: column-reverse
        }

        :root {
            --cor-primaria: #0C134F;
            --cor-secundaria:#D4ADFC;
            --cor-terciaria:#5C469C;
            --cor-hover:#1D267D;
        }
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Olá, Fatima, como vai?

Seu código está bem estruturado e você fez um bom trabalho aplicando as media queries e ajustando os elementos para telas menores. Só há um pequeno detalhe no código CSS da sua media query para telas com largura máxima de 1023px. Dentro da classe .apresentacao, ao aplicar a propriedade flex-direction: column-reverse, você esqueceu de adicionar o ponto e vírgula no final dessa linha, o que pode causar problemas na interpretação do código.

Continue explorando essas práticas e compartilhando seus projetos no fórum. Estamos à disposição para ajudar com qualquer dúvida ou discussão adicional.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!