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>
</div>
<div id="botones">
<img src="./imagenes/exclamacion.png"/>
<p id="uso">Solo letras minúsculas y sin acentos</p>
<!--<small>Solo letras minúsculas y sin acentos</small>-->
<p id="uso"><img src="./imagenes/exclamacion.png"/> Solo letras minúsculas y sin acentos serán consideradas</p>
<button class="botones" id="btn-encriptar">Encriptar</button>
<button class="botones" id="btn-desencriptar">Desencriptar</button>
</div>
</section>
<section id="info">
<div>
<img src="./imagenes/mono.png">
<h2>Ningún mensaje fue encontrado</h2>
<img id="mono" src="./imagenes/mono.png">
<p>Ingresa el texto que deseas encriptar o desencriptar.</p>
</div>
<div id="copiar">

40
style.css
View File

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