index.html

<!DOCTYPE html>
<html lang="pt-br">
<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">

    <link rel="shortcut icon" href="./imagens/relogio.png" type="image/x-icon">

    <title>Relógio</title>

    <link rel="stylesheet" href="./css/style.css">

    <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=Saira&display=swap" rel="stylesheet">

    <script src="https://kit.fontawesome.com/6f8be84ac9.js" crossorigin="anonymous"></script>

</head>
<body>

    <div class="container">

        <div id="cima">
            <div class="botoes">
                <input type="button" value="Tema Claro" class="claro">
                <input type="button" value="Tema Escuro" class="escuro">
            </div>
        </div>

        <div id="baixo">

            <div class="tempo">
                <p id="rel"></p>
                <p id="calendario"></p>
            </div>

            <div class="portfolio">
                <a href="https://github.com/iampaylin" target="_blank">
                    <button>
                        <i class="fa-brands fa-github separar"></i>Github
                    </button>
                </a>

                <a href="https://www.linkedin.com/in/paylin/" target="_blank">
                    <button>
                        <i class="fa-brands fa-linkedin separar"></i>Linkedin
                    </button>
                </a>
            </div>

        </div>

    </div>

    <script src="relogio.js"></script>
</body>
</html>