index.html

<!DOCTYPE html>
<html lang="es">

<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>Challenge_Encriptador</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        
        <img class="logo" src="imagenes/logo.svg" alt="Logo Alura">
        
    </header>

    <main class="presentacion">
        <section class="section-contenedor">

            <div class="contenedor-texto">
                <textarea placeholder="Ingrese el texto aqui" class="cajadetexto"></textarea>
            </div>

            <div class="alerta">
                <img src="imagenes/bi_exclamation-circle-fill.png" alt="exclamacion alerta">
                <p>Solo letras minusculas y sin acentos</p>
            </div>
            <div class="contenedor-botones">
                <input type="button" class="boton-encriptar" value="Encriptar"> 
                <input type="button" class="boton-desencriptar" value="Desencriptar">
            </div>
        
        </section>

        <section class="section-resultado">

            <div class="contenedor-munieco">
                <img src="imagenes/Muñeco.png" alt="muneco">
            </div>

            <div class="contenedor-mensaje">
                <h3>Ningun mensaje fue encontrado</h3>
                <p>Ingresa el texto que desees encriptar o desencriptar.</p>
            </div>

            <div class="contenedor-copiar">
                <input type="button" class="boton-copiar" value="Copiar">
            </div>

            <div class="contenedor-resultado">
                <p class="texto-resultado"></p>
            </div>
        </section>

    </main>

    <script src="script.js"> </script>

</body>

</html>