Projeto Final (Portfólio) | 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">
    <title>Meu Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
    <h1>Meu Portfólio</h1>
    </header>

    <main>
        <div>
          <p>
            Olá! me chamo <strong>Karina Morais</strong>, sou formada em comunicação social com ênfase em publicidade e propaganda, tenho mais de uma década de experiência na publicidade, e agora estou neste novo desafio...
            Me aventurar no mundo da programação.
        </p>
            <p>
                Movida pelo interesse pela área de <strong>Front-end</strong>, resolvi estudar a érea de programação.
                Atualmente estou fazendo um curso para iniciante em programação pela Alura.
        </p>
     </div>
        <img src="imagem.png" alt="Foto da Karina Morais">
    </main>

    <footer>
        <h2>Obrigada pela sua visita!</h2>
        <div>
            <p>
                Veja meu perfil no 
                <span><a href="https://www.linkedin.com/in/karina-morais-205b8631/"target="_blank">Linkedin</a>
</span>
            </p>
        </div>
        <div>
            <p>
                Me siga no 
                <span><a href="https://www.instagram.com/karina.morais/"target="_blank">Instagram</a>
                </span>
            </p>
        </div>
        <div>
            <p>
                Me siga no 
                <span><a href="https://github.com/KariMorais"target="_blank">GitHub</a>
                </span>
            </p>
        </div>
        </footer>
</body>
</html>
#

.CSS

body {
    background-color: #000;
    color: #fff;
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  h1{
    letter-spacing: 5px;
    padding-top: 50px;
  }

  header span{
    font-size: 20px;
    color: #ff005c;
    border: solid 2px;
    border-radius: 10px;
    padding: 5px;
  }

  span{
    font-size: 20px;
    color: #ff005c;
    border: solid 1px;
    border-radius: 10px;
    padding: 5px;
  }

  strong {
    color: #ff005c;
  }

img{
    width: 20%;
    height: 20%;
    border-radius: 40px;
    border: solid 1px;
    padding: 2%;
}

main{
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-bottom: 1%;
}

main p{
    max-width: 85%;
    letter-spacing: 2px;
    font-weight: 100;
}

footer{
    background-color: #ff005c;
    height: 1px;
}

h2{
    letter-spacing: 5px;
    padding-top: 20px;
    max-width: 45%;
}

a{
    text-decoration: none;
    color: #ff005c;
}