-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
355 lines (316 loc) · 12.4 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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
<!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" />
<link rel="icon" href="./img/favicon.png" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/5a1c50331f.js" crossorigin="anonymous"></script>
<script defer src="./index.js"></script>
<title>Soy Mario y busco trabajo</title>
</head>
<body>
<!-- Navigation_section -->
<!--
Esta sección es el menú hamburguesa que aparecerá en dispositivos pequeños
-->
<div class="hamburger">
<div class="_layer -top"></div>
<div class="_layer -mid"></div>
<div class="_layer -bottom"></div>
</div>
<!--
Este es el menú principal, podeis cambiar o modificar las opciones a vuestro gusto
-->
<nav id='nav' class="navbar">
<a href="#home">Home</a>
<a href="#service">Sobre mí</a>
<a href="#experience">Experiencia</a>
<a href="#portfolio">Portfolio</a>
<a href="#news">Noticias</a>
<a href="#contact">Contacto</a>
</nav>
<!--Hero_Section-->
<section id="home" class="container--header bg-red">
<div class="container--header__left">
<!--
En esta sección puedes poner información sobre ti, el apartado <strong> lo puedes substituir por el nombre del personaje y el <p>
por una descripción y sobre lo que le gusta hacer, por ejemplo.
-->
<h2>
<strong>Soy Mario</strong>
</h2>
<p>
He seguido los pasos de mi padre como carpintero.
Siempre me he buscado la vida, en distintos trabajos, como camarero, doctor, fontanero.
Pero siempre he sentido que lo que de verdad me gustaba era luchar por las injusticias,
con una sonrisa y junto a mis amigos como Luigi, Yoshi.
Soy una persona ágil, proactiva, luchadora, con muchas ganas de crecer laboralmente.
Actualmente, busco estabilidad laboral y posibilidad de trabajo en remoto.
</p>
<div class="social__links--container">
<img id="clickMe" src="./img/facebook.png" alt="facebook" />
<img src="./img/twitter.png" alt="twitter" />
<img src="./img/instagram.png" alt="instagram" />
<img src="./img/linkedin.png" alt="linkedin" />
</div>
</div>
<div class="container--header__right">
<!--
Y aquí, por ejemplo, puedes modificar el path de la imagen para que sea la foto que quieras la que aparezca al lado del texto.
-->
<img alt="Mario Bros" src="img/mariobross.png" />
</div>
</section>
<!--About_me-->
<section id="service" class="about-me">
<h2>
<strong>Sobre mí</strong>
</h2>
<p>
Soy un hombre deportista, me encanta la naturaleza, mi especialidad es la sopa de tortuga, y en mi tiempo libre me
gusta colaborará en distintos voluntariados, como por ejemplo ayudar en la carroza el día del orgullo recogiendo
estrellas, ir a decorar huevos de pascua con los niños de preescolar, sacar animales de refugios a pasear
</p>
<div class="container-first">
<div class="container-first__left">
<!--
Esta sección la puedes completar con los objetivos del personaje. ¿Cómo quiere crecer como héroe?
-->
<h2>
<strong>Objetivos</strong>
</h2>
<p>
Quiero ser el mejor héroe, poledancer y para ello me he marcado distintos objetivos.
</p>
<ul class="about-us-list">
<li class="checks">
Llevar una vida saludable
</li>
<li class="checks">
Practicar mucho deporte y pruebas del estilo test de Cooper
</li>
<li class="checks">
También hacer distintas actividades sociales para mejorar mi comunicación e interactuar con gente.
</li>
<li class="checks">
Luchar contra las injusticias
</li>
</ul>
</div>
<div class="container-first__right">
<h2>
<strong>Habilidades</strong>
</h2>
<p>
Mis habilidades son ser muy amigo de mis amigos.
</p>
<!--
¿Cuántos conocimientos tiene? Puedes seguir esta lista con los skills o conocimientos para que aparezcan en el portfolio.
-->
<span><b>Hacerme grande</b></span>
<progress class="progress--bar" max="100" value="95"></progress>
<span><b>Lanzar bolas de fuego</b></span>
<progress class="progress--bar" max="100" value="25"></progress>
<span><b>Tengo facilidad para bajar por barras de acero</b></span>
<progress class="progress--bar" max="100" value="85"></progress>
<span><b>Valiente</b></span>
<progress class="progress--bar" max="100" value="100"></progress>
</div>
</div>
</section>
<!--Pipe-->
<!--
Personaliza los separadores.
-->
<section class="container--pipe">
<img src="./img/Pipe.gif" alt="Mario's Pipe" id="pipe" class="pipe">
<img src="/img//Mario.gif" alt="Mario himself!" id="marioBehindPipe" class="mario-behind-pipe">
</section>
<!--Experience-->
<section class="container-experience bg-red" id="experience">
<div>
<h2>
<strong>Experiencia</strong>
</h2>
<p>
Soy una persona polifacética, como podrán ver en mi curriculum
</p>
<!--
¿Qué experiencia tiene nuestro personaje? Expón los trabajos que ha tenido.
-->
<div class="container-experience--schema">
<div class="message-item message-inner">
<div class="message-inner">
<div class="message-head">
<div class="user-detail">
<h5>Justiciero autónomo</h5>
<div class="post-meta">
Octubre 20' - Enero 24'
</div>
</div>
</div>
<div>
Mi pasión es salvar a los demás, y poder ayudar a la sociedad.
Quiero conseguir una sociedad más justa y un mundo sin setas.
Durante mi trayectoria como autónomo he trabajado para distintos clientes, luchando contra un Donkey kong,
como carpintero inflintado y como fontanero inflitrado. para salvar con Peach
</div>
</div>
</div>
<div class="message-item message-inner">
<div class="message-inner">
<div class="message-head">
<div class="user-detail">
<h5> Fontanero</h5>
<div class="post-meta">
Mayo 15'- Octubre 20'
</div>
</div>
</div>
<div>
Estuve muchos años trabajando como fontanero, junto a mi padre Shigeru Miyamoto conocido como el fontanero
de oro
</div>
</div>
</div>
<div class="message-item message-inner">
<div class="message-inner">
<div class="message-head">
<div class="user-detail">
<h5>Camarero</h5>
<div class="post-meta">
Mayo 04'- Octubre 14'
</div>
</div>
</div>
<div>
Tengo experiencia sirviendo Cruzcampos, enfrente de la Giralda en el Bar Pepe.
</div>
</div>
</div>
<div class="message-item message-inner">
<div class="message-inner">
<div class="message-head">
<div class="user-detail">
<h5> Conductor de Karts </h5>
<div class="post-meta">
Mayo 01'- Octubre 04'
</div>
</div>
</div>
<div>
En 2001 estuve compitiendo en distintas carreras junto a mi gran amigo Yosi, quede primero en la mayoría y
gracias a ellos he mejorado mi disciplina deportiva
</div>
</div>
</div>
<!--
Si tiene más experiencia sigue el esquema del resto de ejemplos y añade mas campos a partir de este punto.
-->
</div>
</div>
</section>
<!-- Portfolio Wrapper -->
<!--
Añade videos de las experiencias que quieres que aparezcan en el portfolio.
-->
<section class="container-portfolio" id="portfolio">
<h2>
<strong>Portfolio</strong>
</h2>
<p>
Tengo más de 35 años de experiencia recorriendo mundos extraños, salvando princesas, compitiendo en carreras y
derrotando a malvados enemigos.
</p>
<div class="container-portfolio__post">
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dhrLoM6UqGI?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<figcaption>Me encantan las aventuras</figcaption>
</figure>
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rsTUqMHGnlg?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<figcaption>Mi paso del 2D al 3D</figcaption>
</figure>
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Jdue26wGE8M?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<figcaption>He derrotado infinitas veces a Bowser</figcaption>
</figure>
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/N_Hw_M5ENCQ?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<figcaption>He ganado varios mundiales automobilísticos</figcaption>
</figure>
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7rIkmpoaiWc?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<figcaption>También soy actor de cine</figcaption>
</figure>
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OrLEHNF8qTg" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<figcaption>Organizador de fiestas</figcaption>
</figure>
</div>
<!--
Añade más videos a partir de este punto si necesitas. Recuerda seguir la estructura de los anteriores.
Si es un video de Youtube recuerda poner el video con el link de "embed" no el de "watch" ej: https://www.youtube.com/embed/dQw4w9WgXcQ
-->
</section>
<!-- News Wrapper -->
<section id="news" class="bg-red container-news">
<h2>Mario News</h2>
<div id="marioNews" class="container-news__post"></div>
</section>
<!--Footer-->
<section id="contact" class="container-form">
<h2>
<strong>Get in touch</strong>
</h2>
<form class="contact-form">
<div class="form-field col x-50">
<input id="name" class="input-text js-input" type="text" required>
<label class="label" for="name">Name</label>
</div>
<div class="form-field col x-50">
<input id="email" class="input-text js-input" type="email" required>
<label class="label" for="email">E-mail</label>
</div>
<div class="form-field col x-100">
<input id="message" class="input-text js-input" type="text" required>
<label class="label" for="message">Message</label>
</div>
<button id="submit" class="submit-btn">
Submit
</button>
</form>
</section>
<footer>
<!--
Añade todo lo que quieras en el footer.
-->
<div class="copyright">© ASSEMBLER INSTITUTE OF TECHNOLOGY, <span id="copyright-year"></span></div>
</footer>
</body>
</html>