Entrar Ainda não tem acesso?
4
respostas

[Projeto] Projeto:

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Desafio: crie uma página currículo!

por Levi Lima Santana
| 115.2k xp | 371 posts
Auxiliar de TI

Ola gostaria de compartilhar meu projeto e peço que deem dicas e diga oque acharam dele por mais que está diferente do que foi proposto estou super feliz pelo resultado e sinto que aos poucos estou melhorando.

Index.html

  <!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>
    </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>
4 respostas
por Levi Lima Santana
| 115.2k xp | 371 posts
Auxiliar de TI

about.html

<!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">
         <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
| 115.2k xp | 371 posts
Auxiliar de TI

Styles.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;
}

.container__descricao__titulo{
    color: black;
    padding-bottom: 10px;
}

.container__descricao__texto{
    text-decoration: none;
}

Peço que de coração e fale se esta bom ou ruim e oque posso melhorar

HEHHEHEHE

por RODRIGO SILVA HARDER
| 2302.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Levi, tudo bem?

Parabéns pelo resultado no seu projeto, tanto na criação da página principal como na página sobre você, ficou ótimo!

Também agradeço por compartilhar seu código com os demais estudantes, com certeza vai ser uma inspiração para as pessoas que estão desenvolvendo o projeto do portfólio.

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

por Levi Lima Santana
| 115.2k xp | 371 posts
Auxiliar de TI

Obrigado hehe.