Encriptador casi updates :)

mrp500 · Mar 4, 2024 · ee43de3 · ee43de3
1 parent 755a30a
commit ee43de3
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 5 deletions.
diff --git a/imagenes/candado.svg b/imagenes/candado.svg
diff --git a/imagenes/detective.svg b/imagenes/detective.svg
diff --git a/index.html b/index.html
@@ -21,8 +21,10 @@
         </script>
     </head>
     <body>
-        <h1>Encriptador<br>
-            Desencriptador</h1>
+        <h1><img class="candado" src="imagenes/candado.svg">
+            <span class ="Encriptador">Encriptador</span><br>
+            <span class = "Desencriptador">Desencriptador</span>
+        </h1>
         <label for="inputTextArea"></label>
             <div class="input">
                 <textarea id="inputTextArea" rows="18" cols="40" placeholder="Ingrese texto aquí" class="campotransparente-uno"></textarea>

diff --git a/styles.css b/styles.css
@@ -1,13 +1,24 @@
 h1 {
-    font-size: 40px;
+    font-size: 32px;
     text-align: block;
     color: rgb(139, 180, 255);
     font-family: 'Montserrat', sans-serif;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: 0;
+    margin-bottom: 15px;
     font-weight: bold;
 }
 
+.Desencriptador {
+    margin-left: 68px;
+}
+
+.candado {
+    width: 60px;
+    height: 60px;
+    transform: translate(0px, 35px);
+    filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
+}
+
 body {
     width: 1080px;
     height: 720px;
@@ -161,6 +172,21 @@ p {
 
 @media screen and (max-width: 720px) {
 
+    .candado {
+        width: 60px;
+        height: 60px;
+        transform: translate(0px, 35px);
+        filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
+    }
+
+    .Encriptador {
+        margin-right: 80px;
+    }
+
+    .Desencriptador {
+        margin-left: 40px;
+    }
+
     h1 {
         font-size: 30px;
         text-align: center;