1
resposta

Exercício

1º /* style.css */

header {
    background-color: #4CAF50; /* Cor de fundo do cabeçalho */
    padding: 20px;             /* Espaçamento interno */
    text-align: center;        /* Alinhamento centralizado do texto */
    font-size: 25px;           /* Tamanho da fonte */
    color: white;              /* Cor do texto */
}

header a {
    color: white;              /* Cor dos links no cabeçalho */
    text-decoration: none;     /* Remover sublinhado dos links */
    margin: 0 15px;            /* Espaçamento entre os links */
}

header a:hover {
    text-decoration: underline; /* Adicionar sublinhado ao passar o mouse */
}

2º /* style.css */

main {
    padding: 20px; /* Espaçamento interno do conteúdo */
}

3º 1º página home html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Principal</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Início</a>
            <a href="about.html">Sobre mim</a>
        </nav>
    </header>
    <main>
        <!-- Conteúdo principal -->
    </main>
    <footer>
        <!-- Rodapé -->
    </footer>
</body>
</html>

2º página about html

<!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>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Início</a>
            <a href="about.html">Sobre mim</a>
        </nav>
    </header>
    <main>
        <h1>Sobre mim</h1>
        <!-- Conteúdo da página "Sobre mim" -->
    </main>
    <footer>
        <!-- Rodapé -->
    </footer>
</body>
</html>

4º home e about devem ter o mesmo link html

<head>
    ...
    <link rel="stylesheet" href="./styles/styles.css">
    ...
</head>

/* style.css */

header a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

<!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>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Início</a>
            <a href="about.html">Sobre mim</a>
        </nav>
    </header>
    <main>
        <h1>Sobre mim</h1>
        <!-- Conteúdo da página "Sobre mim" -->
    </main>
    <footer>
        <!-- Rodapé -->
    </footer>
</body>
</html>

6º html

<head>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
1 resposta

Oiii Edivoneide,

Seu código está bem organizado e gostei da forma como você separou as regras de estilo no arquivo CSS, tornando a manutenção mais fácil. Uma curiosidade interessante é que você usou a pseudo-classe :hover para os links no cabeçalho, melhorando a usabilidade e a interatividade da navegação.

Continue com essa dedicação constante.

Abraços e bons estudos!