-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (110 loc) · 6.17 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reto#3</title>
<!--Importa la Fuente de Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Importa materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Haz saberle al navegador que la página está optimizada para móviles-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class="indigo lighten-4">
<div><h1 class="center-align">CoreUpgrade Reto#3</h1></div>
<div class="row">
<div class="collection col s12 m3">
<!-- Panel de navegacion -->
<a class="collection-item active">Inicio</a>
<a class="collection-item">Perfil</a>
<a class="collection-item">Calendario</a>
<a class="collection-item">Ayuda</a>
</div>
<div class="card col s12 m9 grey lighten-4">
<!-- Contenedor de Articulos -->
<!-- Articulo 1 -->
<article class="grey lighten-3">
<div class="left-align">
<h5><b>Primer articulo</b></h5>
<time datetime="23-02-18">23-02-18</time>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Tags -->
<div class="chip green lighten-3">Tecnologia</div>
<div class="chip brown lighten-3">Ciencia</div>
<div class="chip green lighten-3">Programacion</div>
<!-- Comentario(s) -->
<div class="grey lighten-2">
<div class="valign-wrapper">
<time datetime="04-02-2018">04/02/18</time>
<p>: Comentario #1 sobre el articulo</p>
</div>
</div>
<!-- Añadir Comentario -->
<div class="valign-wrapper">
<input placeholder="Añadir comentario">
<a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">send</i></a>
</div>
</article>
<!-- Articulo 2 -->
<article class="grey lighten-3">
<div class="left-align">
<h5><b>Segundo articulo</b></h5>
<time datetime="23-02-18">23-02-18</time>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Tags -->
<div class="chip green lighten-3">Tecnologia</div>
<div class="chip brown lighten-3">Ciencia</div>
<div class="chip green lighten-3">Programacion</div>
<!-- Comentario(s) -->
<div class="grey lighten-2">
<div class="valign-wrapper">
<time datetime="04-02-2018">04/02/18</time>
<p>: Comentario #1 sobre el articulo</p>
</div>
</div>
<!-- Añadir Comentario -->
<div class="valign-wrapper">
<input placeholder="Añadir comentario">
<a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">send</i></a>
</div>
</article>
<!-- Articulo 3 -->
<article class="grey lighten-3">
<div class="left-align">
<h5><b>Tercer articulo</b></h5>
<time datetime="23-02-18">23-02-18</time>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Tags -->
<div class="chip green lighten-3">Tecnologia</div>
<div class="chip brown lighten-3">Ciencia</div>
<div class="chip green lighten-3">Programacion</div>
<!-- Comentario(s) -->
<div class="grey lighten-2">
<div class="valign-wrapper">
<time datetime="04-02-2018">04/02/18</time>
<p>: Comentario #1 sobre el articulo</p>
</div>
</div>
<!-- Añadir Comentario -->
<div class="valign-wrapper">
<input placeholder="Añadir comentario">
<a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">send</i></a>
</div>
</article>
</div>
</div>
<footer class="page-footer grey darken-3">
<div class="footer-copyright">
<div class="container">
© 2018 Copyright Reto#3 - CoreUpgrade
</div>
</div>
</footer>
<!--Importa jQuery antes de materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>