devfzn/desafio_encriptador
devfzn/desafio_encriptador
1
0
Fork 0
Code Pull Requests Activity

cambio de colores, ajuste margenes y padding

Browse Source
This commit is contained in:
devfzn 2023-06-02 17:18:21 -04:00
parent 428eb7de92
commit 2357ebea8c
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
2 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -25,17 +25,15 @@
required placeholder="Ingresa el texto aquí" autofocus></textarea> required placeholder="Ingresa el texto aquí" autofocus></textarea>
</div> </div>
<div id="botones"> <div id="botones">
<img src="./imagenes/exclamacion.png"/> <p id="uso"><img src="./imagenes/exclamacion.png"/> Solo letras minúsculas y sin acentos serán consideradas</p>
<p id="uso">Solo letras minúsculas y sin acentos</p>
<!--<small>Solo letras minúsculas y sin acentos</small>-->
<button class="botones" id="btn-encriptar">Encriptar</button> <button class="botones" id="btn-encriptar">Encriptar</button>
<button class="botones" id="btn-desencriptar">Desencriptar</button> <button class="botones" id="btn-desencriptar">Desencriptar</button>
</div> </div>
</section> </section>
<section id="info"> <section id="info">
<div> <div>
<img src="./imagenes/mono.png">
<h2>Ningún mensaje fue encontrado</h2> <h2>Ningún mensaje fue encontrado</h2>
<img id="mono" src="./imagenes/mono.png">
<p>Ingresa el texto que deseas encriptar o desencriptar.</p> <p>Ingresa el texto que deseas encriptar o desencriptar.</p>
</div> </div>
<div id="copiar"> <div id="copiar">

40
style.css
View File

@ -5,7 +5,7 @@
main { main {
display: flex; display: flex;
background: magenta; background: #0079db;
/*align-content: center;*/ /*align-content: center;*/
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -15,25 +15,41 @@ main {
#logo { #logo {
padding: 2%; padding: 2%;
margin-bottom: 50px;
} }
label {
align-content: center;
padding: 5px;
}
button{
margin: 10px;
}
#mensaje { #mensaje {
margin-left: 4%; margin-left: 4%;
margin-right: 2%; margin-right: 2%;
margin-top: 3%; margin-top: 3%;
margin-bottom: 3%; margin-bottom: 3%;
background: #006ef9;
border-radius: 25px;
padding: 1%; padding: 1%;
width: 100%; width: 100%;
max-width: fit-content; max-width: fit-content;
} }
#frase {
margin: 10px;
}
#uso { #uso {
font-weight: lighter; margin: 10px;
font-family: monospace;
font-size: small;
} }
#info { #info {
text-align: center;
margin-left: 2%; margin-left: 2%;
margin-right: 4%; margin-right: 4%;
margin-top: 3%; margin-top: 3%;
@ -41,8 +57,18 @@ main {
background: #006ef9; background: #006ef9;
border-radius: 25px; border-radius: 25px;
padding: 1%; padding: 1%;
width: 100%; width: 40%;
max-width: fit-content; }
#mono {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
}
#info h2{
padding: 10px
} }
#copiar{ #copiar{
@ -55,6 +81,6 @@ main {
} }
footer { footer {
background-color: #0079db; background-color: #d63533;
padding: 1%; padding: 1%;
} }