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

creación de estilos básicos

Browse Source
This commit is contained in:
devfzn 2023-05-30 22:20:49 -04:00
parent a33b852af2
commit cd35fa21c6
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
2 changed files with 70 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -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>

60
style.css
View File

@ -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%;
}