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

[Dúvida] Codigo com espaçamentos indevidos.

Meu codigo esta com um espaçamento indevido na tag h1 experiencias isso ta ocorrendo por causa do gap?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device- width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/style.css">
    <title>Sobre Mim!</title>
</head>
<body>
    <header class="cabecalho"> 
        <nav class="cabecalho__menu">
       <a class="cabecalho__menu__link" href="index.html"> Home</a>
       <a class="cabecalho__menu__link" href="about.html" > Sobre Mim</a>
     </nav>
     </header>
    <main id="apresentacao">
        <section class="container__descricao">
          <div>
          <h1>Curriculo:</h1>
          <p>Desenvolvedor Front-end Junior
            Atuei em diversas áreas como administrador de redes
            telecom e segurança eletronica.
          </p>
          </div>   
            <h1>Experiências:</h1>
            <p>Datafone Soluções Tecnologicas (2016 a 2024) Atuo na área de administrador de rede e telecom.</p>
          </div>
          
          <div>
            <h1>Tecnologia Usadas:</h1>
            <p>HTML, CSS, JAVASCRIPT, PHP, LINUX, MYSQL, REDES.</p>
          </div>
        </section>
        <div >
            <img class="apresentacao__image" src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">
          </div>
    </main>
    <footer>
        <div class="rodape">
        <p> Desenvolvido por Levi Lima Dev Junior. </p> 
      </div> 
      </footer>
</body>
</html>
3 respostas

Codigo css

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@font-face {  
    font-family: Minhafonte;
    src: url('fonte/JMH\ Typewriter-Bold.otf'); 
  }  /* O font face serve para importarmos fontes de sites sem que precise usar do google fonts outros modelos tendo varias bibliotecas.      */
  
  @import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

  

* {
/* reset css */
margin: 0;
padding: 0;
box-sizing: border-box; /* define o tamanho em que o elemento e calculado */

}

body {
  /* nao possue mais nessecidade pois utrapassou o limite de 100vh  height: 100vh; /* altura da pagina */
    background-color: #383939; /* cor de sua pagina */
    color: #aee637;
}


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


}

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

}

.cabecalho__menu__link{
font-family: 'Monteserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #aee637;
text-decoration: none;

}

.cabecalho__menu__link:hover{
    color: black;
}


#apresentacao {
    padding: 5% 15%;
    display: flex; /* declara o container onde o conteudo esta flexbox para posicionamentos dos elementos PAI */
    align-items: center; /* alinha os itens elementos da pagina FILHO*/
    justify-content: space-between; /* justifica o conteudo dando espaçamentos nele FILHO*/
    
}

.apresentacao__image {
    height: 550px;
    width: 488px;
    width: auto; /* Isso permite que a largura se ajuste automaticamente à altura */
    border: double black 10px;
    margin: 35px;

}

.apresentacao__image:hover{
box-shadow: #aee637 3px 1px 1px 3px;
border-radius: 22px;
padding: 5px;
}


.apresentacao__conteudo {
    
    width: 615px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {

font-size:  25px;
font-family: 'Roboto Slab', serif;

}

.apresentacao__conteudo__titulo:hover{
color: black;
    
}

.title-destaque {
  
    color: black
    
    }
    
    .title-destaque:hover{
        color: #aee637;
    }

.apresentacao__conteudo__texto {

font-size: 15px;
font-family: Minhafonte,sans-serif;

}

.apresentacao__links {

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

}

.apresentacao__links__subtitulo {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
    font-weight: 400;
    
    }

.apresentacao__links__links{   

    /* background-color: #38c958; */
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    border: solid 2px #aee637;
    width: 378px;
    height: 65px;
    text-align: center;
    border-radius: 8px;
    font-size: 18px;
    font-family: 'Krona One', sans-serif;
    font-weight: 600;
    margin: 10px;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    
   /* border: 20px double green;  podemos escrever menos codigos utilizando apenas o border */
  /* border-top: 30px solid blue; estiliza apenas a borda de cima */

}

.apresentacao__links__links:hover{
    background-color: black;
    color: #aee637;
    border-radius: 15px;
    padding: 8%;
}


.rodape{
color: black;
background-color: #aee637;
padding: 20px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 20px ;
font-weight: 400;
}


.container__descricao{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

Quem poder me ajudar fico muito satisfeito

solução!

Olá, Levi! Pelo que pude ver do código, você está criando uma div para cada conteúdo da sessão, porém, não existe uma tag de abertura antes da parte de "experiências". O correto seria:

<div>
    <h1>Curriculo:</h1>
    <p>Desenvolvedor Front-end Junior
    Atuei em diversas áreas como administrador de redes
    telecom e segurança eletronica.
    </p>
</div>
<div> // abrir essa div aqui
  <h1>Experiências:</h1>
  <p>Datafone Soluções Tecnologicas (2016 a 2024) Atuo na área de administrador de rede e telecom.</p>
</div>

<div>
  <h1>Tecnologia Usadas:</h1>
  <p>HTML, CSS, JAVASCRIPT, PHP, LINUX, MYSQL, REDES.</p>
 </div>

NOSSA NÃO TINHA ENCHERGADO MUITISSIMO OBRIGADO

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software