This repository has been archived by the owner on Nov 11, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
176 lines (170 loc) · 10.8 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
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="stylesheets/style.css" rel="stylesheet">
<!-- 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>
<a name="start"></a>
<div class="container-fluid">
<!--row 1: iconos de redes sociales de tablet (sm)-->
<div class="row row1">
<div class="col-sm-10 col-sm-offset-1">
<ul class="tabletSocialIcons list-inline text-center">
<li><a href=""><img src="images/facebook2.png" alt="" class="img-rounded"></a></li>
<li><a href=""><img src="images/twitter2.png" alt="" class="img-rounded"></a></li>
<li><a href=""><img src="images/instagram2.png" alt="" class="img-rounded"></a></li>
</ul>
</div>
</div>
<!-- row 2: logo, y para desktop incluye nav e íconos sociales-->
<div class="row row2">
<div class="col-xs-12 col-md-3 text-center">
<img src="images/logo2.png" alt="">
</div>
<div class="col-md-9 desktopNav">
<ul class="list-inline text-right">
<li><a href="">Conoce más</a></li>
<li><a href="" class="suscribeModal">Suscríbete</a></li>
<li><a href=""><img src="images/facebook2.png" alt="" class="img-rounded"></a></li>
<li><a href=""><img src="images/twitter2.png" alt="" class="img-rounded"></a></li>
<li><a href=""><img src="images/instagram2.png" alt="" class="img-rounded"></a></li>
</ul>
</div>
</div>
<!-- row 3: navegación para tablet (sm) y móvil(xs), filtro, contenido del blog -->
<div class="row row3">
<!-- sub-row 1: filtro. Para móvil y tablet: navegación -->
<div class="col-xs-12 col-md-3">
<div class="row subRow">
<!-- Filtro -->
<div class="col-xs-12">
<h2 class="desktopfilter">Navega por temas</h2>
<ul class="nav nav-pills nav-stacked desktopfilter">
<li role="presentation" class="active"><a href="#">Trabajos</a></li>
<li role="presentation"><a href="#">Noticias</a></li>
<li role="presentation"><a href="#">Novedades</a></li>
<li role="presentation"><a href="#">Premios</a></li>
</ul>
<!-- Navegación para tablet y móvil -->
<ul class="subRowNav list-inline text-center">
<li>
<div class="dropdown mobileFilter">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Navega por temas <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Trabajos</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Noticias</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Novedades</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Temas</a></li>
</ul>
</div>
</li>
<!-- Navegación móvil -->
<li class="mobileNav"><a href="#footer" class="btn btn-default">Menú <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></a></li>
<!-- Navegación tablet -->
<li class="tabletNav"><a href="" class="btn btn-default">Conoce más</a></li>
<li class="tabletNav"><a href="" class="btn btn-default suscribeModal">Suscríbete</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-0">
<h1><a href="single.html">La primera promoción sale adelante:</a></h1>
<small>Un artículo sobre <a href="" class=" subLink linkTheme">Emprendimiento</a>
por <a href="" class="subLink linkAuthor">Pedro Sifuentes</a>
el 01/01/2014</small>
<a href=""><img src="images/chicas.jpg" class="img-responsive" alt=""></a>
<p class="excerpt">Este es un resumen del post. Aquí se cuenta brevemente de qué trata esta historia tan linda. Escribimos un párrafo que te úbica ne la historia y ya luego si quieres puedes leer más al respecto.</p>
<p><a href="single.html" class="readMore">Leer más</a></p>
</div>
</div>
<div class="row morePosts">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
<h1><a href="single.html">La primera promoción sale adelante:</a></h1>
<small class=" datos categoria">un artículo sobre <a href="" class=" subLink linkTheme">Emprendimiento</a></small>
<small class="datos autor"> por <a href="" class="subLink linkAuthor">Pedro Sifuentes</a></small>
<small class="datos fecha"> el 01/01/2014</small>
<a href=""><img src="images/chicas.jpg" class="img-responsive" alt=""></a>
<p class="excerpt">Este es un resumen del post. Aquí se cuenta brevemente de qué trata esta historia tan linda. Escribimos un párrafo que te úbica ne la historia y ya luego si quieres puedes leer más al respecto.</p>
<p><a href="single.html" class="readMore">Leer más</a></p>
</div>
</div>
<div class="row morePosts">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
<h1><a href="single.html">La primera promoción sale adelante:</a></h1>
<small class=" datos categoria">un artículo sobre <a href="" class=" subLink linkTheme">Emprendimiento</a></small>
<small class="datos autor"> por <a href="" class="subLink linkAuthor">Pedro Sifuentes</a></small>
<small class="datos fecha"> el 01/01/2014</small>
<a href=""><img src="images/chicas.jpg" class="img-responsive" alt=""></a>
<p class="excerpt">Este es un resumen del post. Aquí se cuenta brevemente de qué trata esta historia tan linda. Escribimos un párrafo que te úbica ne la historia y ya luego si quieres puedes leer más al respecto.</p>
<p><a href="single.html" class="readMore">Leer más</a></p>
</div>
</div>
</div>
<div class="container-fluid footer">
<a name="footer"></a>
<div class="row">
<div class="col-xs-12 col-md-2">
<a type="button" class="btn btn-link upButton" href="#start">Regresar al inicio <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-5">
<a type="button" class="btn btn-primary btn-lg footerBoton">Conoce más</a>
<p><laboratoria> impulsa a mujeres a salir adelante enseñándoles programación y desarrollo para un mundo global y competitivo.</p>
<p class="mobileFooterText">Nuestro propósito y misión</p>
</div>
<div class="col-xs-6 col-md-5">
<a type="button" class="btn btn-primary btn-lg footerBoton suscribeModal">Suscríbete</a>
<p>Cada mes enviamos las historias que más nos inspiraron suscríbete a este correo. Sé feliz.</p>
<p class="mobileFooterText">Mantente al tanto de lo que hacemos</p>
</div>
<div class="col-xs-12 col-md-2">
<ul class="footerSocialIcons list-inline">
<li class="text-left"><img src="images/facebook2.png" alt="" class="img-rounded"></li>
<li class="text-center"><img src="images/twitter2.png" alt="" class="img-rounded"></li>
<li class="text-right"><img src="images/instagram2.png" alt="" class="img-rounded"></li>
</ul>
</div>
</div>
</div>
<div id="overlay">
<div class="form-group">
<h1>Suscríbete</h1>
<p>Envíamos un mail mensual con los últimos logros y novedades de laboratoria. Tu bandeja de correo está a salvo con nosotros.</p>
<form>
<label for="email" class="control-label">Nombre</label>
<input type="text" class="form-control" id="email">
<label for="recipient-name" class="control-label">Email</label>
<input type="text" class="form-control" id="recipient-name">
<ul class="nav-justified text-center">
<li><button type="button" class="btn btn-primary btn-lg">Suscribirse</button></li>
<li><button type="button" id="close" class="btn btn-default btn-link" data-dismiss="modal">Cerrar</button></li>
</ul>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Custom Modal -->
<script src="javascripts/bootstrap/customModal.js"></script>
<!-- Button -->
<script src="javascripts/bootstrap/button.js"></script>
<!-- Dropdown -->
<script src="javascripts/bootstrap/dropdown.js"></script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-54aa93fd40c1c81c" async="async"></script>
</body>
</html>