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

Estou aplicando os conhecimentos adquiridos no curso, complementados por tutoriais do YouTube, e estou avançando na criação do meu portfólio. Existe um desafio considerável pela frente, mas estou confiante em minha capacidade de atingir esse objetivo.

Print do meu projeto final

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- GOOGLE FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!-- FIM GOOGLE FONTS -->
    <link rel="stylesheet" href="style.css">
    <title>Bruno Alex</title>
</head>
<body>
    
    <header>
        <div class="interface">
            <div class="logo">
                <a href="#"></a>
                <img src="images/Logo Bruno.png" alt="Logo Bruno">

            </div><!--Fechando logo-->

            <nav class="menu-desktop">
                <ul>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Certificações</a></li>
                    <li><a href="#">Projetos</a></li>
                </ul>
            </nav>

            <div class="bruno-contato">
                <a href="https://www.linkedin.com/in/brunoasanto/"><img src="/images/Logo Linkedin.png" alt="Logo Linkedin"></a>
                <a href="https://github.com/Brunoasantos88"><img src="/images/Logo Git.png" alt="Logo Github"></a>
            </div>

            </div><!--Fechando interface-->
            <main>
                <h1>
                    Trajetória Profissional: Bruno Alex
                    <strong>
                    navegando pelos Desafios da Programação
                    </strong>
                </h1>
                <p>
                    Olá, sou Bruno Alex, um entusiasta da programação. Explore meu mundo de códigos transformadores e descubra como encaro desafios com aprendizado e diversão. Bem-vindo à minha jornada no universo da programação!
                </p>
                <img src="/images/foto Bruno.jpg" alt="Foto Bruno Alex">
            </main>
    </header>
</body>
</html>

style.css


/* ESTILO GERAL */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    background-color: #000;
    height: 100vh;
}

.interface{
    max-width: 1280px;
    margin: 0 auto;
}

/* ESTILO DO CABEÇALHO */
header{
    padding: 40px 4%;
}

header > .interface{
    display: flex;
    align-items: center;
    justify-content: space-between;

}

header a{
    color:#7d7d7d;
    text-decoration: none;
    display:inline-block;
    transition: .2s;
}

header a:hover{
    color: #fff;
    transform: scale(1.2);
}

header nav ul li{
    display: inline-block;
    padding: 0 40px;
}

main {
    color: #fff;
    display: inline-block;
    padding: 0 40px;
}

header div a {
    display: inline-block; 
    list-style-type: none;
    padding: 0 10px;
}

header div a img {
    width: 50px;
}

main {
    text-align: center;
    margin-top: 40px;
}

Mergulhe em programação