-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
335 lines (320 loc) · 19.3 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
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
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Agregador de Noticias">
<meta name="author" content="Mark Otto, Jacob Thornton, contribuidores de Bootstrap y Derek Pagels">
<meta name="generator" content="Hugo 0.104.2">
<title>SideQuest</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/blog/">
<link href="assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap 5.2.3 -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet"> <!-- CSS Personal -->
</head>
<body>
<div class="container">
<header class="blog-header lh-1 py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<img src="assets/img/Logo-SideQuest.jpg" alt="Logo de la página" height="40px">
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">SideQuest</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img"
viewBox="0 0 24 24">
<title>Search</title>
<circle cx="10.5" cy="10.5" r="7.5" />
<path d="M21 21l-5.2-5.2" />
</svg>
</a>
<!-- <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a> -->
</div>
</div>
</header>
<!-- Barra de Navegación -->
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 link-secondary" href="#">Xbox</a>
<a class="p-2 link-secondary" href="#">PlayStation</a>
<a class="p-2 link-secondary" href="#">Nintendo</a>
<a class="p-2 link-secondary" href="#">PC</a>
<a class="p-2 link-secondary" href="#">Desarrollo</a>
<a class="p-2 link-secondary" href="#">Empresas</a>
<a class="p-2 link-secondary" href="#">Ofertas</a>
<a class="p-2 link-secondary" href="#">Personalidades</a>
</nav>
</div>
</div>
<!-- Cartas de noticias destacadas -->
<main class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Noticia Destacada</h1>
<p class="lead my-3">Un ejemplo de la noticia más destacada del día, enviando a un portal con links a
los distintos noticieros que hayan reportado sobre ella.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Leer más...</a></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">Categoría</strong>
<h3 class="mb-0">Carta de noticia común</h3>
<div class="mb-1 text-muted">Fecha</div>
<p class="card-text mb-auto">Noticias ordenadas cronológicamente se mostrarán en éstas tarjetas.
</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Miniatura</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Miniatura</text>
</svg>
</div>
</div>
</div>
<div class="col-md-6">
<div
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Categoría</strong>
<h3 class="mb-0">Carta de noticia común</h3>
<div class="mb-1 text-muted">Fecha</div>
<p class="card-text mb-auto">Noticias ordenadas cronológicamente se mostrarán en éstas tarjetas.
</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
focusable="false">
<title>Miniatura</title>
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Miniatura</text>
</svg>
</div>
</div>
</div>
</div>
<!-- Inicio de cuerpo de página -->
<div class="row g-5">
<div class="col-md-8">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
SideBlog
</h3>
<article class="blog-post">
<h2 class="blog-post-title mb-1">Entrada de blog de ejemplo</h2>
<p class="blog-post-meta">Viernes, 20 de Enero, 2023 | <a href="https://lile.cl/@AeroBlazt">Derek Pagels</a></p>
<p>Ésta entrada sirve de ejemplo para una entrada personalizada en el blog personal del autor.
Los componentes principales para éste son el título, la fecha, autor y cuerpo.</p>
<hr>
<p>Las entradas de blog pueden tener varios formatos, como la regla horizontal dividendo éste
párrafo y el anterior.
A continuación se mostrarán diferentes ejemplos de formato para las entradas de blog.
</p>
<h2>Citas de bloques.</h2>
<p>Se pueden citar diferentes autores y/o usar el formato a la preferencia del autor.
Un ejemplo de éste elemento sería:
</p>
<blockquote class="blockquote">
<p>"Aquí iría una cita, comentario y/o bloque de texto que el autor quiera enfatizar"<br><span
class="text-italic">
Derek Pagels
</span></p>
</blockquote>
<p>Se pueden usar otros tipos de texto dentro del bloque de texto. En este caso, por ejemplo, se
utilizó un <b>span</b> con clase <b>text-italic</b> para distinguir entre la cita y su autor.
</p>
<h3>Listas</h3>
<p>Se pueden usar listas para ordenar diferentes ideas y conceptos. Por ejemplo, se presenta a continuación una lista sin numeración:</p>
<ul>
<li>Tenemos una lista sin numeración, también conocida como lista desordenada.</li>
<li>Tiene tres elementos.</li>
<li>Los elementos son distinguidos con puntos de viñeta.</li>
</ul>
<p>A continuación, un ejemplo de una lista ordenada:</p>
<ol>
<li>Tenemos una lista numerada, también conocida como lista ordenada.</li>
<li>Cada elemento es distinguido con un número en orden ascendente.</li>
</ol>
<p>Por último, tenemos una lista de definición.</p>
<dl>
<dt>HyperText Markup Language (HTML)</dt>
<dd>El lenguaje usado por un navegador web para mostrar una página.</dd>
<dt>Cascading Style Sheets (CSS)</dt>
<dd>Lenguaje usado por un navegador web para dar estilo a una página HTML.</dd>
<dt>JavaScript (JS)</dt>
<dd>Lenguaje de programación usado por un navegador web para ejecutar contenido y cambiar páginas dinámicamente.</dd>
</dl>
<h2>Inline HTML elements</h2>
<p>HTML defines a long list of available inline tags, a complete list of which can be found on the
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer
Network</a>.
</p>
<ul>
<li><strong>To bold text</strong>, use <code
class="language-plaintext highlighter-rouge"><strong></code>.</li>
<li><em>To italicize text</em>, use <code
class="language-plaintext highlighter-rouge"><em></code>.</li>
<li>Abbreviations, like <abbr title="HyperText Markup Language">HTML</abbr> should use <code
class="language-plaintext highlighter-rouge"><abbr></code>, with an optional <code
class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.
</li>
<li>Citations, like <cite>— Mark Otto</cite>, should use <code
class="language-plaintext highlighter-rouge"><cite></code>.</li>
<li><del>Deleted</del> text should use <code
class="language-plaintext highlighter-rouge"><del></code> and <ins>inserted</ins>
text should use <code class="language-plaintext highlighter-rouge"><ins></code>.</li>
<li>Superscript <sup>text</sup> uses <code
class="language-plaintext highlighter-rouge"><sup></code> and subscript
<sub>text</sub> uses <code class="language-plaintext highlighter-rouge"><sub></code>.
</li>
</ul>
<p>Most of these elements are styled by browsers with few modifications on our part.</p>
<h2>Heading</h2>
<p>This is some additional paragraph placeholder content. It has been written to fill the available
space and show how a longer snippet of text affects the surrounding content. We'll repeat it
often to keep the demonstration flowing, so be on the lookout for this exact same string of
text.</p>
<h3>Sub-heading</h3>
<p>This is some additional paragraph placeholder content. It has been written to fill the available
space and show how a longer snippet of text affects the surrounding content. We'll repeat it
often to keep the demonstration flowing, so be on the lookout for this exact same string of
text.</p>
<pre><code>Example code block</code></pre>
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the
other highly repetitive body text used throughout.</p>
</article>
<article class="blog-post">
<h2 class="blog-post-title mb-1">Another blog post</h2>
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available
space and show how a longer snippet of text affects the surrounding content. We'll repeat it
often to keep the demonstration flowing, so be on the lookout for this exact same string of
text.</p>
<blockquote>
<p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.
</p>
</blockquote>
<p>This is some additional paragraph placeholder content. It has been written to fill the available
space and show how a longer snippet of text affects the surrounding content. We'll repeat it
often to keep the demonstration flowing, so be on the lookout for this exact same string of
text.</p>
<h3>Example table</h3>
<p>And don't forget about tables in these posts:</p>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Upvotes</th>
<th>Downvotes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>Bob</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>Charlie</td>
<td>7</td>
<td>9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Totals</td>
<td>21</td>
<td>23</td>
</tr>
</tfoot>
</table>
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the
other highly repetitive body text used throughout.</p>
</article>
<article class="blog-post">
<h2 class="blog-post-title mb-1">New feature</h2>
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available
space and show how a longer snippet of text affects the surrounding content. We'll repeat it
often to keep the demonstration flowing, so be on the lookout for this exact same string of
text.</p>
<ul>
<li>First list item</li>
<li>Second list item with a longer description</li>
<li>Third list item to close it out</li>
</ul>
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the
other highly repetitive body text used throughout.</p>
</article>
<!-- Botones de navegación de página, redundantes a menos que haya más contenido. -->
<!-- <nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">Antigüos</a>
<a class="btn btn-outline-secondary rounded-pill disabled">Nuevos</a>
</nav> -->
</div>
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">Sobre SideQuest</h4>
<p class="mb-0">Página agregadora de noticias de editoriales y noticieros relacionados con el
mundo de los videojuegos y su cultura. Creada por <a href="https://lile.cl/@AeroBlazt">Derek
Pagels</a>.</p>
</div>
<!-- Bloque de archivo de publicaciones pasadas, actualmente irrelevante para el proyecto. -->
<!-- <div class="p-4">
<h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">March 2021</a></li>
<li><a href="#">February 2021</a></li>
<li><a href="#">January 2021</a></li>
<li><a href="#">December 2020</a></li>
<li><a href="#">November 2020</a></li>
<li><a href="#">October 2020</a></li>
<li><a href="#">September 2020</a></li>
<li><a href="#">August 2020</a></li>
<li><a href="#">July 2020</a></li>
<li><a href="#">June 2020</a></li>
<li><a href="#">May 2020</a></li>
<li><a href="#">April 2020</a></li>
</ol>
</div> -->
<div class="p-4">
<h4 class="fst-italic">Estamos en:</h4>
<ol class="list-unstyled">
<li><a href="https://github.com/DerekPagels/derekpagels.github.io">GitHub</a></li>
<li><a href="https://lile.cl/@AeroBlazt">Mastodon</a></li>
<li><a href="https://talentodigitalaustral.slack.com">Slack</a></li>
</ol>
</div>
</div>
</div>
</div>
</main>
<footer class="blog-footer">
<p>Página creada usando <a href="https://getbootstrap.com/">Bootstrap</a> , diseñado por <a
href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<script src="assets/js/main.js"></script> <!-- JS Script Personal -->
<script src="assets/js/bootstrap.bundle.min.js"></script> <!-- Bootstrap 5.2.3 -->
</body>
</html>