-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
372 lines (344 loc) · 16.9 KB
/
home.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
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="assets/img/favicon.ico">
<title>Aprende bootstrap y 3 CodeIgniter</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- FontAwesom Icons -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome/css/font-awesome.min.css">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Graduate|Pacifico' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <!-- navbar-toggle -->
<a class="navbar-brand" href="">
<img src="assets/img/logo.png" alt="Aprende Bootstrap 3 & Codeigniter">
</a>
</div> <!-- .navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="" data-toggle="modal" data-target="#modallogin">Accede</a></li>
<li><a href="" data-toggle="modal" data-target="#modalSignup">Registrate</a></li>
</ul>
</div> <!-- .collapse -->
</div> <!-- .container -->
</nav> <!-- .navbar -->
</header>
<!-- END HEADER -->
<!-- TITLE & ENROLL -->
<section id="title-enroll">
<div class="jumbotron">
<div class="container-fluid">
<h1>Aprende Bootstrap 3 y Codeigniter</h1>
<p>Aprende paso a paso a crear tus aplicaciones propias <strong>
Aplication web </strong> y convierte en un <strong> Ninja developer </strong> </p>
<p>
<a class="btn btn-primary btn-lg" href="" data-toggle="modal" data-target="#modalSignup">Incribite ahora »</a>
</p>
</div> <!-- -container-fuid indica que va a ocupar toda la pantalla -->
</div> <!-- .jumbotron es una clase bootstratp que maginifica lo que está dentro -->
</section> <!-- #title-enroll -->
<!-- WHAT WILL YOU LEARN -->
<section id="what-learn" class="wrap">
<div class="container">
<h
prender</h2>
<p class="lead">
A lo largo de este curso, Aprenderás a Programar una Aplicación Web increíble. Concretamente, <strong>¡vas a crear la aplicación que estás viendo!</strong> En ella podrás mostrar un <strong>Curso Online</strong> y ofrecerlo a usuarios que se registren en tu aplicación. Además, al acabar el curso tendrás la base de conocimiento suficiente para poder <strong>crear tus propias Aplicaciones Web. </strong>
</p>
<div class="row">
<div class="col-xs-12 col-sm-4" >
<img src="assets/img/learn-1.png" class="img-circle">
<h3>Bootstrap 3</h3>
<p>Gracias a Bootstrap 3 aprenderás a crear diseños modernos y profesionales usando HTML5, CSS3 y Javascript.</p>
</div>
<div class="col-xs-12 col-sm-4">
<img src="assets/img/learn-2.png" class="img-circle">
<h3>CodeIgniter</h3>
<p>Aprenderás a manejar uno de los Framework de PHP más rápido y popular, basado en el patrón
<em>Model-View-Controller</em></p>
</div><div class="col-xs-12 col-sm-4">
<img src="assets/img/learn-3.png" class="img-circle">
<h3>Ofrece valor</h3>
<p>Tendrás una plataforma propia para promocionar tu propio curso y así conseguir suscriptores.</p>
</div>
</div>
</div> <!-- .container -->
</section>
<!-- END WHAT WILL YOU LEARN -->
<!-- COURSE TARGET -->
<section class="wrap" id="course-target">
<div class="container-fluid">
<div class="header-section">
<img class="img-circle" alt="" src="assets/img/who.png">
<h2>¿Quién debería tomar este curso?</h2>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h3>Emprendedores</h3>
<p class="lead">Si eres emprendedor/a sabrás que tener presencia en Internet es algo obligatorio. Si además tu negocio es de tipo <em>online</em> necesitarás desarrollar una Aplicación Web de calidad para destacar sobre tus competidores.</p>
<p class="lead">El problema viene cuando hablamos de dinero, emprender no suele dar beneficios en sus primeras etapas y contratar a un tercero para que nos desarrolle la aplicación suele salir caro.</p>
<p class="lead">En tu día a día <strong>estás acostumbrado a superar retos de todo tipo</strong> y aprender a desarrollar Aplicaciones Web es un reto que vale la pena afrontar y así <strong>ahorrarte miles de euros</strong> en tu camino hacia el éxito.</p>
</div><!-- .col -->
</div> <!-- .row -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h3>Empleados</h3>
<p class="lead">Si estás trabajando para una empresa, aprender a programar Aplicaciones Web es un <em>skill</em> que te permitirá <strong>optar a una mejor posición y por tanto a un mejor salario</strong>.</p>
</div><!-- .col -->
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h3>Personas que buscan reinventarse</h3>
<p class="lead">Nos encontramos en una situación en la que muchas personas no consiguen encontrar trabajo sobre aquello en lo que se han formado o sólo encuentran empleo de poca calidad.</p>
<p class="lead">No es ninguna novedad que <strong>aprender a programar aumentará considerablemente tus posibilidades de conseguir trabajo</strong>.</p>
</div><!-- .col -->
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h3>Profesionales <em>freelance</em></h3>
<p class="lead">Si trabajas por cuenta propia, se cual sea tu especialización, seguro que aprender a programar Aplicaciones Web te ayudará a <strong>ganarte un sobresueldo</strong> y te permitirá ofrecer un nuevo tipo de servicio.</p>
</div><!-- .col -->
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h3>Desarrolladores</h3>
<p class="lead">Si ya tienes la suerte de saber programar. Aprender a hacerlo con Bootstrap 3 (HTML5, CSS3, Javascript, jQuery) y CodeIgniter (PHP, MySQL, APIs) no es algo que vaya a suponerte mucho tiempo ni esfuerzo, pero te permitirá <strong>añadir dos Lenguajes de Programación a tu currículum</strong>.</p>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</section>
<!-- END COURSE TARGET -->
<!-- COURSE FEATURES -->
<section class="wrap" id="course-features">
<div class="container">
<div class="header-section">
<img src="assets/img/features.png" class="img-circle" alt="">
<h2 >Caráteristicas del curso</h2>
</div>
<div class="row">
<div class="col-sm-3">
<i class="fa fa-video-camera fa-2x">
<h4>Acceso de por vida a más de 30 lecciones.</h4>
</i>
</div>
<div class="row">
<div class="col-sm-3">
<i class="fa fa-clock-o fa-2x">
<h4>Más de 10 horas de contenido.</h4>
</i>
</div>
<div class="row">
<div class="col-sm-3">
<i class="fa fa-graduation-cap fa-2x">
<h4>Contacto directo con el instructor.</h4>
</i>
</div>
<div class="row">
<div class="col-sm-3">
<i class="fa fa-mobile fa-2x">
<h4>Contenido accesible desde cualquier dispositivo.</h4>
</i>
</div>
</div> <!-- .row -->
</div>
</section>
<!-- END COURSE FEATURES -->
<!-- INSTRUCTOR -->
<section class="wrap" id="instructor">
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-offset-1">
<h2>Tu instructor</h2>
<div class="row">
<div class="col-sm-4" class="left-side">
<img class="img-circle" src="assets/img/instructor.png" alt="Foto del instructor">
<p><h4>David Perálvarez</h4></p>
<p>
<a href="https://www.twitter.com/DavidPeralvarez"
target="_blank"
class="badge social twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/DavidPeralvarez"
target="_blank"
class="badge social linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://www.DavidPeralvarez.com"
target="_blank"
class="badge social blog">
<i class="fa fa-globe"></i>
</a>
</p>
</div>
<div class="col-sm-8">
<p class="lead">
Soy David Perálvarez Fernández, nacido en septiembre de 1988 en la ciudad de Sabadell (Barcelona) donde vivo felizmente junto mi pareja Berta. Soy Ingeniero Técnico en Informática de Sistemas y Master in Computer Vision and Artificial Intelligence, ambas por la Universidad Autónoma de Barcelona.
</p>
<p class="lead">
Desde 2011 he estado participando en la creación de varios proyectos en Internet, especializándome en primer lugar como Desarrollador Web backend, posteriormente frontend y en la actualidad formándome como Desarrollador iOS.
</p>
<p class="lead">
Gracias a todo lo aprendido, actualmente combino mi jornada como Desarrollador freelance, como Instructor en Udemy y como Profesor Conferenciante en la UAO. En mis ratos libres soy adicto a aprender nuevas cosas, sobretodo temas relacionados con la programación.
</p>
<p class="lead">
Me encanta todo lo relacionado con Lean Startup, el Consumo Colaborativo, El Padrino (libros y películas), los maquis de salmón y los perros.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- END INSTRUCTOR -->
<!-- PROMOCIONAL VIDEO -->
<section class="wrap" id="promo-video">
<div class="container">
<div class="header-section">
<h2>Mira el video de presentación</h2>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/w6fLubIJHs8" frameborder="0" allowfullscreen></iframe>
</div>
</div><!-- .col -->
</div>
</div>
</div>
</div> <!-- .container -->
</section>
<!-- END PROMOCIONAL VIDEO -->
<!-- CALL TO ACTION -->
<section class="wrap" id=cta>
<div class="container">
<div class="row">
<div class="col-sm-7" ="col-sm-7">
<p class="lead">
Deja de poner excusas y <strong> lleva tu Aprendizaje a un nuevo nivel</strong>
</p>
</div>
<div class="col-sm-5">
<a href="" class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#modalSignup">
Quiero inscribirme!!!
</a>
</div>
</div> <!-- .row -->
</div> <!-- .container -->
</section>
<!-- END CALL TO ACTION -->
<!-- FOOTER -->
<footer id="footer">
<div class="container-fluid">
<p>
BootIngniter - Aprende Booststrap 3 y CodeIgniter © 2015 |
Made with <i class="fa fa-heart"></i> by <a href="http://davizparalvarez.com">
David Perálvarez
</a>
</p>
</div> <!-- .containter-fluid -->
</footer>
<!-- HIDDEN LOGIN MODAL -->
<div class="modal fase" id="modallogin">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="moda-header">
<!-- Asignamos el foton de fb -->
<a href="" class="btn btn-primary btn-block" role="button">
<i class="fa fa-facebookk">
Inicia sesión por Facebook
</i>
</a>
</div>
<div class="modal-body">
<p>o bien</p>
<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Escribe tu email..." ="">
</div>
<div class="form-group">
<label for="inputPassword">Contraseña</label>
<input type="password" class="form-control" id="inputPassword"
placeholder="Escribe tu contraseña...">
</div>
<button type="submit" class="btn btn-success btn-block">Iniciar sesión</button>
</form>
</div>
<div class="modal-footer">
<p><a href="">Has olvidado la contraseña?</a></p>
</div>
</div> <!-- .modal-content -->
</div> <!-- .modal-dialog -->
</div> <!-- .modal -->
<!-- END HIDDEN LOGIN MODAL -->
<!-- HIDDEN SINGUP MODAL -->
<div class="modal fade" id="modalSignup">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<a href="" class="btn btn-primary btn-block" role="button">
<i class="fa fa-facebook">Registrate con Facebook</i>
</a>
</div>
<div class="modal-body">
<p>o bien</p>
<form>
<div class="form-group">
<label for="inputName">Nombre de usuario</label>
<input type="text" class="form-control" id="iputName" placeholder="Escriba el nombre de usuario">
</div>
<div class="form-group">
<label for="iputEmailSignup">Email</label>
<input type="email" id="inputEmailSignup" class="form-contro" placeholder="Escribe tu email..">
</div>
<div class="form-group">
<label for="inputPasswordSignup">Contraseña</label>
<input type="password" class="form-control" id="inputPasswordSignup" placeholder="Elige contraseña">
</div>
<div class="form-group">
<label for="inputPasswordSignupR">Confirma tu contraseña</label>
<input type="password" class="forn-control" id="inputPasswordSignupR" placeholder="Escribe de nuevo tu contraseña">
</div>
<button type="submit" class="btn btn-success bnt-block">Registráte</button>
</form>
</form>
</div>
<div class="modal-footer">
<p>Al registrarme <a href="">Acepto los Términos de Uso</a> y
la <a href="">Política de Privacidad</a></p>
</div>
</div>
</div> <!-- .modal-dialog -->
</div> <!-- .modal -->
<!-- HIDDEN SINGUP MODAL -->
</footer>
<!-- END FOOTER -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>