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

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.

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

Importante

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP