2
respostas

[Sugestão] Aprendendo e compartilhando

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</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>
    <h1>Sobre mim</h1>

    <p>Prazer, sou Ricardiana Oliveira. Moro na cidade de Jaguaruana, interior do Ceará. Atualmente, estou cursando o curso técnico em Informática para Internet. Tendo, domínio sobre as seguintes linguagens html, css, javascript, python. Apaixonada pela programação e a construção de site.</p>

    <p>Sou graduada em História pela Universidade Estadual do Ceará (UECE). Já ministrei aula como professora de história no ensino fundamental, nas escolas da rede municipal de ensino da cidade de Jaguaruana.</p>
  
    <p>Adoro ler e assistir conteúdos na área da programação. Estou sempre no processo de aprender e reaprender, de forma entusiástica, por ser o campo que amo aprender e trabalhar.</p>
    <img class="borda" src = "../img/img.jpg" alt = "foto da Ricardiana Oliveira programando">
</main>


<footer class="Rodape">
    <p>Desenvolvido por Ricardiana Oliveira.</p>
</footer>


</body>
</html>
2 respostas

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

*{
   margin: 0; 
   padding: 0;
}

body{ 
    background-color: #404040;
    color: #F6F6F6;
     /* height: 100vh;  */
    box-sizing: border-box ;
}

.cabecalho{
    padding: 2% 0% 0% 15%;
  
}
.cabecalho_menu{
    display:flex;
    gap:80px;    
}
.cabecalho_menu_link{
    color:#22D4FD;
    font-family:'Montserrat', sans-serif;
    font-size:24px;
    font-weight:600;
    justify-content:space-between;
    cursor: pointer;
    text-decoration: none;
}
.cabecalho_menu_link:hover{
    color:#000000cb
}

.titulo-destaque{
    color: #22D4FD;
}

.apresentacao{
    display: flex;
    align-items:center;
    justify-content:space-between;
    /* margin: 10% 17%; */
    padding: 5% 15%;

}
.apresentacao_conteudo{
    width: 615px; 
    display: flex; 
    flex-direction: column;
    gap: 40px;
}
.apresentacao_conteudo_titulo{
    font-size: 36px;
    font-family:"Krona One", sans-serif;
}
.apresentacao_conteudo_texto{
    font-size:24px;
    font-family: "Montserrat", sans-serif;
}
.apresentacao_links_subtitulos{
 font-family: 'krona One', sans-serif;
 font-weight: 400;
 font-size: 24px;

}

.apresentacao_links{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:space-between;
    gap:32px;
}
.apresentacao_links_link{
    /* background-color: #22d4fd; */ 
    display: flex;
    justify-content: center;
    gap:16px;
    width:378px;
    height: 68px; 
    font-weight:600;
    text-align: center;
    line-height:36px;
    border-radius:8px;
    border: 2px solid #22D4FD;
    font-size: 24px;
    padding: 21px.5px 0;
    text-decoration:none;
    color: #F6F6F6;
    font-family: "Montserrat", sans-serif;
    
}
.apresentacao_links_link:hover{
 background-color:#272727;
 color:#22D4FD;
 border: solid 2px #22d5fde1
}
img{
  width: 280px;
  display: flex;
  height: 400px;
  top: 253px;
  left: 1032px;
  gap: 0px;
  opacity: 0px; 
}

.imagem_botao{
    width: 32px;
    height: 32px;
}
.borda{
  border:30px solid transparent;
  border-image:url("../img/borda.jpg")50 round;
}
.destaque_especialidades:hover{
  color: #22D4FD;
}
.Rodape{
    color: #000000;
    background-color: #22D4FD;
    padding: 24px;
    text-align: center;
    font-family:'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    
}

Oii Maria, tudo bem?

Muito obrigada por compartilhar seu código no fórum!

Gostei bastante da estrutura do seu projeto "Sobre mim", especialmente a forma como você organizou o cabeçalho e o rodapé utilizando classes CSS bem definidas. Isso facilita muito a manutenção e a compreensão do código.

Continue com o ótimo trabalho e compartilhando seu conhecimento!

Um abraço e bons estudos.