-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_v2.html
205 lines (196 loc) · 10.9 KB
/
index_v2.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
<!DOCTYPE html>
<html>
<head>
<title>Nicbuitr's Site</title>
<link rel="icon" type="image/png" href="./favicon.ico">
<!-- Start of Bootstrap Libraries -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- End of Bootstrap Libraries -->
<!-- Google Fonts Library -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Start of Custom Styles and Scripts -->
<link rel="stylesheet" href="style.css">
<script src="./js/index.js"></script>
<!-- End of Custom Styles and Scripts -->
</head>
<body class="body">
<!-- Navigation -->
<nav class="navbar-custom navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-item navbar-brand" href="#">
<span class="glyphicon glyphicon-arrow-up"></span>
TOP
<span class="glyphicon glyphicon-arrow-up"></span>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a class="navbar-item" href="./index.html">
<span class="glyphicon glyphicon-home"></span>
Home
</a>
</li>
<li>
<a class="navbar-item" href="#acerca">
<span class="glyphicon glyphicon-user"></span>
Acerca
</a>
</li>
<li>
<a class="navbar-item" href="#links">
<span class="glyphicon glyphicon-link"></span>
Links de Interés
</a>
</li>
<li>
<a class="navbar-item" href="#social">
<span class="glyphicon glyphicon-glass"></span>
Social
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-item" href="mailto:[email protected]"><span class="glyphicon glyphicon-envelope"></span> E-Mail</a></li>
<li><a class="navbar-item" onclick="turnOnOff()" id="OnOff"><span class="glyphicon glyphicon-off"></span> On/Off</a></li>
</ul>
</div>
</div>
</nav>
<div id="WebSiteContent">
<header class="container header">
<img src="./img/klostrag_work.png" alt="Imagen de Nicolás" class="profile-pic">
<h2 class="name">Nicolás Buitrago Castaño</h2>
<h4>(@nicbuitr)</h4>
<h4>Estudiante de Ingeniería de Sistemas y Computación</h4>
</header>
<section class="jumbotron content-section" id="acerca">
<div class="container">
<div class="row">
<h2>
<span class="glyphicon glyphicon-user"></span>
Acerca de Mi
<span class="glyphicon glyphicon-user"></span>
</h2>
</div>
<div class="row content">
<p>
Nací en Armenia, Quindío el 18 de mayo de 1989 pero me crié en Bogotá desde el primer año. Actualmente mi propósito es terminar la carrera para continuar con mi proyecto de vida.
En ésta ciudad tan caótica, mi medio preferido de transporte es la motocicleta ya que ella permite evadir la mayoría de los largos y lentos trancones permanentes que ocurren en la capital mientras gran parte de sus habitantes intentan llegar por los medios posibles a sus lugares de trabajo, estudio, ocio u hogar.
</p>
<div align="center" class="container">
<img class="img-responsive" src="https://scontent.fbog2-2.fna.fbcdn.net/v/t1.0-9/10420317_10153332400425843_720452431580082721_n.jpg?oh=88f175ce386a97d2388b2416e1c16802&oe=5936269D" alt="Motorcycle Riding">
<h6>© Imagen Nicolás Camino al Trabajo</h6>
</div>
<p>
También hay días en que no hay casi tráfico y se puede disfrutar de un viaje tranquilo, apreciando el paisaje y manejando con calma.
</p>
<div class="container">
<iframe class="vid-responsive" width="560" height="315" src="https://www.youtube.com/embed/SbKUhjT64uY?ecver=1" frameborder="0" allowfullscreen></iframe>
<h6>© Vídeo Nicolás Camino al Trabajo Sin Tráfico</h6>
</div>
<p>
Sin embargo el común de esta gran ciudad es el tráfico congestionado y lento debido al flujo masivo de personas que sigue aumentando exponencialmente. A raíz de esto, los conductores de motocicleta nos vemos obligados a maniobrar entre los carros, no solo para nosotros poder avanzar, sino para agilizar el tráfico, ya que si todas las motos ocuparan su propio carríl al igual que un carro, como es debido, los trancones serían monumentales.
</p>
<div class="container">
<iframe class="vid-responsive" width="560" height="315" src="https://www.youtube.com/embed/D5ipmqOCtGU?ecver=1" frameborder="0" allowfullscreen></iframe>
<h6>© Vídeo Nicolás Camino al Trabajo Maniobrando en el Tráfico</h6>
</div>
<p>
En ocasiones la adrenalina se hace presente en las situaciones riesgosas en las que es necesario maniobrar con destreza para evitar un choque, por esto es indispensable siempre manejar con mucha prudencia y a la defensiva intentando anticipar todos los movimientos de los vehículos que se están desplazando cerca, pues puede pasar que de repente frenen en seco...
</p>
<div class="container">
<iframe class="vid-responsive" width="560" height="315" src="https://www.youtube.com/embed/oc1TDwaRMWA" frameborder="0" allowfullscreen></iframe>
<h6>© Vídeo Nicolás Camino al Trabajo Frenado en Seco</h6>
</div>
<p>
Después de tanta tensión a causa del desplazamiento constante a lo largo de la semana junto con el estrés de otras muchas obligaciones, mi modo favorito de relajar la mente es reunirme el fin de semana con la banda para divertirnos cabeceando al ritmo de la música.
</p>
<div align="center" class="container">
<blockquote class="instagram-media" data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:28.125% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/BQih3xKAVjB/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Nicolas Buitrago Castaño (@klostrag)</a> on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-02-15T16:48:42+00:00">Feb 15, 2017 at 8:48am PST</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
<h6>© Vídeo Nicolás Tocando con la Banda</h6>
</div>
</div>
</div>
</section>
<section class="container separator"></section>
<section class="jumbotron content-section" id="links">
<div class="container">
<div class="row">
<h2>
<span class="glyphicon glyphicon-link"></span>
Links de Interés
<span class="glyphicon glyphicon-link"></span>
</h2>
</div>
<div class="row content">
<div class="col-sm-6 col-item">
<ul align="left">
<h4 class="header-links" id="links">Links del curso:</h4>
<li>
<a href="http://johnguerra.co" target="_blank">Website del Profesor John Guerra </a>
</li>
<li>
Twitter <a href="http://bit.ly/2kJl1ia" target="_blank">#WebDev @Uniandes</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-item">
<ol align="left">
<h4 class="header-links">Links Proyectos:</h4>
<li>
<a href="./index.html">WebSite V1 </a>
</li>
<li>
<a href="./bootstrap.html">Bootstrap </a>
</li>
</ol>
</div>
</div>
</div>
</section>
<section class="container separator"></section>
<section class="jumbotron content-section" id="social">
<div class="container">
<div class="row">
<h2>
<span class="glyphicon glyphicon-glass"></span>
Social
<span class="glyphicon glyphicon-glass"></span>
</h2>
</div>
<div class="row content">
<div class="col-xs-4 col-item">
<a href="https://github.com/nicbuitr" target="_blank">
<img src="./img/GitHubIco.png" alt="GitHub Icon">
</a>
</div>
<div class="col-xs-4 col-item">
<a href="https://twitter.com/nicbuitr" target="_blank">
<img src="./img/TwitterIco.png" height="32px" alt="Twitter Icon">
</a>
</div>
<div class="col-xs-4 col-item">
<a href="https://web-dev-uniandes.slack.com/messages/@nicbuitr/" target="_blank">
<img src="./img/SlackIco.png" height="32px" alt="Slack Icon">
</a>
</div>
</div>
</div>
</section>
<footer class="container footer">
<div class="row">
<p>© 2017 Nicolás Buitrago C</p>
</div>
</footer>
</div>
</body>
</html>