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> </head>
<body> <body>
<main> <main>
<section id="mensaje" style="border-radius: 25px; padding: 10px; background: magenta;"> <section id="mensaje">
<div> <div>
<img src="./imagenes/logo.png"/> <img id="logo" src="./imagenes/logo.png"/>
</div> </div>
<div> <div>
<label for="frase">Ingresa tu mensaje</label> <label for="frase">Ingresa tu mensaje</label>
@ -26,21 +26,22 @@
</div> </div>
<div id="botones"> <div id="botones">
<img src="./imagenes/exclamacion.png"/> <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>--> <!--<small>Solo letras minúsculas y sin acentos</small>-->
<button id="btn-encriptar">Encriptar</button> <button class="botones" id="btn-encriptar">Encriptar</button>
<button id="btn-desencriptar">Desencriptar</button> <button class="botones" id="btn-desencriptar">Desencriptar</button>
</div> </div>
</section> </section>
<section id="info" style="border-radius: 25px; padding: 10px; background: magenta;"> <section id="info">
<div> <div>
<img src="./imagenes/mono.png"> <img src="./imagenes/mono.png">
<h2>Ningún mensaje fue encontrado</h2> <h2>Ningún mensaje fue encontrado</h2>
<p>Ingresa el texto que deseas encriptar o desencriptar.</p> <p>Ingresa el texto que deseas encriptar o desencriptar.</p>
</div> </div>
<div style="display: block;"> <div id="copiar">
<textarea cols="29" rows="15" readonly id="resultado"></textarea> <textarea cols="29" rows="10" readonly id="resultado"></textarea>
<button id="btn-copiar">Copiar</button> </br>
<button class="botones" id="btn-copiar">Copiar</button>
</div> </div>
</section> </section>
</main> </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%;
}