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

Layout quebrado

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos

por Daniel dos Reis Silva
| 12.5k xp | 11 posts
Agente de produção

Estou ha muito tempo mexendo tentando consertar a responsividade mas nao consigo poderiam me ajudar ?

`` HTML:

Home Sobre mim

Olá sou Daniel, Desenvolvedor frontend iniciante !

Atualmente faço a formação em frontend da ALURA focando na tríade HTML, CSS, Javascript ! Curso desenvolvimento de sistemas WEB na anhanguera educacional na cidade de Franca ! "O sucesso nasce do querer, da determinação e persistência em se chegar a um objetivo. Mesmo não atingindo o alvo, quem busca e vence obstáculos, no mínimo fará coisas admiráveis !"

            <h2 class="apresentacao__links__subtitulo"> Acesse minhas redes:</h2>

            <a class="apresentacao__links__botoes"href="https://www.linkedin.com/in/daniel-dos-reis-791034164/">
            <img src="./Assets-aula2-curso3-html-e-css-main/Assets-aula2-curso3-html-e-css-main/assets/linkedin.png" alt="Logo linkedin.">
            linkedin </a>    
            <a class="apresentacao__links__botoes" href = "https://www.instagram.com/daniel.dosreis.16/">  
                <img src="./Assets-aula2-curso3-html-e-css-main/Assets-aula2-curso3-html-e-css-main/assets/instagram.png" alt="Logo instagram.">
                Instagram </a> 
             <a class="apresentacao__links__botoes" href = "https://github.com/danielreis507" > 
                    <img src="./Assets-aula2-curso3-html-e-css-main/Assets-aula2-curso3-html-e-css-main/assets/github.png" alt="Logo github.">
                    Github </a>
        </div>
    </section> 
<img class="foto1" src="download.png" alt=" Daniel"width="550" height="550">    
   
</main>               
<footer>
    <p class="rodape"> Daniel 2023</p>
</footer>
```
3 respostas
por Daniel dos Reis Silva
| 12.5k xp | 11 posts
Agente de produção

O css:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
*{
    margin : 0;
    padding: 0;
}

 :root{
    --cor-primaria:black;
    --cor-secundaria:#f6f6f6;
    --cor-terciaria:#00ABB3;
    --cor-hover: #435B66;

    --fonte-principal: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}

.cabecalho{
    padding: 2% 0% 0% 15%;  
   
}

.cabecalho__menu{
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link{
color:  var(--cor-terciaria);
font-family: var(--fonte-secundaria);
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none;
}

body{
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
   
}
strong {
    color: var(--cor-terciaria);
}
.triade-web {
    color: var(--cor-terciaria);       
}   

.apresentacao{
    margin: 8% 1%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.apresentacao__sobre{
    
    padding-top: 8%;
   
}
.apresentacao__conteudo{
    width: 615px;
    display: flex;       
    flex-direction: column;
    gap: 40px;
    justify-content: space-between;
 }


 .apresentacao__conteudo__paragrafo {
    font-size: 2.25rem;
    font-family: var(--fonte-principal) 
}
.apresentacao__links{
    display: flex;
    justify-content: space-between; 
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.apresentacao__conteudo__titulo{
    font-size: 2.25rem;
    font-family: 'Krona One', sans-serif;
    
}
.apresentacao__links__subtitulo{
    font-family: var(--fonte-principal);
    font-weight: 400;
    font-size: 1.5rem;
    
}
.apresentacao__links__botoes{
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--cor-primaria);
    width: 378px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid var(--cor-terciaria);
    font-weight: 600;
    font-size: 1.5rem;
    padding: 16px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);  
}
.apresentacao__links__botoes:hover {
    background-color:var(--cor-hover);
    }

.foto1{
    display: flex;
    align-self:center;
    border-radius: 15%; 
   
}

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

}
solução!
por Joselino Santos
| 151k xp | 10 posts

Olá, Daniel!

Está chegando lá. Existem várias abordagens para manter a responsividade com Flexbox. Nesse caso, adicione a propriedade flex-wrap na classe apresentacao com o valor wrap que já resolve. Da seguinte forma:

.apresentacao {
  margin: 8% 1%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

O resultado vai ser o seguinte:

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

Espero que tenha ajudado, qualquer outra dúvida só falar. Abraço.

por Daniel dos Reis Silva
| 12.5k xp | 11 posts
Agente de produção

Valeu cara ! ABSS !