Skip to content

Commit 7b5ed48

Browse files
author
Magucho Gómez
committed
Integración del la función desencriptar.
1 parent 90c4ac5 commit 7b5ed48

File tree

10 files changed

+440
-3
lines changed

10 files changed

+440
-3
lines changed

‎Style.css

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
.cuerpo::-webkit-scrollbar{
2+
width: 15px;
3+
}
4+
.cuerpo::-webkit-scrollbar-thumb{
5+
background: rgb(90, 105,133);
6+
border-radius: 50px;
7+
}
8+
.cuerpo::-webkit-scrollbar-thumb:hover{
9+
background: rgb(99, 148, 238);
10+
11+
}
12+
13+
.cuerpo{
14+
position: relative;
15+
width: 100vw;
16+
height: 100vh;
17+
background:#E5E5E5;
18+
}
19+
20+
.logo{
21+
display: flex;
22+
flex-direction: column;
23+
align-items: flex-start;
24+
padding: 0px;
25+
gap: 40px;
26+
27+
position: absolute;
28+
width: 120px;
29+
height: 48px;
30+
left: 40px;
31+
top: 40px;
32+
33+
flex: none;
34+
order: 0;
35+
flex-grow: 0;
36+
}
37+
38+
.letra {
39+
width: 31.09px;
40+
height: 48px;
41+
left: 48px;
42+
position: absolute;
43+
left: 36.67%;
44+
right: 37.43%;
45+
top: 0%;
46+
bottom: 0%;
47+
font-size: 88px;
48+
font-family: 'Arial Narrow';
49+
}
50+
51+
.T-area{
52+
position: absolute;
53+
width: 42%;
54+
height: 60%;
55+
left: 12%;
56+
top: 15%;
57+
border: none ;
58+
font-family: 'Inter';
59+
font-style: normal;
60+
font-weight: 400;
61+
font-size: 32px;
62+
line-height: 150%;
63+
background-color: #E5E5E5;
64+
}
65+
.T-area::placeholder{
66+
color: #0A3871;
67+
}
68+
69+
.T-area:focus,
70+
.T-area:active{
71+
border: none;
72+
outline: none;
73+
}
74+
textarea:focus{
75+
outline-style: none;
76+
77+
}
78+
79+
.enunciadoT {
80+
position: absolute;
81+
width: 80%;
82+
left: 12%;
83+
top: 80%;
84+
align-items: center;
85+
display: flex;
86+
padding: 0px;
87+
gap: 8px;
88+
flex-direction: row;
89+
}
90+
91+
.enunciadoT, .condicion {
92+
font-family: 'Inter';
93+
font-style: normal;
94+
font-weight: 400;
95+
font-size: 12px;
96+
line-height: 150%;
97+
color: #495057;
98+
opacity: 0.8;
99+
flex: none;
100+
order: 1;
101+
flex-grow: 0;
102+
}
103+
104+
.a-botones{
105+
display: flex;
106+
flex-direction: row;
107+
align-items: flex-start;
108+
padding: 1% 0;
109+
gap: 24px;
110+
111+
position: absolute;
112+
width: 80%;
113+
left: 12%;
114+
top: 82%;
115+
}
116+
117+
.boton1{
118+
flex-direction: row;
119+
align-items: flex-start;
120+
padding: 24px;
121+
gap: 8px;
122+
123+
width: 328px;
124+
height: 67px;
125+
background: #0A3871;
126+
border-radius: 24px;
127+
color: #FFFFFFFF;
128+
font-style: normal;
129+
font-weight: 400;
130+
font-size: 16px;
131+
line-height: 19px;
132+
text-align: center;
133+
transition: 1s all;
134+
}
135+
136+
.boton2{
137+
flex-direction: row;
138+
align-items: flex-start;
139+
padding: 24px;
140+
gap: 8px;
141+
142+
width: 328px;
143+
height: 67px;
144+
145+
background: #FFFFFFFF;
146+
border-radius: 24px;
147+
148+
color: #0A3871;
149+
border: 1px solid #0A3871;
150+
font-style: normal;
151+
font-weight: 400;
152+
font-size: 16px;
153+
line-height: 19px;
154+
text-align: center;
155+
transition: 3s all;
156+
}
157+
.boton1:hover{
158+
color: #0A3871;
159+
background: #FFFFFFFF;
160+
border: 1px solid #0A3871;
161+
162+
}
163+
.boton2:hover {
164+
color: #FFFFFFFF;
165+
background: #0A3871;
166+
border: 1px solid #FFFF FFFF;
167+
}
168+
169+
.texto2 {
170+
display: flex;
171+
justify-content: center;
172+
position: absolute;
173+
width: 30%;
174+
height: 90%;
175+
left: 60%;
176+
top: 5%;
177+
background: #FFFFFFFF;
178+
border-radius: 52px;
179+
box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08);
180+
}
181+
182+
.mensaje-encriptado {
183+
display: flex;
184+
flex-direction: column;
185+
align-items: center;
186+
justify-content: center;
187+
padding: 1% ;
188+
gap: 16px;
189+
position: absolute;
190+
width: 100%;
191+
top: 65%;
192+
text-align: center ;
193+
}
194+
195+
.mensaje-encriptado h2 {
196+
width: 60%;
197+
font-family: "Inter";
198+
font-style: normal;
199+
font-weight: 700;
200+
font-size: 24px;
201+
line-height: 120%;
202+
text-align: center;
203+
color: #343A40;
204+
}
205+
206+
.mensaje-encriptado, .parrafo {
207+
width: 80%;
208+
font-family: 'Inter';
209+
font-style: normal;
210+
font-weight: 400;
211+
font-size: 16px;
212+
line-height: 150%;
213+
text-align: center;
214+
color: #495057;
215+
216+
}
217+
218+
.texto2 img {
219+
position: absolute;
220+
width: 80%;
221+
height: 50%;
222+
top: 15%;
223+
}
224+
225+
@media (max-width: 57.5em){
226+
.cuerpo{
227+
display: flex;
228+
flex-direction: row;
229+
}
230+
231+
.texto{
232+
width: 100%;
233+
}
234+
.T-area{
235+
width: 80%;
236+
height: 60%;
237+
left: 10%;
238+
top: 5%;
239+
}
240+
.enunciadoT{
241+
width: 80%;
242+
left: 10%;
243+
top: 67%;
244+
}
245+
.condicion{
246+
font-size: 16px;
247+
}
248+
.a-botones{
249+
width: 80%;
250+
left: 10%;
251+
top: 70%;
252+
}
253+
.boton1, .boton2{
254+
width: 48%;
255+
border: 16px;
256+
}
257+
.boton1:hover, .boton2:hover{
258+
margin: 0.3%;
259+
width: 47.5%;
260+
padding: 1.8%;
261+
}
262+
263+
.texto2{
264+
width: 80%;
265+
height: 15%;
266+
left: 10%;
267+
top: 80%;
268+
}
269+
.mensaje-encriptado{
270+
width: 100%;
271+
top: 5%;
272+
}
273+
274+
.texto2 img{
275+
top: 0;
276+
display: none;
277+
visibility: hidden;
278+
}
279+
}

