1 - Estilizando o cabeçalho com CSS

CSS:

.cabecalho__navegacao__link {

    color: #22D4FD;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
}

2 - Ajustando o espaçamento do conteúdo

CSS:

.cabecalho__navegacao {

    padding: 3% 0% 0% 18%;
    display: flex;
    flex-direction: row;
    gap: 80px;
}

3 - Criando e navegando para a página "Sobre mim"

HTML - index:

    <header class = "cabecalho">

        <nav class = "cabecalho__navegacao">

            <a class = "cabecalho__navegacao__link" href = "index.html"> Home </a>
            <a class = "cabecalho__navegacao__link" href = "about.html"> Sobre Mim </a>
        </nav>

    </header>

HTML - Sobre Mim:

<!DOCTYPE html>

<html lang = "pt-br">

<head>

    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Sobre Mim </title>
</head>

<body>
    
    <header> </header>
    <main> 

        <h1> Sobre Mim </h1>
    </main>
    <footer> </footer>

</body>

</html>

4 - Ajustando a estilização após reorganização de arquivos

HTML - index:

<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> Portifolio </title>
    <link rel = "stylesheet" href = "./styles/style.css">

</head>

CSS:

.cabecalho__navegacao__link {

    color: #22D4FD;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
}

5 - Estruturando a página "Sobre mim" com cabeçalho e rodapé

HTML - Sobre Mim:

<body>
    
    <header class = "cabecalho">

        <nav class = "cabecalho__navegacao">

            <a class = "cabecalho__navegacao__link" href = "index.html"> Home </a>
            <a class = "cabecalho__navegacao__link" href = "about.html"> Sobre Mim </a>
        </nav>

    </header>

    <main> 
    </main>

    <footer class = "rodape">

        <p> Desenvolvido por Victor. </p>

    </footer>

</body>

6 - Importando e corrigindo o caminho do arquivo CSS na página "Sobre mim"

HTML - Sobre Mim:

<head>

    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Sobre Mim </title>
    <link rel = "stylesheet" href = "styles/style.css">
</head>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Oi, Victor! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu progresso ficou bem organizado, especialmente ao mostrar a evolução da estrutura HTML e o ajuste do caminho do CSS na página "Sobre mim". Isso mostra atenção aos detalhes na navegação entre páginas.

Uma dica interessante para o futuro é usar o seletor universal * no início do CSS para padronizar o espaçamento de todos os elementos da página. Por exemplo:


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Esse trecho zera margens e paddings padrão do navegador, o que ajuda a manter a consistência visual desde o início.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!