class apresentacao__conteudo

5
respostas

por Levi Lima Santana

| 125.9k xp | 376 posts

Auxiliar de TI

quando ponho a classe apresentacao__conteudo na section do sobre mim o sobre mim fica no meio diferente da aula

para contornar tive que criar outra classe o que posso ter errado?

<!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">
    <title> portifólio </title> 
    <link rel="stylesheet" href="./styles/style.css">
  
  </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>
      <a class="cabecalho__menu__link" href="experiencias.html">Experiências</a>
    </nav>
    </header>
    
    <main id="apresentacao">
      <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Explorando o mundo do desenvolvimento <strong class="title-destaque">front-end com entusiasmo! </strong>
            </h1>
              <p class="apresentacao__conteudo__texto">Olá! Sou Levi Lima Santana, da escola de tecnologia alura e estou aprendendo a programar. Quero me aprofundar cada vez mais nessa area e estou super feliz com esse meu primeiro projeto.</p>
          <div class="apresentacao__links"> <!-- a tag div serve para estruturarmos e agruparmos as tags sem precisao de ser semantica como tambem aplicarmos estilos e dividirmos as tags html -->
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__links" href="https://www.instagram.com/levilima_bjj" >
              <img src="./assets/instagram.png" alt="foto instagram"> Instagram</a>
            <a class="apresentacao__links__links" href="https://www.github.com/Levisaoo"> 
              <img src="./assets/github.png" alt="foto github"> Github </a>
              <a class="apresentacao__links__links" href="https://www.linkedin.com/in/levi-lima-936b44275/"> 
                <img src="./assets/linkedin.png" alt="foto linkedin">
              Linkedin </a>
      </section> <!--separa os elementos dentro de um container para melhor estrutura mais clara trazendo tambem uma estilizaçao mais clara criando uma seção para eles-->
          </div>
          <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>

5 respostas

por Levi Lima Santana

| 125.9k xp | 376 posts

Auxiliar de TI

02/04/2024

<!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>
       <a class="cabecalho__menu__link" href="experiencias.html"> Experiências</a>
     </nav>
     </header>
     <main id="apresentacao">
      <section class="container__descricao__ex">
         <h1 class="apresentacao__conteudo__titulo__ex">Sobre Mim</h1>
         <p class="apresentacao__conteudo__texto__ex">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
         <p class="apresentacao__conteudo__texto__ex" >Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.</p>
        </section>
        <img class="apresentacao__image" src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">

     </main>
     <footer></footer>
</body>
</html>

por Levi Lima Santana

| 125.9k xp | 376 posts

Auxiliar de TI

02/04/2024

<!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>Experiências</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>
       <a class="cabecalho__menu__link" href="experiencias.html">Experiências</a>
     </nav>
     </header>
     <main id="apresentacao">
        <section class="container__descricao">
         <ul>
         <h1 class="container__descricao__titulo">Currículo:</h1>
         <div class="container__descricao__texto">
          <li>Cursando Engenharia de Software na Anhanguera.</li>
          <li>Atua na área de redes com especialidade em TELECOM.</li>
          <li>CFTV ip e Cloud.</li>
          <li>Certificado Pela Intelbras Itec.</li>
          <li>Atuo na área a cerca de 5 anos.</li>
        </div>
         </ul>
         <ul>
          <h1 class="container__descricao__titulo">Experiencias:</h1>
          <div class="container__descricao__texto">
          <li>Telecomunicação PABX IP e Cloud.</li>
          <li>CFTV IP e CLOUD.</li>
          <li>Desenvolvedor Front-End Junior.</li>
          <li>Tecnólogo em segurança eletronica de alarmes e sensores ip.</li>
        </div>
         </ul>
         <ul>
          <h1 class="container__descricao__titulo">Estudos:</h1>
          <div class="container__descricao__texto">
          <li>Segurança Defensiva</li>
          <li>HTML, CSS, JAVASCRIPT</li>
          <li>Redes de computadores</li>
          <li>Energia Solar</li>
        </div>
         </ul>
        </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>

por Levi Lima Santana

| 125.9k xp | 376 posts

Auxiliar de TI

02/04/2024

@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');

  :root { /* variaveis css com escopo global */
    --cor-primaria: #383939;
    --cor-secundaria: black;
    --cor-terceraria: #aee637;
    --cor-quarteraria:  #f6f6f6;
  }

* {
/* 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: var(--cor-primaria); /* 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: var(--cor-terceraria);
text-decoration: none;

}

.cabecalho__menu__link:hover{
    color: var(--cor-secundaria) ;
}


#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 var(--cor-secundaria) 10px;
    margin: 35px;

}

.apresentacao__image:hover{
box-shadow: var(--cor-terceraria) 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: var(--cor-secundaria);
    
}

.title-destaque {
  
    color: var(--cor-secundaria)
    
    }
    
    .title-destaque:hover{
        color: var(--cor-terceraria);
    }

.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 var(--cor-terceraria);
    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: var(--cor-quarteraria);
    
   /* 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: var(--cor-secundaria);
    color: var(--cor-terceraria);
    border-radius: 15px;
    padding: 8%;
}


.rodape{
color: var(--cor-secundaria);
background-color: var(--cor-terceraria);
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;
}

.container__descricao__titulo{
    color: var(--cor-secundaria);
    padding-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

.container__descricao__texto{
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}


/* //////////////////////////////////////////////////////////////////////////// */ 

.container__descricao__ex{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.apresentacao__conteudo__titulo__ex{
font-family: 'Montserrat', sans-serif ;
color: var(--cor-secundaria);
}

.apresentacao__conteudo__titulo__ex:hover{
    color: var(--cor-terceraria);
}

.apresentacao__conteudo__texto__ex{
font-family: 'Montserrat', sans-serif;
color: var(--cor-terceraria);
}

.apresentacao__conteudo__texto__ex:hover{
color: var(--cor-secundaria);
}

por Levi Lima Santana

| 125.9k xp | 376 posts

Auxiliar de TI

02/04/2024

Segue todo meu codigo porem so tenho duvida nessa class apresentacao__conteudo

para isso criei a apresentacao__conteudo__ex

para contornar esse sobre mim que ficava ao meio

por RODRIGO SILVA HARDER

| 2307.9k xp | 4888 posts

Alura Scuba Team Monitor de Fórum Ops

03/04/2024

Oi, Levi, como vai?

Você pode alterar o estilo da página e criar novas classes, mas a ideia é reaproveitar o estilo para as páginas de "Currículo" e "Sobre mim". Ao adicionar a classe apresentacao__conteudo você está fazendo com que o elemento fique centralizado, devido à propriedade align items que tem o valor center. Você criou novas classes para essa página, mas uma opção seria remover a propriedade align-items da classe apresentacao__conteudo.

Ficaria assim:

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

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em IA generativa do zero com Alura e Google

5 aulas gratuitas | com certificado