-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtriasico.html
389 lines (349 loc) · 24.2 KB
/
triasico.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
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dinopedia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- viewport para apple device-width = ancho pantalla initial-scale es que inicia sin ningún zoom -->
<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<!----- icono para apple y safari -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<!-- Load Require CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- iconos -->
<link href="assets/css/boxicon.min.css" rel="stylesheet">
<!-- tipo de letra -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<!-- carga CSS -->
<link rel="stylesheet" href="assets/css/estilos.css">
</head>
<body>
<!-- Header -->
<nav id="main_nav" class="navbar navbar-expand-lg navbar-light"
style="position: sticky; padding: 0%; top: 0; width: 100%; z-index: 500; background-color: ghostwhite;">
<!--navbar-expand-lg = envoltorio para que el navbar se estire en lg
navbar-light = texto negro de la letra
bg-white = fondo de color blanco
-->
<div class="container d-flex justify-content-between align-items-center">
<a class="navbar-brand h1" href="index.html" style="justify-content: start; margin: 0%; padding-left: 1%; padding-right: 1%;">
<!--navbar-brand = clase se utiliza para resaltar la marca o logotipo de su página-->
<img src="assets/img/dinosaur.png" style="width: 3em; margin: auto;">
<span class="text-dark" style="text-align: center; font-size: 24px;">Dinopedia</span>
</a>
<!-- boton de hamburguesa -->
<button class="navbar-toggler border-0"
type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-toggler-success"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>
<!------------------------------------------- Opciones del Menu -->
<div class="align-self-center collapse navbar-collapse flex-fill d-lg-flex justify-content-lg-between"
id="navbar-toggler-success">
<!-------collapse navbar-collapse= para agrupar y ocultar el contenido de la barra de navegación
por un punto de interrupción principal.
flex-fill = obliga a que todos los elementos tengan el mismo tamaño de ancho
d-lg-flex = utilidades para crear un contenedor flexbox y transforme los elementos secundarios
directos en elementos flexibles
-->
<div class="flex-fill mx-xl-5">
<!-- mx=para clases que establecen tanto *-lefty*-right-->
<ul class="nav navbar-nav d-flex justify-content-center text-center text-dark" style="margin: 0%; font-size: 20px;">
<!-- .navbar-nav para una navegación ligera y de altura completa
(incluida la compatibilidad con menús desplegables).-->
<li class="nav-item active">
<a class="nav-link btn-outline-primary px-3 py-4" href="index.html">Inicio</a>
<!-- px = padding y mx es el margin
rounded-pill =genera ese boton con bordes redondeados rounded-circle-->
</li>
<li class="nav-item dropdown">
<a class="nav-link btn-outline-primary px-3 py-4 dropdown-toggle" type="button" id="dropdownMenuButton1"
style="width: 100%;" data-bs-toggle="dropdown" aria-expanded="false">
El mundo mesozoico
</a>
<ul class="dropdown-menu dropdown-menu dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="triasico.html">Triásico</a></li>
<li><a class="dropdown-item" href="jurasico.html">Jurásico</a></li>
<li><a class="dropdown-item" href="cretacico.html">Cretácico</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary py-4 px-3" href="enciclopedia.html">Dinosaurios de la A a la Z</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary py-4 px-3" href="paleoarte.html">Paleoarte</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary py-4 px-3" href="foro.html">Foro</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary py-4 px-3" href="tienda.html">Tienda</a>
</li>
</ul>
</div>
<div class="navbar nav-fill align-self-center d-flex text-dark">
<a class="nav-link btn-outline-primary px-3 dropdown-toggle" type="button" id="dropdownMenuButton3"
data-bs-toggle="dropdown" aria-expanded="false">
<i class='bx bxs-user-account bx-md'></i>
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" aria-labelledby="dropdownMenuButton3">
<li><a class="dropdown-item" href="#">Ingresar</a></li>
<li><a class="dropdown-item" href="#">Registrarse</a></li>
</ul>
</div>
</div>
</div>
</nav>
<section>
<div class="carrousel" style="max-height: 600px; overflow: hidden;" id="carrousel-mesozoico">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/18bis.jpg" class="d-block w-100" alt=""
style="object-fit: cover; overflow: hidden;">
<div class="carousel-caption">
<h1 class="text-end" style="background-color: indianred; margin: 0%; padding-right: 1%;">Triásico</h1>
<p class="text-dark text-end" style="background-color: rgb(255, 255, 255); padding-right: 1%;">251 millones de años - 201 millones de años</p>
</div>
</div>
</div>
</div>
<div id="credito_artista" class="d-block w-100" style="text-align: end; padding-right: 1em;">
<span>Arte hecho por </span><a class="text-decoration-none text-light" style="font-weight: bold;"
href="https://www.simonstalenhag.se/paleo.html">Simon Stalenhag</a>
</div>
</section>
<!-- start articulo -->
<section style="margin: 2%;" id="articulo_completo">
<h1>
Nuevo amanecer
</h1>
<div class="card" style="overflow: hidden;">
<img src="assets/img/triasico.png" alt="" class="card-img-top" style="padding: 1%;">
<div class="card-body" style="padding-bottom: 0%;">
<h2 class="h2 text-center col-12">Nuestro planeta hace 200 millones de años</h2>
<p style="text-align: justify; margin-top: 1em;">Durante el período triásico Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Iusto perferendis, maxime magnam doloremque error obcaecati, earum,
laboriosam impedit quia maiores illo recusandae fugiat assumenda molestias ratione porro sequi
repellendus suscipit.</p>
</div>
</div>
<p class="texto-articulo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam error culpa quas.
Rerum harum earum corrupti autem dolorum temporibus provident doloribus sapiente cumque nobis inventore
velit atque perferendis omnis ipsam natus placeat fuga aliquid tenetur, at deserunt in, non iusto. Totam
obcaecati ut neque. Excepturi quo repudiandae adipisci ratione iste, quidem at velit cupiditate possimus
voluptatem? Laborum consequatur ipsa, earum esse nulla eveniet mollitia fugiat aliquid quo doloremque minima
laudantium! Aliquam impedit aspernatur facilis nesciunt corporis consequatur ratione sint itaque ut libero
ab vel fuga architecto inventore illo, obcaecati repudiandae consequuntur mollitia incidunt, enim,
temporibus pariatur quia! Sequi, assumenda rerum enim nulla quidem modi velit unde esse? Quis error,
dignissimos obcaecati officiis, voluptatem distinctio eveniet accusamus deserunt iure vero facere, velit
voluptatibus ipsum ipsa eum dicta ad at dolor maxime ratione accusantium! Corrupti, veritatis rem! Eos
eligendi praesentium beatae. Dolore architecto necessitatibus voluptas ex quaerat natus nesciunt vitae sequi
ab?</p>
<p class="texto-articulo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi beatae at dignissimos
laboriosam. Ipsum fugiat ex quam. A nihil voluptatibus error soluta illo ipsam, consequuntur eum tempora
exercitationem adipisci minus laudantium debitis reiciendis omnis voluptatum, esse dolorum in voluptate,
laboriosam vel molestiae placeat iusto! Minus veniam, fugiat eligendi impedit sit dolore enim eveniet
consectetur temporibus nisi! Deserunt quo debitis ex, neque maxime molestiae nemo aspernatur molestias
incidunt numquam sapiente explicabo dolore repellendus possimus soluta obcaecati asperiores voluptatem vitae
a recusandae veritatis quibusdam? Hic, temporibus quia impedit accusamus corrupti eum omnis quis aliquam
consequatur facere ducimus odio voluptatem unde rem velit adipisci labore numquam fugit aperiam voluptatum
odit dolore itaque! Voluptate debitis magnam aliquid qui quia expedita, perspiciatis, illum quasi dolore
dolorum eos vitae. Ab cumque libero laudantium eius totam voluptatibus, aliquam magni illum repellendus
maxime aliquid, sint eaque tempore minus consequuntur porro in fuga? Praesentium impedit, nulla dolores
adipisci voluptate ducimus veniam, eligendi omnis aliquam ad vitae at alias labore minus repellendus enim
vel deleniti laborum cum quia harum sed incidunt ullam! Corporis quod atque corrupti iusto tenetur, soluta
mollitia sit cupiditate similique, cum dicta temporibus praesentium ratione suscipit perferendis asperiores
commodi architecto tempora! Neque, animi ea. Eveniet assumenda possimus ea accusamus deleniti, perspiciatis
ex sapiente cum veritatis dolores, adipisci ipsum amet ipsam odit doloribus provident nobis voluptatibus?
Natus, quisquam rem placeat cumque alias optio vitae mollitia voluptas aliquid dolor voluptatem aspernatur
incidunt laborum enim delectus maiores est architecto! Eum debitis illo iusto provident itaque. Pariatur
voluptatum deleniti suscipit distinctio hic tempora soluta earum explicabo qui illo provident, quis, quaerat
dignissimos est repellendus omnis quisquam neque dolorem, laborum eos ad perferendis debitis! Ipsa deserunt
quo eligendi quam quod, quasi facere maiores dolor aspernatur perferendis labore doloribus mollitia ullam
obcaecati provident dolorem nobis amet esse quas iure eius! Nostrum, laborum aliquam.</p>
<div class="card" style="float: right; overflow: hidden; margin-left: 2%; margin-right: 0%;">
<img src="assets/img/paisajetriasico.jpg" class="card-img-top" alt="...">
<div class="card-body" style="padding-bottom: 0%;">
<span style="font-weight: bold;">Recreación artística del paisaje triásico</span> // <i>Ludek Pesek</i>
<hr>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis magnam architecto esse, corrupti
tenetur consectetur?</p>
</div>
</div>
<p class="texto-articulo">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut blanditiis corporis
necessitatibus culpa sunt expedita, ratione nesciunt ab facere numquam quas harum assumenda nisi natus
incidunt explicabo unde maiores? Voluptatem sit, explicabo doloremque veniam temporibus iste ullam esse
sunt! Ipsa repudiandae aliquam dicta itaque beatae qui adipisci voluptas quaerat odit provident nulla
voluptatem consequatur accusantium rerum maiores eius praesentium dignissimos, saepe laboriosam corrupti.
Obcaecati assumenda molestias rem temporibus dignissimos sit corrupti maxime, magni quos repellat nisi
explicabo exercitationem eius cumque qui quaerat placeat distinctio minima reiciendis iusto aliquid vero.
Quidem officiis dolorem autem accusantium possimus sed vitae deserunt molestias doloribus, fugit aliquid!
Doloremque corporis nesciunt consequatur quibusdam, fuga molestias mollitia molestiae odit dignissimos
laborum aspernatur numquam tempore quod nihil placeat ea soluta repudiandae dicta, cupiditate sapiente
reprehenderit! Inventore accusamus libero praesentium doloribus perferendis illo numquam atque? Suscipit
eius sint esse unde culpa molestias, beatae vero alias dolorem expedita quibusdam quas earum consequatur
voluptas ipsum. Quia eos nostrum incidunt, eum minima, excepturi provident laboriosam dicta ut dolor eius
corporis officiis enim neque esse consequuntur pariatur corrupti consequatur asperiores hic fugit autem
odit. Soluta quod, tempora perferendis necessitatibus praesentium cum expedita a ut itaque! Ipsum accusamus
eveniet, fugit veritatis ipsam aperiam provident.</p><br>
<h3>Lorem, ipsum.</h3>
<p class="texto-articulo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi voluptates quidem dicta quam repellendus at corporis natus, ratione aliquam nihil eius, tempore perferendis doloribus, aliquid nulla asperiores. Voluptatem culpa deserunt ullam id minima saepe. Rem, deleniti cupiditate veritatis cum veniam perferendis ducimus, aut ipsa facilis dicta quae rerum iste maiores nesciunt officia aliquam voluptates nisi doloribus expedita labore ab. Consequuntur facere iste temporibus fugiat, consectetur quasi ex dignissimos impedit ducimus! Pariatur corporis voluptate, rem labore cum impedit corrupti delectus voluptatibus distinctio itaque exercitationem quia! A, atque reiciendis voluptatum error obcaecati, quos qui delectus quisquam voluptas eos veritatis dolorem soluta reprehenderit.</p>
<!-- start linea de tiempo-->
<div class="w-100" style="background-color: rgb(216, 216, 216);">
<!-- VER COMO IMPLEMENTAR, METER GÉNEROS DE DINOSAURIOS CON UN TIEMPO E INFO -->
</div>
<!-- end linea de tiempo-->
<p class="texto-articulo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque minus accusamus odio, atque voluptas animi totam deleniti. Quibusdam exercitationem nobis enim, provident quo voluptatem tempore, quia ab eaque accusantium, laborum aperiam molestiae et sunt earum nemo incidunt eveniet mollitia deleniti modi voluptates magni eos? Id, soluta laboriosam aspernatur assumenda autem, non nesciunt illo molestiae deleniti reiciendis enim, laudantium optio. Commodi voluptatum corporis officiis, sed dolorum ullam, inventore dicta possimus, consectetur porro maiores ut quis et quia blanditiis nihil! Debitis expedita tempora a voluptates quo deleniti tempore. Laudantium, aperiam nobis obcaecati saepe molestiae fuga in, voluptas reprehenderit porro fugit animi dignissimos praesentium corporis odit iste quasi eveniet harum qui, ex ut cum? Dignissimos laudantium nesciunt itaque rem voluptatum distinctio ipsam qui quod porro sit incidunt iste quidem doloribus sunt consectetur placeat, amet ratione nam vitae facilis! Et, commodi! Eveniet, voluptatem iure! Assumenda eveniet repudiandae exercitationem eius, perspiciatis deleniti? Id, eveniet laboriosam ipsa numquam deleniti omnis amet maiores magnam fuga cumque assumenda. Praesentium tempora ex dolorum qui? Nostrum, rerum recusandae? Iure repellendus voluptatem ex sit qui assumenda! Ut nihil illum officiis distinctio. Sit, alias porro officiis error iusto exercitationem quo? Perferendis ipsum maxime blanditiis consequuntur quibusdam nulla error voluptatibus in ratione temporibus.</p>
</section>
<!-- end articulo -->
<section style="margin: 2%;">
<hr>
<ul class="list-unstyled text-light text-end">
<li><a class="text-decoration-none" href="jurasico.html" style="font-size: 20px;">Jurásico</a> <i class='bx bxs-right-arrow text-dark'></i></li>
<li><a class="text-decoration-none" href="cretacico.html" style="font-size: 20px;">Cretácico</a> <i class='bx bxs-right-arrow text-dark'></i></li>
</ul>
</section>
<!-- Start Footer -->
<footer class="bg-secondary">
<div class="container">
<div class="row bg-secondary justify-content-center py-2">
<div class="col-12 col-sm-6 col-md-3 text-start">
<a class="text-decoration-none" href="index.html">
<h2 class="text-light">Dinopedia</h2>
</a>
<p class="text-light">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, voluptate sed.</p>
<ul class="list-unstyled text-light">
<li>
<i class='bx-fw bx bx-phone bx-xs'></i><a class="text-decoration-none text-light py-1"
href="tel:012-3456-7890">012-3456-7890</a>
</li>
<li>
<i class='bx-fw bx bx-mail-send bx-xs'></i><a class="text-decoration-none text-light py-1"
href="mailto:dinopedia.contacto@gmail.com">dinopedia.contacto@gmail.com</a>
</li>
</ul>
<ul class="list-inline footer-icons light-300">
<li class="list-inline-item m-0">
<a class="text-light" target="_blank" href="http://facebook.com">
<i class='bx bxl-facebook-square bx-md'></i>
</a>
</li>
<li class="list-inline-item m-0">
<a class="text-light" target="_blank" href="http://twitter.com">
<i class='bx bxl-twitter bx-md'></i>
</a>
</li>
<li class="list-inline-item m-0">
<a class="text-light" target="_blank" href="http://instagram.com">
<i class='bx bxl-instagram bx-md'></i>
</a>
</li>
<li class="list-inline-item m-0">
<a class="text-light" target="_blank" href="https://web.telegram.org/#/#">
<i class='bx bxl-telegram bx-md'></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-2 text-start">
<h2 class="text-light">Enlaces</h2>
<ul class="list-unstyled text-light">
<li>
<a class="text-decoration-none text-light" href="index.html">
Inicio
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="triasico.html">
El mundo mesozoico
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="enciclopedia.html">
Dinosaurios de la A a la Z
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="paleoarte.html">
Paleoarte
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="foro.html">
Foro
</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-2 text-start">
<h2 class="text-light">Tienda</h2>
<ul class="list-unstyled text-light">
<li>
<a class="text-decoration-none text-light" href="#">
Ropa
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="#">
Accesorios
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="#">
Pósters
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="#">
Rompecabezas
</a>
</li>
<li>
<a class="text-decoration-none text-light" href="#">
Juguetes
</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-5 text-light text-start">
<h2 class="text-light">Suscríbase a nuestra newsletter</h2>
<form action="#" method="POST">
<div class="form-row d-flex flex-fill">
<input class="form-control" type="email" placeholder="Ingrese su e-mail" required>
<input class="btn btn-primary" type="submit" value="Suscribirse">
</div>
</form>
</div>
</div>
</div>
<div class="w-100 bg-primary">
<div class="container">
<div class="row pt-2">
<div class="col-12 col-sm-6">
<p class="text-lg-start text-center text-light light-300">
© Copyright 2021 Dinopedia. Todos los derechos reservados.
</p>
</div>
<div class="col-12 col-sm-6">
<p class="text-lg-end text-center text-light light-300">
Diseñado por <a rel="sponsored" class="text-decoration-none text-light"
href="https://www.linkedin.com/in/augusto-rehfeldt-9aa01320a/" target="_blank"><strong>Augusto Rehfeldt</strong></a> y <a rel="sponsored" class="text-decoration-none text-light"
href="https://cursophp.com.ar/" target="_blank"><strong>CAC FullStack</strong></a>
</p>
<p class="text-light text-end">
Esta página web tiene un fin meramente educativo, por ahora.
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>