404.html

<!DOCTYPE html>

<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <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=Inter:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <meta name="viewport" content="width=device-width">

    <title>Decodificador</title>
    <link rel="stylesheet" href="Reset.css">
    <link rel="stylesheet" href="Pag_inicial.css">
    
    
    <link rel="shortcut icon" href="Imagens\A_Alura.svg" type="image/x-icon">
</head>

<body>
    <main>

        <header>
            <a href="https://www.alura.com.br/"><img src="Imagens/A_Alura.svg"></a>
       </header>

       <section class="digita-mensagem">
        <textarea id="input-text" class="mensagem" placeholder="Digite a sua mensagem" required></textarea>

        <div class="aviso">
            <i class="fa-sharp fa-solid fa-circle-exclamation"></i>
            <p>Apenas letras minísculas e sem acento.</p>
        </div>
        <button onclick="criptografar()" value="Criptografar" class="criptografar">Criptografar</button>
        <button onclick="descriptografar()" value="Descriptografar" class="descriptografar">Descriptografar</button>
       </section>
        
       <section id="output" class="resposta">

        <img src="Imagens/Boneco.svg">
            <div>
                <h2>Nenhuma mensagem encontrada</h2>
                <p>Digite um texto que você deseja criptografar ou descriptografar.</p>
                
            </div>

       </section>      
    </main>

<footer>
    <section>
        <div>    
            <p>Desenvolvido por Matheus Peretta</p>
        </div>
            <a href="https://www.linkedin.com/in/matheus-peretta/"><i class="fa-brands fa-linkedin-in"></i></a>
            |
            <a href="https://github.com/MatheusPeretta"><i class="fa-brands fa-github"></i></a>
    </section>

</footer>


<script src="lógica.js"></script>
    
</body>