index.html

<!DOCTYPE html>
<html lang="pt" id="meu-codigo">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="imagens/fav-icon.png" type="image/x-icon">
    <title>HCA | ENTRAR</title>
    <!-- ICONS DO GOOGLE ICON -->
    <link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <!-- CSS -->
    <link rel="stylesheet" href="estilo.css">
</head>

<body>
    <main class="main" id="main">

        <div class="bg-formulario">

            <div class="o-formulario">

                <form class="form" id="form">

                    <div class="pre-titulo">
                        <span class="theme-mod" id="theme-mod" onclick="changeMod()"></span>
                    </div>
                    <div class="form-titulo">
                        <h2>ENTRAR</h2>
                    </div>

                    <div class="l-g">
                        <a href="javascript:void(0)" class="seccao-google">
                            <img src="imagens/google-g-logo.png" alt="LOGO DA GOOGLE">
                            <figcaption>Iniciar Secção com Google</figcaption>
                        </a>
                    </div>

                    <div class="seccao-ou">
                        <span><em> ou com </em></span>
                    </div>

                    <div class="input-box">
                        <input type="text" name="user_name" class="inputs" id="user_name" required autocomplete="off">
                        <label for="user_name">Usuário</label>
                    </div>

                    <div class="input-box">
                        <input type="password" name="user_password" class="inputs" id="user_password" required>
                        <label for="user_password">Senha</label>
                    </div>

                    <div class="guardar-seccao">
                        <label for="mant-secc"><input type="checkbox" name="mant-secc" id="mant-secc">
                            Manter secção
                        </label>
                        <a href="recuperarasenha.html">Esqueci senha!</a>
                    </div>

                    <div class="input-box">
                        <button class="enviar_btn" id="enviar_btn" onclick="entrar()">ENTRAR</button>
                    </div>

                    <div class="ja-tenho-conta">
                        <p>Não tenho conta! <a href="tela-de-cadastro.html">Criar conta</a></p>
                    </div>

                    <div class="notific-login" id="notific-login">
                        <p id="usi">Usuário ou senha invalido!</p>
                        <p id="ptc">Preecha todos campos!</p>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <script src="javascript.js"></script>
    
</body>

</html>