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

[Dúvida] Responsividade em telas de celulares Parte 2

Responsividade em telas de celulares Parte 2
CSS:
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');
/* Definindo variáveis */
:root  {
    --cor-primaria: #1B1818;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;
    --fonte-inter: 'Inter Tight', sans-serif;
    --fonte-Mont: 'Montserrat', sans-serif;
}
/* resetando o CSS*/
*{
    margin: 0;
    padding: 0;
}
/* body define propriedades do corpo */
body{
    /* height:100vh; */
    background-color: var(--cor-primaria);
    color: #F6F6F6;
    box-sizing: border-box;
}
/*início das classes*/
.destacasubtitulo{color: #22D4FD;    
}
.cabeçalho{
    padding:1% 0% 0% 15%;
}
.titulo__cabeçalho{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.9rem;
    color:#F6F6F6;
    font-weight: 200;
}
.cabeçalho__menu{
    display:flex;
    gap: 5rem;
    padding: 1.25rem 0 0 0
}
.cabeçalho__menu__link{
    text-decoration: none;
    color: #22D4FD;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    display:flex;
    flex-direction: right;
    text-decoration: none;
}
.apresentacao{
            padding:6% 15%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 82px
}
.apresenta__conteudo{
    /* width: 38.5; */
    width: 50%; /*50% da seção <main> */
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.apresenta__conteudo__titulo{
    font-size: 2.25rem;
    font-family:'Montserrat', sans-serif;
    font-weight: 60;
}
.apresenta__conteudo__texto{
    font-size: 1.5rem;
    font-family: 'Inter Tight', sans-serif;
    color: #F6F6F6;
}
.apresentacao__links{
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.apresentacao__links__subtitulo{
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.7rem;
    font-weight: 35;
    padding:1.344rem 0;
}
.icon{
    vertical-align: middle;
    margin-right: 1.25rem;
}
.apresentacao__links__txt__caixa{

        border:0.125rem solid #22D4FD; 
        width: 50%;
        text-align: center;
        border-radius: 0.5rem;
        font-size: 1.5rem;
        padding: 1.344rem 0;
        text-decoration: none;
        color: #F6F6F6;
        font-family: 'Inter Tight', sans-serif;
        font-weight: bold;
        vertical-align: middle;
}
.apresentacao__links__txt__caixa:hover{
    background-color: #272727;
    }
    .apresentacao__imagem{
        width: 50%;
        row-gap: 30px;
    }
    .rodape{
        padding:24px;
        padding:1.5rem;
        color:#000000;
        background-color:#22D4FD;
        text-align: center;
        font-family:'Montserrat', sans-serif;
        font: 28px;   
        font-size: 1.75rem; 
        bottom: 0; 
    }
    .rodape__ancora{
        margin-left: 3.125rem;
        text-decoration: none;
    }
1 resposta
solução!

Oi, Roger, tudo bem?

Parabéns pelo resultado, ficou ótimo! Também agradeço por compartilhar seu projeto, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum.

Abraços e bons estudos!