[Projeto] Projeto Final (Meu Portfolio) | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

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="css/css.css">
  <title>Meu Portfólio</title>
</head>
<body>
  <header>
    <h1>Prazer, Larissa Felski!</h1>
    <nav>
      <ul>
        <li><a href="#sobre">Sobre</a></li> <!-- (href: linka conteúdos) (li: usada p/ cada tem da lista) -->
        <li><a href="#projetos">Projetos</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul> <!-- (ul: formata a lista) -->
    </nav> <!-- (aponta p/ outras áreas da pag) -->
  </header>

  <section id="sobre"> <!-- (marca seções de conteúdo da pag) -->
    <h2>Sobre Mim</h2>
    <div class="project"> <!-- (class: agrupa elementos p/ fim de estilo) -->
    <p>Tenho 17 anos, faço ensino médio em qualificação em tecnologia, curso Técnico em informática a 11 meses.<br>
        Conheci essa área atráves da minha escola, e de uma excelente professora, estou me arriscando na programação,<br>
        mas minha área dos sonhos é eletrônica, mecânica, elétrica e automação.
    </p>
    </div> <!-- (div: altera o estilo em partes específicas ) -->
    <div class="imagem1">
    <img src="img/fotolarissa.jpg" class="img/fotolarissa.jpg">
    </div>
  </section>

  <section id="projetos"> <!-- (id: identifcador dos termos) -->
    <h2>Projetos</h2>
    <div class="project"> <!-- (class: agrupa elementos p/ fim de estilo) -->
      <h3>Criação de Robô</h3>
      <p> <strong> No 2 ano do ensino médio de 2022, fui desafiada pela minha professora a criar<br>
        um robô utilizando arduino e linguagem C++. O projeto foi dividido em duas partes, primeiro<br>
        robô com sensor óptico coordenado pela cor preta influenciando na direção do carrinho, e o<br>
        segundo robô com sensor de distância, impedindo que o robô batesse em paredes.  </strong></p>
    </div> <!-- (div: altera o estilo em partes específicas ) -->
    <div class="imagem2">
    <img src="img/infravermelho.jpg" class="img/infravermelho.jpg">
    </div>
    <div class="imagem3">
    <img src="img/distancia.jpg" class="img/distancia.jpg">
    </div>
  </section>

  <section id="contato">
    <h2>Contato</h2>
    <div class="project"> <!-- (class: agrupa elementos p/ fim de estilo) -->
    <p> Email: larifelski@gmail.com<br><br>
        Telefone: 51 994299939</p>
    </div> <!-- (div: altera o estilo em partes específicas ) -->
  </section>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    font-size:x-large;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color:purple;
    color: #fff;
    padding: 50px;
  }
  
  h1 {
    margin: 0;
  }
  
  nav ul  {
    padding: 20px;
    margin: 0;
  }
  
  nav ul li {
    display: inline;
    margin-right: 55px;

  }
  
  nav ul li a {
    color:#c8a2c8;
    text-decoration:double;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.1);
  }
  
  section {
    padding: 50px;
  }
  
  .project {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color:#c8a2c8;

  }
  
  h2 {
    margin-top: 0;
    color:#c8a2c8;
  }

    .imagem1 img{
    width: 400px; /* Define a largura da imagem */
    height: 400px; /* Define a altura da imagem */
    border-radius: 50%; /* Define um raio de borda igual a 50% para criar um círculo */
    object-fit: cover; /* Controla como a imagem se ajusta ao tamanho do contêiner */
    float:right;
    margin-right: 150px;
    margin-top: -500px;
  }

  .imagem2 img{
    width: 250px; /* Define a largura da imagem */
    height: 250px; /* Define a altura da imagem */
    border-radius: 50%;
    float:right;
    margin-right: 100px;
    margin-top: -310px;
  }

  .imagem3 img{
    width: 250px; /* Define a largura da imagem */
    height: 250px; /* Define a altura da imagem */
    border-radius: 50%;
    float:right;
    margin-right: 400px;
    margin-top: -310px;
  }
    strong{
        color:black;
       
    }