index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <title>Encriptador Challenge Alura</title>
</head>
<body>
    <header>
        <img class="logo" src="img/Logo-1.png" alt="logo de Alura Latam">
    </header>
    <main>
        <section class="primeraSeccion">
            <div class="contenedorCajaTexto">
                <textarea class="textarea" id="textoParaEncriptado" placeholder="Ingrese un Texto para Encriptar" cols="33" rows="13"></textarea>
            </div>
            <div class="advertenciaMayusculas">
                <img src="img/bi_exclamation-circle-fill-1.png">
                <p>Solo Letras en minúsculas y sin acentos</p>
            </div>
            <div class="botones">
                <button class="btnencriptar" onclick="encriptar()">Encriptar</button>
                <button class="btndesencriptar" onclick="desencriptar()">Desencriptar</button>
            </div>
        </section>

        <section class="segundaSeccion">
            <div class="contenedorTextoEncriptado">
                <textarea class="textarea" id="textoEncriptado" placeholder="Texto Encriptado" cols="30" rows="10"></textarea>
            </div>
            <div class="botonSeccionDos">
                <button class="btnCopiar" onclick="copiarTexto()">Copiar</button>
            </div>
        </section>

        <section class="munieco">
            <div class="muniecoDiseño">
                <img src="img/Muñeco.png">
            </div>
        </section>
    </main>

    <script src="script.js"></script>
</body>
</html>