-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (110 loc) · 7.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santiago Vargas</title>
</head>
<body>
<header>
<img height="100" width="auto" src="https://scontent.fbog2-2.fna.fbcdn.net/v/t1.0-9/69301842_10205768965900809_1519360026878148608_o.jpg?_nc_cat=103&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeGssGEmW4aOaf0iCMs8cjp3AJPJ-YE-yzsAk8n5gT7LO8BGBwfbvPNE_3Fr76AC--8&_nc_ohc=qUD975HtZZIAX_dFpR4&_nc_ht=scontent.fbog2-2.fna&oh=b2fa0401db08e5f81c89c2017780a657&oe=603D9C1C" alt="Foto de perfil">
<h1>Santiago Vargas Vega </h1>
<nav>
<a href="#inicio">Inicio</a>
<a href="#sobreMi">Sobre mi</a>
<a href="#academia">Academia</a>
<a href="#sitios"> Intereses</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
<main>
<section class="inicio" id="inicio">
<h2>Bienvenido, soy Santiago!</h2>
<p>En esta pagina encontraras datos sobre mi vida fuera y dentro de la academia. </p>
</section>
<section class="sobreMi" id="sobreMi">
<h2> Sobre mí</h2>
<table>
<tr>
<th>Etapa</th>
<th>Descripción</th>
</tr>
<tr>
<td>Infancia</td>
<td>Nací en Yopal Casanare el 5 de Agosto del 2000. Tuve una infacía tranquila y llena de amor por mis padres y mi hermana la cual llego a mi vida cuando yo tenía 3 años.</td>
</tr>
<td>Adolescencia</td>
<td> En esta etapa inicia mi amor por la programación, empece buscando como hacer Keyloggers y luego aprediendo algo de HTML y CSS apartir de un libro. También estuve
en varios deportes como lo fue natación,patinaje y tenis. A los 17 años entro a la universidad de los Andes.</td>
</table>
</section>
<section class="academia" id="academia">
<h2>Vida academica</h2>
<ul>
<li> <em>Colegio:</em> Estudie en varios colegios a lo largo de mi vida academica basica e intermedía. Gran parte de mi infancía estuve el colegio Antonio Nariño. Luego en secundaría
estuve hasta decimo en el colegio Centro Social y luego termine en el Gimnasio de los Llanos el colegio. </li>
<li> <em>Universidad:</em> Entre a la universidad a los 17 años, Los Andes para mi siempre fue mi primera opción e ingeniería de sistemas para mi pregrado. Estoy en septimo
semestre y he visto algunas materías de ingeniería industrial. </li>
<li> <em>Estudios Extra:</em>Hice la mitad de un tecnico en contabilidad en el colegio y he hecho cursos en Udemy. Por ultimo soy estudiante activo en platzi y
<a href="https://platzi.com/p/santiagovargasvega/">aquí</a> puedes ver mi perfil.</li>
</ul>
</section>
<section class="sitios" id="sitios">
<section>
<h2>Sitios favoritos</h2>
<!-- Use span por que ya que no se puede usar CSS uso el truco del span que tiene el inline-block default y ya los videos uno debajo del otro se veo feo, pero se que no es semantico -->
<h3>Videos</h3>
<span>
<iframe width="auto" height="201" src="https://www.youtube.com/embed/jQ19FCO4MYA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="auto" height="201" src="https://www.youtube.com/embed/L7fh1JKEpN4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="auto" height="201" src="https://www.youtube.com/embed/2X-ZayiWAKo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="auto" height="201" src="https://www.youtube.com/embed/zrrs9LGIfyQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="auto" height="201" src="https://www.youtube.com/embed/H8N9JtPz6y4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="auto" height="201" src="https://www.youtube.com/embed/MaeRXppkzdA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</section>
<section>
<h3>Enlaces</h3>
<ul>
<li> <a href="https://coppermind.net/wiki/Cosmere">Cosmere - El mejor universo de fantasía en la literatura</a> </li>
<li> <a href="https://www.nytimes.com/">New York Times</a></li>
<li> <a href="https://stackoverflow.com/">Stacoverflow</a></li>
<li> <a href="https://steamcommunity.com/profiles/76561198929656750/"> Mi perfil de Steam</a></li>
<li> <a href="https://wol.gg/stats/lan/egirlbathwater69/">Tiempo perdido...</a> </li>
</ul>
</section>
<section>
<h3>Imagenes</h3>
<!-- Ya explique lo del span cierto? -->
<span>
<img src="https://w.wallhaven.cc/full/4y/wallhaven-4yvpjk.jpg" width="auto" height="300" alt="House Arryn">
<img src="https://w.wallhaven.cc/full/13/wallhaven-13m7xg.jpg" width="auto" height="300" alt="Dr.Strange">
<img src="https://w.wallhaven.cc/full/zm/wallhaven-zm219o.png" width="auto" height="300" alt="Kimetsu no Yaiba">
<img src="https://w.wallhaven.cc/full/47/wallhaven-47d7y9.jpg" style="object-fit: cover;" width="300" height="300" alt="computer">
</span>
</section>
</section>
<section class="contacto" id="contacto">
<h2>Contáctame </h2>
<form>
<label >Nombre</label>
<input type="text" placeholder="Juanito">
<label>Apellido</label>
<input type="text" placeholder="Perez">
<label>Correo</label>
<input type="email" placeholder="[email protected]">
<label >Motivo</label>
<input type="text" placeholder="Quiero contratarte" >
</form>
</section>
</main>
<footer>
<h2>Mis links</h2>
<span>
<a href="https://www.facebook.com/santiago.vargasvega"><img src="https://img.flaticon.com/icons/png/512/145/145802.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" width="100" height="auto" alt="facebook"></a>
<a href="https://www.linkedin.com/in/santiago-vargas-vega-7641a31b1/"><img width="100" height="auto" src="https://img.flaticon.com/icons/png/512/145/145807.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" alt="linkedin"></a>
<a href="https://github.com/SantiagoVargasVe"><img width="60" height="auto" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
</span>
</footer>
</body>
</html>