-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhtml5.html
326 lines (316 loc) · 11.7 KB
/
html5.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
<!--Declaramos el tipo de documento como html-->
<!DOCTYPE html>
<!--Y decimos que la página está en español-->
<html lang="es">
<!--Inicio del head-->
<head>
<!-- Decimos que el set de caracteres es utf-8, para que reconozca tildes, diélesis... -->
<meta charset="utf-8" />
<!--Evitamos que se pueda hacer zoom desde un celular o tablet-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--Título de la página-->
<title>Puls3: Comunidad online de gente pro y (no sé qué más escribir)</title>
<!--Insertando el Favicon(El ícono que va a la izquierda del <title>). No lo podrás ver con el "Open in Browser"-->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<!--Añadiendo el Normalize-->
<link rel="stylesheet" href="css/normalize.css" />
<!--Insertando la tipografía principal :D-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<!--Conectando con los estilos ( css )-->
<link rel="stylesheet" href="css/estilos.css" />
<!--Y ahora con los estilos para el responsive design ( css )-->
<link rel="stylesheet" href="css/responsive.css" />
<!--Fin del head-->
</head>
<!--inicio del body-->
<body>
<!--Aquí viene el header :o-->
<header>
<!--El logo-->
<figure id="logo">
<img src="img/logo.png" />
</figure>
<!--El título del header-->
<h1 id="titulo_header">Puls3: Comunidad de gente cool, atractiva y millonaria</h1>
<h1 id="titulo_header2">Puls3</h1>
<!--El campo para el login-->
<div id="login">
<aside>
<!--Un input para el nombre de usuario [ type: el tipo de entrada que recibirá;title: el tooltip que aparecerá cuando pases sobre él;placeholder: El texto que se mostrará hasta que comiences a escribir. ] -->
<input type="text" name="email" title="Nombre de Usuario" placeholder="Usuario" id="input1">
<!--Y otro input para la contraseña [Type:password mostrará todo lo que copies como un asterisco o un punto] -->
<input type="password" title="Contraseña" placeholder="Contraseña" id="input2">
<a href="#">
<div><a href="#" title="Iniciar sesión"></a></div>
</a>
</aside>
</div>
<!--El botón para ir al home-->
<a href="index.html" title="Home">
<div>
Home
</div>
</a>
<!--Fin del Header-->
</header>
<!--La barra de navegación-->
<nav>
<!--Y los diferentes botones en una lista desordenada ( Unordered List ) -->
<ul>
<!--Un item de la lista ( List Item ) -->
<li id="flechita_nav"><a href="#"></a></li>
<!--¿Ves la parte donde dice title="Python"?. Ese mensaje se mostrará cuando pases el cursor sobre el botón-->
<li><a href="python.html" title="Python">Python</a></li>
<!--¿Ves la parte donde dice href="html5.html"?. Allí irá cuando des click en el botón-->
<li><a href="html5.html" title="HTML5">HTML5</a></li>
<li><a href="javascript.html" title="Javascript">Javascript</a></li>
<li><a href="css3.html" title="CSS3">Css3</a></li>
<li><a href="django.html" title="Django">Django</a></li>
<li id="publicar_nav"><a href="publicar.html" title="Publicar">Publicar</a></li>
</ul>
</nav>
<!--El grupo que desaparecerá en móviles (De ahora lo llamaremos el "Supergrupo")-->
<div id="grupo">
<!--El registro y las notificaciones de actividad-->
<aside id="bienvenida">
<!--El botón e información de registro-->
<aside id="registro">
<h2 id="mensaje">Hola, ¡regístrate!</h2>
<p>Si no te registras, un pequeño reno montés se atascará con una rama en medio de un lúgubre paisaje Canadiense y probablemente morirá de depresión.D:</p>
<a id="b_registro" href="#" title="¡Regístrate!">Regístrate aquí</a>
<p id="mensaje_registro">Vamos... ¡Es gratis!</p>
</aside>
<!--La actividad-->
<aside id="actividad">
<!--Título de la actividad-->
<a id="b_actividad" href="#" title="Actividad">Actividad</a>
<!--La parte scrolleable-->
<div id="notificaciones"style="height:200px;width:100%;overflow-y:scroll;">
<!--Ahora las notificaciones :)-->
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</article>
<!--Y otras cuantas-->
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje"> Excepteur sint occaecat cupidatat non proident, sunt.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje"> Excepteur sint occaecat cupidatat non proident, sunt.</p>
</article>
<article class="notificacion">
<a class="comentarios_item" href="#">3141</a>
<p id ="actividad_mensaje">exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</article>
</div>
</aside>
</aside>
<aside id="contenido">
<!--Los artículos que sólo ocupan el 70% de la página-->
<aside id="70_ancho">
<!--Inicio del artículo-->
<article class="primer_item">
<!--imagen del artículo-->
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<!--Título del artículo-->
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<!--Autor del artículo-->
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<!--Varios datos del artículo-->
<p class="datos_item">
<!--Las etiquetas del artículo-->
<a class="tag_item resaltar" href="Html5.html" >Html5</a>
<a class="tag_item" href="css3.html">Css3</a>
<!--Fecha de creación del artículo-->
<span class="fecha_item">Hace <strong>5</strong> min</span>
<!--Enlace a los comentarios del artículo-->
<a class="comentarios_item" href="#">455</a>
<!--Añadir a favoritos el artículo-->
<a class="guardar_item" href="#"></a>
</p>
<!--Votar el artículo-->
<p class="votacion">
<!--Positivamente-->
<a class="up" href="#"></a>
<!--Puntos del artículo-->
3141
<!--Negativamente-->
<a class="down" href="#"></a>
</p>
<!--Fin del artículo-->
</article>
<article class="primer_item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<p class="datos_item">
<a class="tag_item resaltar" href="Html5.html" >Html5</a>
<a class="tag_item" href="Python.html">Python</a>
<a class="tag_item" href="Django.html">Django</a>
<span class="fecha_item">Hace <strong>5</strong> min</span>
<a class="comentarios_item" href="#">455</a>
<a class="guardar_item" href="#"></a>
</p>
<p class="votacion">
<a class="up" href="#"></a>
3141
<a class="down" href="#"></a>
</p>
</article>
<article class="primer_item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<p class="datos_item">
<a class="tag_item" href="Django.html">Django</a>
<a class="tag_item resaltar" href="Html5.html">Html5</a>
<span class="fecha_item">Hace <strong>5</strong> min</span>
<a class="comentarios_item" href="#">455</a>
<a class="guardar_item" href="#"></a>
</p>
<p class="votacion">
<a class="up" href="#"></a>
3141
<a class="down" href="#"></a>
</p>
</article>
</aside>
</aside>
<!--Fin del supergrupo-->
</div>
<!--Los artículos o noticias que ocupan el 100%-->
<section id="contenido_100">
<aside id="100_ancho">
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<p class="datos_item">
<a class="tag_item resaltar" href="Html5.html">Html5</a>
<a class="tag_item" href="python.html">Python</a>
<span class="fecha_item">Hace <strong>5</strong> min</span>
<a class="comentarios_item" href="#">455</a>
<a class="guardar_item" href="#"></a>
</p>
<p class="votacion">
<a class="up" href="#"></a>
3141
<a class="down" href="#"></a>
</p>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<p class="datos_item">
<a class="tag_item" href="css3.html">Css3</a>
<a class="tag_item resaltar" href="Html5.html">Html5</a>
<a class="tag_item" href="python.html">Python</a>
<span class="fecha_item">Hace <strong>5</strong> min</span>
<a class="comentarios_item" href="#">455</a>
<a class="guardar_item" href="#"></a>
</p>
<p class="votacion">
<a class="up" href="#"></a>
3141
<a class="down" href="#"></a>
</p>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<p class="datos_item">
<a class="tag_item resaltar" href="Html5.html">Html5</a>
<span class="fecha_item">Hace <strong>5</strong> min</span>
<a class="comentarios_item" href="#">455</a>
<a class="guardar_item" href="#"></a>
</p>
<p class="votacion">
<a class="up" href="#"></a>
3141
<a class="down" href="#"></a>
</p>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="articulo.html">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<p class="autor_item">
Por <a href="#">Por <a href="usuario.html"> Vega</a>
</p>
<p class="datos_item">
<a class="tag_item resaltar" href="Html5.html">Html5</a>
<span class="fecha_item">Hace <strong>5</strong> min</span>
<a class="comentarios_item" href="#" title="Comentarios">455</a>
<a class="guardar_item" href="#"></a>
</p>
<p class="votacion">
<a class="up" href="#" title="Votar positivo"></a>
3141
<a class="down" href="#" title="Votar negativo"></a>
</p>
</article>
</aside>
<!--Fin de los Enlaces a los artículos-->
</section>
<!--El pie de página-->
<footer>
<!--Un párrafo en negrita ( strong ) -->
<p><strong>Powered by Platzi!</strong></p>
<p>Mejorando.la 2013 ®</p>
</footer>
<!--Fin del cuerpo de la página-->
</body>
<!--Fin del Html-->
</html>
<!--Y ya está toda la estructura de la página =D-->