Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Quero mudar algo, mas não consigo acertar posição,

Colegas, pretendo colocar os links alinhados com a imagem da apresentação, como está no anexo, porém um link ao lado do outro, e não consigo-faze-lo. Já esgotei meus conhecimentos, que são poucos. Alguém me ajuda? O motivo desta mudança é que na partye esquerda do cabeçalho vou colocar um título no Cabeçalho, no lado esquerdo. então no HTML criei duas classes ali no cabeçalho,

Home Sobre mim seguem os códigos: `
<header class="cabeçalho" class="titulo__cabeçalho">
    <nav class="cabeçalho__menu">
        <a class="cabeçalho__menu__link">Home</a>
        <a class="cabeçalho__menu__link">Sobre mim</a>
    </nav>
</header>

<main class="apresentacao"> 
    
    <section class="apresenta__conteudo">

        <h1 class="apresenta__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="destacasubtitulo">com um Front-End de qualidade!</strong></h1>
      
        <p class="apresenta__conteudo__texto">Olá! Sou Roger Oliveira, desenvolvedor Front-End com especialidade em UX, UI, React, HTML ,CSS e Python. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>

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


        <a class="apresentacao__links__caixa" href="https://github.com/rogeroliveirars"><img class="icon" src= "./assets/github.png">   GitHub
            
        </a>


        <a class="apresentacao__links__caixa" href="https://linkedin.com/in/uxrogeroliveira"><img class="icon" src= "./assets/linkedin.png">  Linkedin
            
        </a>
        
    </div>

    </section>

        <img src="./assets/roger.png" alt="foto do Desenvolvedor Web, UX/UI, e Desenvolvedor Python  Roger Oliveira">

</main>

<footer class="rodape"><p>Email: studio.rogeroliveira@gmail.com</p></footer>

`

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@600&display=swap');


/* resetando o CSS*/
*{
    margin: 0;
    padding: 0;
}


/* body define propriedades do corpo */
body{
    /* height:100vh; */
    background-color: rgb(27, 24, 24);
    color: #F6F6F6;
    box-sizing: border-box;
}

/*strong{color: #22D4FD;}*/
.destacasubtitulo{color: #22D4FD;    
}

/*início das classes*/

.cabeçalho{

    padding-top: 30px;

 
}

.cabeçalho__menu__link{
    padding: 24px 0px 0px 1265px;
    text-decoration: none;
    color: #22D4FD;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 24px;
    display:flex;
    flex-direction: row;
 
}




.apresentacao{
    /* acrescentei o padding e retirei margin para que tudo caiba dentro da tela sem dobra */
    
            padding:6% 15%;
            display: flex;
            align-items: center;
            justify-content: space-between;
}

.apresenta__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresenta__conteudo__titulo{
    font-size: 36px;
    font-family:'Montserrat', sans-serif;
    font-weight: 60;
}

.apresenta__conteudo__texto{
    font-size: 24px;
    font-family: 'Inter Tight', sans-serif;
    color: #F6F6F6;
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;

}

.apresentacao__links__subtitulo{
    font-family: 'Inter Tight', sans-serif;
    font-size: 27px;
    font-weight: 35;
    padding:21.5px 0;
}

.apresentacao__links__caixa{
  /* CRIEI UMA CLASSE "icon"
    background-color: #22D4FD;
    display:flex;
    justify-content: center;
    gap: 16px; 
    */
    border:2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
   
//Códigos omitidos!
[Insira aqui a descrição dessa imagem para ajudar na acessibilidade](https://cdn1.gnarususercontent.com.br/1/4747566/6a8a3d4d-84f1-4cb2-aa1f-d867d0f2bcaa.png)  
3 respostas

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Olá, Roger, no header você colocou duas classes separadas,

<header class="cabeçalho" class="titulo__cabeçalho">

mas você pode colocar mais de uma classe na mesma tag

<header class="cabeçalho titulo__cabeçalho">
solução!

De uma olhada no menu dessa página https://daniel-luis.netlify.app/ pra mim saber se é assim que você quer o seu.