Finalizadox2

index.html

@@ -15,14 +15,14 @@
     <div class="container">
 
         <div class="encriptar"> 
-          <img class="logo" src="/img/Logo.png" alt="logo">
+          <img class="logo" src="/img/logo-alura.svg" alt="logo">
           <textarea name="texto" class="texto" id="texto" cols="30" rows="10" placeholder="Ingresa el texto aquí"></textarea>
         <div class="terminos">
-          <img class="ifo" src="/img/nifo.svg" alt="ifo">
-          <p>Solo letras minúsculas y sin acentos.</p>
+            <img class="ifo" src="/img/nifo.svg" alt="ifo">
+            <p>Solo letras minúsculas y sin acentos.</p>
         </div>
         <div class="botones">
-          <button class="btn-encriptar" type="button" onclick="encriptar()">Encriptar!</button>
+              <button class="btn-encriptar" type="button" onclick="encriptar()">Encriptar!</button>
               <input type="button" class="btn-desencriptar" value="Desencriptar!" onclick="desencriptar()"/>
         </div>
       </div>

styles.css

@@ -9,12 +9,17 @@
     height: 100vh;
     background: #f3f5fc;
   }
+  .logo{
+    width: 60px;
+    padding-top: 40px;
+    padding-left: 60px;
+  }
   .texto {
     position: absolute;
     width: 42%;
     height: 60%;
     left: 12%;
-    top: 15%;
+    top: 20%;
     border: none;
     font-family: "Open Sans", sans-serif;
     font-weight: 400;
@@ -23,11 +28,6 @@
     background-color: #f3f5fc;
     color: #0a3871;
   }
-  .logo{
-    width: 115px;
-    padding-top: 20px;
-    padding-left: 40px;
-  }
   .texto::placeholder {
     color: #0a3871;
   }
@@ -257,19 +257,19 @@
       flex-direction: row;
     }
     .logo{
-      width: 80px;
-      padding-top: 20px;
-      padding-left: 2px;
+      width: 40px;
+      padding-top: 15px;
+      padding-left: 30px;
     }
     .encriptar {
       width: 100%;
       height: 50%;  
     }
     .texto {
-      width: 80%;
+      width: 90%;
       height: 40%;
       left: 10%;
-      top: 7%;
+      top: 11%;
     }
     .terminos {
       width: 80%;