From cd35fa21c691353552a0f2883f8cbfa66b51c089 Mon Sep 17 00:00:00 2001
From: devfzn <dev_fzn@proton.me>
Date: Tue, 30 May 2023 22:20:49 -0400
Subject: [PATCH] =?UTF-8?q?creaci=C3=B3n=20de=20estilos=20b=C3=A1sicos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 19 +++++++++--------
 style.css  | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 0d0eec8..08753e0 100644
--- a/index.html
+++ b/index.html
@@ -13,9 +13,9 @@
     </head>
     <body>
         <main>
-            <section id="mensaje" style="border-radius: 25px; padding: 10px; background: magenta;">
+            <section id="mensaje">
                 <div>
-                    <img src="./imagenes/logo.png"/>
+                    <img id="logo" src="./imagenes/logo.png"/>
                 </div>
                 <div>
                     <label for="frase">Ingresa tu mensaje</label>
@@ -26,21 +26,22 @@
                 </div>
                 <div id="botones">
                     <img src="./imagenes/exclamacion.png"/>
-                    <p>Solo letras minúsculas y sin acentos</p>
+                    <p id="uso">Solo letras minúsculas y sin acentos</p>
                     <!--<small>Solo letras minúsculas y sin acentos</small>-->
-                    <button id="btn-encriptar">Encriptar</button>
-                    <button id="btn-desencriptar">Desencriptar</button>
+                    <button class="botones" id="btn-encriptar">Encriptar</button>
+                    <button class="botones" id="btn-desencriptar">Desencriptar</button>
                 </div>
             </section>
-            <section id="info" style="border-radius: 25px; padding: 10px; background: magenta;">
+            <section id="info">
                 <div>
                     <img src="./imagenes/mono.png">
                     <h2>Ningún mensaje fue encontrado</h2>
                     <p>Ingresa el texto que deseas encriptar o desencriptar.</p>
                 </div>
-                <div style="display: block;">
-                    <textarea cols="29" rows="15" readonly id="resultado"></textarea>
-                    <button id="btn-copiar">Copiar</button>
+                <div id="copiar">
+                    <textarea cols="29" rows="10" readonly id="resultado"></textarea>
+                    </br>
+                    <button class="botones" id="btn-copiar">Copiar</button>
                 </div>
             </section>
         </main>
diff --git a/style.css b/style.css
index e69de29..53dce18 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,60 @@
+*{
+    font-family: 'Press Start 2P', cursive;
+    font-size: smaller;
+}
+
+main {
+    display: flex;
+    background: magenta;
+    /*align-content: center;*/
+    justify-content: center;
+    flex-wrap: wrap;
+    max-height: 100%;
+    min-height: 100%;
+}
+
+#logo {
+    padding: 2%;
+}
+
+#mensaje {
+    margin-left: 4%;
+    margin-right: 2%;
+    margin-top: 3%;
+    margin-bottom: 3%;
+    background: #006ef9;
+    border-radius: 25px;
+    padding: 1%;
+    width: 100%;
+    max-width: fit-content;
+}
+
+#uso {
+    font-weight: lighter;
+}
+
+#info {
+    margin-left: 2%;
+    margin-right: 4%;
+    margin-top: 3%;
+    margin-bottom: 3%;
+    background: #006ef9;
+    border-radius: 25px;
+    padding: 1%;
+    width: 100%;
+    max-width: fit-content;
+}
+
+#copiar{
+    padding: 5%;
+    display: block;
+}
+
+.botones {
+    font-size:large;
+}
+
+footer {
+    background-color: #0079db;
+    padding: 1%;
+}