‎imagenes/dibujoP.png

23.6 KB
Loading

‎imagenes/logo2.jpeg

8.73 KB
Loading

‎imagenes/ok.gif

1.9 MB
Loading

‎imagenes/ok2.gif

1.09 MB
Loading

‎imagenes/prueba.png

421 KB
Loading

‎imagenes/what.gif

830 KB
Loading

‎index.html

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,60 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head></head>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="UTF-8"/>
6+
<meta name="viewport" content="width=device-width"/>
7+
<title>Challenge ONE Magucho </title>
8+
<link rel="stylesheet" href="reset.css">
9+
<link rel="stylesheet" href="Style.css">
10+
<link rel="icon" href="barber/logomobula.png">
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap"
13+
rel="stylesheet">
14+
<link rel="icon" href="imagenes/logo2.jpeg">
15+
</head>
16+
417
<body>
5-
<h1>Hola perras</h1>
18+
19+
<div class="cuerpo">
20+
21+
22+
<div class="logo">
23+
<p style="color: #0A3871; " class="letra">a</p>
24+
</div>
25+
26+
<div class="texto">
27+
28+
<div>
29+
<textarea class="T-area" id="area1" cols="30" rows="10"
30+
placeholder="Ingrese el texto aqui"></textarea>
31+
</div>
32+
33+
<div class="enunciadoT">
34+
<p class="condicion">&#x1f5e3Letras minúsculas y sin acento</p>
35+
</div>
36+
37+
<div class="a-botones">
38+
<input type="submit" value="Encriptar" class="boton1" onclick="encriptar()" id="codifica"/>
39+
<input type="submit" value="Desencriptar" class="boton2" onclick="desencriptar()" id="descodifica"/>
40+
</div>
41+
</div>
42+
43+
<div class="texto2">
44+
45+
<img src="imagenes/dibujoP.png" alt="" id="ima-inicio"/>
46+
<div class="mensaje-encriptado" id="mensaje-encriptado">
47+
<h2 id="titulo-mensaje">Ningún mensaje fué encontrado</h2>
48+
<p id="parrafo" class="parrafo">
49+
Ingrese el mensaje texto que deseas encriptar o desencriptar
50+
</p>
51+
<!--<textarea name="mensaje" id="mensaje" cols="30" rows="10" class="mensaje"></textarea> -->
52+
</div>
53+
54+
</div>
55+
</div>
56+
657
</body>
58+
59+
<script src="index2.js"></script>
760
</html>

0 commit comments

Comments
 (0)