-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (215 loc) · 12.1 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en">
<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>Takuachitos</title>
<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=Open+Sans:wght@500&family=Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<nav class="barra">
<a href=""><img src="img/logo.png" alt=""></a>
<input type="checkbox" id="menu-checkbox">
<ul>
<li><a href="#" onclick="document.getElementById('menu-checkbox').checked = false;">Inicio</a></li>
<li><a href="#contenedor-sobre-nosotros" onclick="document.getElementById('menu-checkbox').checked = false;">Sobre nosotros</a></li>
<li><a href="#contenedor-equipo" onclick="document.getElementById('menu-checkbox').checked = false;">Equipo</a></li>
<li><a href="#contenedor-habilidades" onclick="document.getElementById('menu-checkbox').checked = false;">Habilidades</a></li>
<li><a href="#contenedor-contacto" onclick="document.getElementById('menu-checkbox').checked = false;">Contacto</a></li>
</ul>
<label for="menu-checkbox">
<img src="img/boton-menu.png" alt="">
</label>
</nav>
<header class="encabezado">
<div class="titulo">
<h1>Takuachitos <br> Team</h1>
</div>
<a href="">Saber mas</a>
</header>
<div class="acerca" id="contenedor-sobre-nosotros">
<div class="acercainfo">
<div class="ta">
<p>ACERCA DE</p>
<div class="tria">
</div>
</div>
<h2 class="sub_a">QUIENES SOMOS</h2>
<h2 class="sub_a2">El talento es un buen comienzo, pero es la práctica y la persistencia lo que realmente te lleva a la cima del éxito</h2>
<p class="info">Somos un grupo de estudiantes apasionados por la seguridad informática y el hacking ético. Participamos en diversas competencias de Capture The Flag a nivel nacional, poniendo en práctica nuestras habilidades y conocimientos en este emocionante campo. Únete a nosotros y descubre el mundo de la seguridad informática de la mano de los takuachitos.</p>
</div>
<div class="imagencerca">
<img src="img/ejemplo.png" alt="">
</div>
</div>
<div class="equipo" id="contenedor-equipo">
<div class="ta">
<p>EQUIPO</p>
<div class="tria">
</div>
</div>
<div class="d1">
<div class="imge">
<img src="img/ejemplo.png" alt="">
</div>
<div class="infoe">
<p class="cat">CRYPTO</p>
<h2 class="p1">Pedro Ortega</h2>
<p class="ip1">Soy Pedro Ortega, un estudiante de la UAZ que siente una gran pasión por la seguridad informática, especialmente en la categoría de criptografía en los CTF. Dedico gran parte de mi tiempo libre a investigar y practicar para mejorar mis habilidades en programación y análisis de sistemas. Me encanta trabajar en equipo y compartir conocimientos con otros apasionados por este tema. Mi mayor satisfacción es resolver desafíos complejos en competencias de CTF y seguir aprendiendo para convertirme en un experto en el área de la criptografía en los CTF.</p>
</div>
<div class="redes">
<a href=""><img class="lae" src="img/flogo.png" alt=""></a>
<a href=""><img class="lae" src="img/twlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/instlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/inlogo.png" alt=""></a>
</div>
</div>
<div class="d2">
<div class="imge2">
<img src="img/ejemplo.png" alt="">
</div>
<div class="infoe2">
<p class="cat">WEB/CRYPTO</p>
<h3 class="p1">Carlos López</h3>
<p class="ip1">Me llamo Carlos López, y como estudiante de la UAZ, tengo una gran pasión por la seguridad informática, especialmente en la categoría de web y criptografía en los CTF. Me gusta enfrentar nuevos desafíos porque me mantienen alerta y me obligan a ser creativo para encontrar soluciones. Disfruto especialmente trabajar en equipo y aprender de los demás.</p>
</div>
<div class="redes2">
<a href=""><img class="lae" src="img/flogo.png" alt=""></a>
<a href=""><img class="lae" src="img/twlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/instlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/inlogo.png" alt=""></a>
</div>
</div>
<div class="d1">
<div class="imge">
<img src="img/ejemplo.png" alt="">
</div>
<div class="infoe">
<p class="cat">REV/PWN</p>
<h3 class="p1">Everardo Ledezma</h3>
<p class="ip1">Soy Everardo Ledezma, estudiante de la UAZ y apasionado de los CTFs. Me encanta la categoría de rev y pwn porque me desafían a encontrar soluciones creativas y a superar obstáculos. Me gusta participar en competencias de CTFs y compartir mi conocimiento con otros. Además, disfruto de la programación y la seguridad informática en general. Siempre busco aprender más y estar al tanto de las últimas tendencias. Soy curioso y siempre en busca de nuevos retos y oportunidades para crecer en el mundo de la seguridad informática.</p>
</div>
<div class="redes">
<a href=""><img class="lae" src="img/flogo.png" alt=""></a>
<a href=""><img class="lae" src="img/twlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/instlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/inlogo.png" alt=""></a>
</div>
</div>
<div class="d2">
<div class="imge2">
<img src="img/ejemplo.png" alt="">
</div>
<div class="infoe2">
<p class="cat">WEB/CRYPTO</p>
<h3 class="p1">Fabian Martinez</h3>
<p class="ip1">Soy Fabián Martínez, estudiante de la UAZ y me interesa la seguridad informática, especialmente la categoría de web y crypto. Me especialicé en esta área en mi carrera universitaria porque siempre me ha llamado la atención. Me gusta investigar vulnerabilidades y encontrar soluciones creativas para resolver problemas en nuevos desafíos. Disfruto compartir mis conocimientos y aprender de otros estudiantes. En mi tiempo libre, practico habilidades de hacking ético en diferentes plataformas en línea. Estoy emocionado por las oportunidades que esta área ofrece para seguir aprendiendo y creciendo profesionalmente.</p>
</div>
<div class="redes2">
<a href=""><img class="lae" src="img/flogo.png" alt=""></a>
<a href=""><img class="lae" src="img/twlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/instlogo.png" alt=""></a>
<a href=""><img class="lae" src="img/inlogo.png" alt=""></a>
</div>
</div>
</div>
<div class="habilidades" id="contenedor-habilidades">
<div class="acercainfo">
<div class="ta">
<p>HABILIDADES</p>
<div class="tria">
</div>
</div>
<h4 class="sub_a">DESTREZA TÉCNICA</h4>
<h4 class="sub_a2">Consulta nuestras habilidades</h4>
<p class="info">Como equipo de CTF, trabajamos juntos para mejorar nuestras habilidades de hacking y seguridad informática a través de desafíos y competiciones. Nos enfocamos en aprender de nuestros errores y en compartir nuestros conocimientos para ayudarnos mutuamente a crecer como hackers éticos y a resolver problemas de seguridad informática de manera creativa y efectiva.</p>
</div>
<div class="infoha">
<div class="barras">
<div class="habilidad">
<h4 class="porcentaje">40%</h4>
<div class="dp">
<p class="tipo">PWN</p>
<div class="barrap">
<div class="progreso1"></div>
</div>
</div>
</div>
<div class="habilidad">
<h4 class="porcentaje">50%</h4>
<div class="dp">
<p class="tipo">REV</p>
<div class="barrap">
<div class="progreso2"></div>
</div>
</div>
</div>
<div class="habilidad">
<h4 class="porcentaje">60%</h4>
<div class="dp">
<p class="tipo">WEB</p>
<div class="barrap">
<div class="progreso3"></div>
</div>
</div>
</div>
<div class="habilidad">
<h4 class="porcentaje">30%</h4>
<div class="dp">
<p class="tipo">CRYPTO</p>
<div class="barrap">
<div class="progreso4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contacto" id="contenedor-contacto">
<div class="acercainfo">
<div class="ta">
<p>CONTACTO</p>
<div class="tria">
</div>
</div>
<h4 class="sub_a">CONTACTANOS</h4>
<h4 class="sub_ac2">Empezemos a aprender</h4>
<p class="info">¡Gracias por considerar contactarnos! Si tienes alguna pregunta, sugerencia, o simplemente quieres saludar, por favor no dudes en escribirnos. Estamos siempre dispuestos a recibir mensajes de nuestros seguidores y amigos de la comunidad CTF. Puedes contactarnos a través del siguiente formulario o directamente por correo electrónico. ¡Esperamos saber de ti pronto!</p>
<div class="redes3">
<a href=""><img class="lae2" src="img/flogo.png" alt=""></a>
<a href=""><img class="lae2" src="img/twlogo.png" alt=""></a>
<a href=""><img class="lae2" src="img/instlogo.png" alt=""></a>
<a href=""><img class="lae2" src="img/inlogo.png" alt=""></a>
</div>
</div>
<div class="formc">
<form action="">
<input class="entrada" type="text" placeholder="Nombre">
<br>
<input class="entrada" type="text" placeholder="Email">
<br>
<input class="entrada" type="text" placeholder="Asunto">
<br>
<textarea class="areat" name="" id="" cols="30" rows="10" placeholder="Mensaje"></textarea>
<br>
<a href="">ENVIAR</a>
</form>
</div>
</div>
<footer>
<a href="" class="logof"><img src="img/logo.png" alt=""></a>
<a class="correo" href="">[email protected]</a>
<div class="redes4">
<a href=""><img class="lae3" src="img/flogo.png" alt=""></a>
<a href=""><img class="lae3" src="img/twlogo.png" alt=""></a>
<a href=""><img class="lae3" src="img/instlogo.png" alt=""></a>
<a href=""><img class="lae3" src="img/inlogo.png" alt=""></a>
</div>
<p>© 2023 Takuachitos</p>
</footer>
</body>
</html>