[Projeto] Estilizando o Projeto com CSS - Exercício 04 | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Criando um arquivo base de HTML e linkando o CSS:

<!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>Portfólio | Laís Moraes</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="logotipo-laís-moraes.png" alt="Logotipo da Laís Moraes">
    </header>
    <main>
        <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
        <p>
        Olá! Sou Laís Moraes, Desenvolvedora Front-end. Ajudo empresas a melhorarem sua presença digital com soluções criativas e eficientes. Sinta-se à vontade para verificar meus trabalhos acessando os sites abaixo:
        </p>
        <p>
            <img src="_Foto Portfólio.jpg" alt="Desenvolvedora Laís Moraes">
        </p>
        <div class="buttons-container">
            <a href="https://instagram.com/imlais" target="_blank"><button>Instagram</button></a>
            <a href="https://github.com/moraeslais" target="_blank"><button>Github</button></a>
        </div>
    </main>
    <footer>
        <h4>Para mais informações, entre em contato:</h4>
        <a href="mailto:email-laismoraes@example.com">email</a>
        <p>© Copyright - Protegido por direitos autorais</p>
    </footer>
</body>
</html>

Um CSS Colorido (escolhi este estilo para apresentar no exercício):

body {background-color: indigo;
    color: white;

}

main {
    text-align: center; 
}

h1 {
    color: #ddeaf7;
    margin-bottom: 20px;
}

strong {
    color: #f8eef3;
}

header {
    text-align: center;
}

img {
    max-width: 300px;
    height: auto;
}

button {
    background-color: #d9e5ec;
    color: rgb(141, 52, 111);
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-block;
    margin-right: 10px;
}

.buttons-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}

button:hover {
    background-color:rgb(255, 0, 170); 
}

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

a:hover {
    text-decoration: underline; 
    color: rgb(255, 0, 170); 
}

footer {
    text-align: center;
    background-color: gray;
    color: white;
}

p {
    white-space: pre-line;
}