inicio.html

<!DOCTYPE html>
<html lang="en">
<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>Sobre Mim</title>

    <style>body { 
        background-color: rgb(50, 123, 207); 
    }
    </style>

    <style>header { 
        
        font-family: 'Franklin Gothic Medium';
        color: white; 
        font-size: 22px;
        text-align: center;
    }
    </style>

    <style>nav {
        font-family: 'Verdana';
        font-size: 20px;
        text-align: center;
        
    }
    </style>

</head>
<body>
    <header>
        <h1> Página Incrível Sobre o João  <hr/>
        </h1>
    </header>

    <nav> 
        <a href="indice/biografia.html" > Sobre mim | </a>
        <a href="indice/curiosidade1.html" > Curiosidade #1 | </a>
        <a href="indice/curiosidade2.html" > Curiosidade #2 | </a>
        <a href="indice/curiosidade3.html" > Curiosidade #3 </a>
    
    </nav>

    <section id="conteudo"> </section>

    <style>
        .footer {
            position: fixed;
            left: 10px;
            bottom: 10px;
            width: 100%;
            
        }

        .footer button {

            background-color: rgb(48, 48, 48); 
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
        
    <div class="footer">
        <button onclick = "mudaCor()" type="button">Modo escuro</button> 
    </div>

    <script> 
        function mudaCor() { 
            const claro = "rgb(50, 123, 207)"; 
            const escuro = "rgb(33, 48, 65)";
            document.body.style.background == claro? document.body.style.background = escuro : document.body.style.background = claro;
        }
    </script>

    
        
    <script>
        document.querySelectorAll('a').forEach(link => {
            link.onclick = function(e) {
                e.preventDefault()

                const conteudo = document.getElementById('conteudo')
                fetch(link.href)
                   .then(resp => resp.text())
                   .then(html => conteudo.innerHTML = html)
            }
        })
    </script>


</body>
</html>