-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (123 loc) · 3.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Encriptador Alura</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="./css/style-desktop.css"
media="screen and (min-width: 800px)"
/>
</head>
<body>
<header class="head" id="head" name="head">
<figure class="head-logo" name="head-logo" id="head-logo">
<img
src="./img/logo-alura.svg"
alt="Logo de alura latam"
title="Alura Latam"
/>
</figure>
</header>
<main class="main" name="main" id="main">
<textarea
class="main-input"
name="main-input"
id="main-input"
cols="30"
rows="4"
placeholder="Ingrese su texto aquí"
></textarea>
<section class="main-alert" id="main-alert" name="main-alert">
<figure
class="main-alert-icono"
name="main-alert-icono"
id="main-alert-icono"
>
<img src="./img/atencion.svg" alt="Imagen de alerta" />
</figure>
<span
class="main-alert-text"
name="main-alert-text"
id="main-alert-text"
>Solo letras minúsculas y sin acentos</span
>
</section>
<section class="main-botom" name="main-botom" id="main-botom">
<input
class="main-botom-encriptar"
name="main-botom-encriptar"
id="main-botom-encriptar"
type="submit"
value="Encriptar"
/>
<input
class="main-botom-desencriptar"
name="main-botom-desencriptar"
id="main-botom-desencriptar"
type="submit"
value="Desencriptar"
/>
</section>
<section class="main-message" id="main-message" name="main-message">
<figure class="muneco" id="muneco" name="muneco">
<img src="./img/muneco.svg" alt="Imagen del muñeco de encriptar" />
</figure>
<div
class="main-message-cont"
name="main-message-cont"
id="main-message-cont"
>
<span class="main-message-text1">Ningún mensaje fue encontrado</span>
<span class="main-message-text2"
>ingresa el texto que desees encriptar o desencriptar.</span
>
</div>
<textarea
class="texto-encriptado"
name="texto-encriptado"
id="texto-encriptado"
cols="30"
rows="5"
></textarea>
<input
class="boton-copiar"
name="boton-copiar"
id="boton-copiar"
type="submit"
value="Copiar"
/>
</section>
</main>
<footer class="foot">
<p class="foot-text">Ing. José Luis Martínez</p>
<figure class="foot-logos">
<picture class="foot-github">
<a href="https://github.com/joseluismp1984" target="_blank"
><img src="./img/logo-github.svg" alt="Logo GitHub con enlace"
title:="https://github.com/joseluismp1984" /></a
>
</picture>
<picture class="foot-linkedin">
<a
href="https://www.linkedin.com/in/jose-luis-martinez-palmeth-2686097b/"
target="_blank"
><img src="./img/logo-linkedin.svg" alt="Logo LinkInd con enlace"
title:="https://www.linkedin.com/in/jose-luis-martinez-palmeth-2686097b/"></a
>
</picture>
</figure>
</footer>
<script src="./js/code.js"></script>
</body>
</html>