Construção Portifólio HTML e CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Estrutura HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>PORTIFÓLIO</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <header>
            <div class="logo">
            <img src="./capa.jfif" alt="capa">
            </div> 
            <button><a href="https://www.linkedin.com/in/helena-marcomini-21707b145/">LinkedIn</a></button>
            <button><a href="https://github.com/HelenaMarcomini22">GitHub</a></button>
            <button><a href="mailto:helenarfmarcomini@gmail.com">E-mail</a></button>
            </header>
        <main>
            <div class="foto">
            <img src="./Foto perfil.jfif" alt="foto"></div>
            <h1><strong>Eleve seu negócio digital a outro nível com um Front-end de qualidade!</strong></h1>
            <p>Olá! Sou Helena Marcomini, desenvolvedora Front-end. Ajudo empresas a criarem experiências digitais incríveis. Vamos conversar?</p>
        </main>
        <footer>Direitos reservados © 2025</footer>
    </body>
</html>

Estrutura CSS:

header {
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid darkblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width: 100px;
    height: auto;
    margin-right: 10px;
}

.foto {
    width: 250px;
    height: auto;
    text-decoration: none;
    display: center;
    margin-right: 20px;
    align-items: center;
}


h1 {
    color: blueviolet;
    font-size: 30px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
    font-family: 'Arial', sans-serif;

}
p {
    color: #05ecc6;
    font-size: 16px;
    line-height: 1.5;
    margin: 10px 0;
    font-family: 'Georgia', serif;
}

body {
    background-color:black;
}
button {
    background-color: blueviolet;
    border: 2px solid darkblue;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Arial', sans-serif;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

button:hover {
    background-color: #05ecc6;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

Garanta sua matrícula hoje e ganhe + 2 meses grátis