css-switch-gallery 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Demo elements.html +417 -0
- package/css/01-style.css +728 -0
- package/css/02-style.css +736 -0
- package/package.json +15 -0
|
@@ -0,0 +1,417 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="es" id="theme" class="dark">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="demo elements">
|
|
7
|
+
<link id="demo-style" rel="stylesheet" href="">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div>
|
|
11
|
+
<h2 id="top">Así lucirán tus elementos html</h2>
|
|
12
|
+
<h3>Contenido de texto</h3>
|
|
13
|
+
<div>
|
|
14
|
+
<p>
|
|
15
|
+
Este párrafo muestra algunos <span>elementos en línea</span> que ajusté ligeramente para que se integren mejor con el resto de la plantilla. <strong>No todos los elementos están modificados</strong>; algunos <q>se ven bien por defecto</q>, otros cumplen una función semántica y <em>no modifican de forma significativa</em> la apariencia del texto. <i>Abajo encontrarás otros ejemplos</i>.
|
|
16
|
+
</p>
|
|
17
|
+
<time datetime="2026-02-14">14 de Febrero</time>
|
|
18
|
+
<p>
|
|
19
|
+
El <b>objetivo principal de CSS Switch Gallery</b> es ofrecer una variedad de estilos predefinidos a desarrolladores que necesitan una <mark>guía visual rápida para su sitio web</mark> antes de crear o personalizar sus propios estilos <code>CSS</code>. También está pensado para quienes simplemente buscan un diseño rápido para una página estática, como por ejemplo un portafolio, landing, etc.
|
|
20
|
+
Ten en cuenta que estos estilos <u>no están pensados para proyectos que ya estén muy avanzados</u>.
|
|
21
|
+
</p>
|
|
22
|
+
<p>Para la demo, me basé en la <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">referencia de elementos de MDN</a>.</p>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<hr>
|
|
26
|
+
|
|
27
|
+
<h3>Listas, Ordenada y Desordenada</h3>
|
|
28
|
+
<div>
|
|
29
|
+
<h4>Características</h4>
|
|
30
|
+
<ul>
|
|
31
|
+
<li>Se puede usar directamente, sin necesidad de instalación.</li>
|
|
32
|
+
<li>Puedes descargar la plantilla y modificarla según lo necesites.</li>
|
|
33
|
+
<li>Incluye algunas clases opcionales para facilitar un uso rápido.</li>
|
|
34
|
+
</ul>
|
|
35
|
+
|
|
36
|
+
<h4>Como usar</h4>
|
|
37
|
+
<ol>
|
|
38
|
+
<li>Cambia los estilos del demo en tiempo real usando los botones switch y elige el que más te guste.</li>
|
|
39
|
+
<li>Copia el elemento <code><link></code> que se encuentra sobre el visualizador.</li>
|
|
40
|
+
<li>Pégalo dentro del <code><head></code> de tu HTML.</li>
|
|
41
|
+
</ol>
|
|
42
|
+
<blockquote>
|
|
43
|
+
Aquí tienes el texto mejorado, más claro y con mejor fluidez:
|
|
44
|
+
Clases? Sí, incluí clases opcionales en las plantillas para que puedas utilizarlas rápidamente si lo necesitas. La idea es similar a la forma en que se implementan las clases en Tailwind. A lo largo del demo encontrarás ejemplos junto con su sintaxis.
|
|
45
|
+
</blockquote>
|
|
46
|
+
<h4>Clases para Display Flex</h4>
|
|
47
|
+
<p>Agrega estas clases a tus contenedores.</p>
|
|
48
|
+
<div class="flex-row justify-center items-center">
|
|
49
|
+
<pre>flex-row</pre>
|
|
50
|
+
<pre>nowrap</pre>
|
|
51
|
+
<pre>flex-row-reverse</pre>
|
|
52
|
+
<pre>flex-column</pre>
|
|
53
|
+
<pre>flex-column-reverse</pre>
|
|
54
|
+
<pre>justify-center</pre>
|
|
55
|
+
<pre>justify-between</pre>
|
|
56
|
+
<pre>items-center</pre>
|
|
57
|
+
<pre>items-start</pre>
|
|
58
|
+
<pre>items-end</pre>
|
|
59
|
+
<pre>gap</pre>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<h1>Encabezado 1</h1>
|
|
63
|
+
<h2>Encabezado 2</h2>
|
|
64
|
+
<h3>Encabezado 3</h3>
|
|
65
|
+
<h4>Encabezado 4</h4>
|
|
66
|
+
<h5>Encabezado 5</h5>
|
|
67
|
+
<h6>Encabezado 6</h6>
|
|
68
|
+
<p>¿Necesitas que algún párrafo tenga una fuente mas pequeña? Usa la clase:</p>
|
|
69
|
+
<pre>text-sm</pre>
|
|
70
|
+
|
|
71
|
+
<h4>Lista Descriptiva</h4>
|
|
72
|
+
<dl>
|
|
73
|
+
<dt>Beast of Bodmin</dt>
|
|
74
|
+
<dd>Un felino gigante que merodea por Bodmin Moor.</dd>
|
|
75
|
+
|
|
76
|
+
<dt>Morgawr</dt>
|
|
77
|
+
<dd>Una criatura marina avistada en la costa.</dd>
|
|
78
|
+
|
|
79
|
+
<dt>Owlman</dt>
|
|
80
|
+
<dd>Un ser alado con aspecto de búho.</dd>
|
|
81
|
+
</dl>
|
|
82
|
+
<h4>Elemento Figure</h4>
|
|
83
|
+
<figure>
|
|
84
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg" alt="a sunset" loading="lazy">
|
|
85
|
+
<figcaption>Puesta de sol</figcaption>
|
|
86
|
+
</figure>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<hr>
|
|
90
|
+
|
|
91
|
+
<h3>Imágenes</h3>
|
|
92
|
+
<div class="flex-column justify-center gap">
|
|
93
|
+
<p>Prueba diferentes tamaños para imágenes.</p>
|
|
94
|
+
<div class="flex-column gap">
|
|
95
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg" alt="bridge in a sunset" class="img-sm img-radius" loading="lazy">
|
|
96
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg" alt="bridge in a sunset" class="img-md img-radius" loading="lazy">
|
|
97
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg" alt="bridge in a sunset" class="img-lg img-radius" loading="lazy">
|
|
98
|
+
</div>
|
|
99
|
+
<div>
|
|
100
|
+
<p>Usando las clases:</p>
|
|
101
|
+
<div class="flex-row">
|
|
102
|
+
<pre>img-sm</pre>
|
|
103
|
+
<pre>img-md</pre>
|
|
104
|
+
<pre>img-lg</pre>
|
|
105
|
+
<pre>img-radius</pre>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<h4>Audio y Video</h4>
|
|
109
|
+
<script>
|
|
110
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
111
|
+
const audio = document.getElementById("track")
|
|
112
|
+
audio.volume = 0.2
|
|
113
|
+
})
|
|
114
|
+
</script>
|
|
115
|
+
<audio id="track" controls src="audio.mp3"></audio>
|
|
116
|
+
<video controls></video>
|
|
117
|
+
</div>
|
|
118
|
+
<hr>
|
|
119
|
+
<h3>Contenido Incrustado</h3>
|
|
120
|
+
<iframe
|
|
121
|
+
id="inlineFrameExample"
|
|
122
|
+
title="Inline Frame Example"
|
|
123
|
+
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
|
|
124
|
+
</iframe>
|
|
125
|
+
<hr>
|
|
126
|
+
<h3>Tablas</h3>
|
|
127
|
+
<table>
|
|
128
|
+
<caption>Ejemplo de tabla 1</caption>
|
|
129
|
+
<thead>
|
|
130
|
+
<tr>
|
|
131
|
+
<th scope="col">Product</th>
|
|
132
|
+
<th scope="col">Unit Price</th>
|
|
133
|
+
<th scope="col">Sold</th>
|
|
134
|
+
<th scope="col">Revenue</th>
|
|
135
|
+
</tr>
|
|
136
|
+
</thead>
|
|
137
|
+
<tbody>
|
|
138
|
+
<tr>
|
|
139
|
+
<td>Laptop</td>
|
|
140
|
+
<td>800</td>
|
|
141
|
+
<td>5</td>
|
|
142
|
+
<td>4000</td>
|
|
143
|
+
</tr>
|
|
144
|
+
<tr>
|
|
145
|
+
<td>Keyboard</td>
|
|
146
|
+
<td>50</td>
|
|
147
|
+
<td>10</td>
|
|
148
|
+
<td>500</td>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr>
|
|
151
|
+
<td>Mouse</td>
|
|
152
|
+
<td>25</td>
|
|
153
|
+
<td>15</td>
|
|
154
|
+
<td>375</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>Monitor</td>
|
|
158
|
+
<td>200</td>
|
|
159
|
+
<td>4</td>
|
|
160
|
+
<td>800</td>
|
|
161
|
+
</tr>
|
|
162
|
+
<tr>
|
|
163
|
+
<td>Printer</td>
|
|
164
|
+
<td>150</td>
|
|
165
|
+
<td>3</td>
|
|
166
|
+
<td>450</td>
|
|
167
|
+
</tr>
|
|
168
|
+
</tbody>
|
|
169
|
+
<tfoot>
|
|
170
|
+
<tr>
|
|
171
|
+
<th>Total</th>
|
|
172
|
+
<td>-</td>
|
|
173
|
+
<td>37</td>
|
|
174
|
+
<td>6125</td>
|
|
175
|
+
</tr>
|
|
176
|
+
</tfoot>
|
|
177
|
+
</table>
|
|
178
|
+
<table>
|
|
179
|
+
<caption>Ejemplo de tabla 2</caption>
|
|
180
|
+
<thead>
|
|
181
|
+
<tr>
|
|
182
|
+
<th></th>
|
|
183
|
+
<th scope="col">Name</th>
|
|
184
|
+
<th scope="col">Hours</th>
|
|
185
|
+
<th scope="col">Pay</th>
|
|
186
|
+
<th scope="col">Total</th>
|
|
187
|
+
</tr>
|
|
188
|
+
</thead>
|
|
189
|
+
<tbody>
|
|
190
|
+
<tr>
|
|
191
|
+
<th scope="row">1</th>
|
|
192
|
+
<td>Jhon</td>
|
|
193
|
+
<td>40</td>
|
|
194
|
+
<td>800</td>
|
|
195
|
+
<td>32,000</td>
|
|
196
|
+
</tr>
|
|
197
|
+
<tr>
|
|
198
|
+
<th scope="row">2</th>
|
|
199
|
+
<td>Sarah</td>
|
|
200
|
+
<td>35</td>
|
|
201
|
+
<td>700</td>
|
|
202
|
+
<td>24,500</td>
|
|
203
|
+
</tr>
|
|
204
|
+
<tr>
|
|
205
|
+
<th scope="row">3</th>
|
|
206
|
+
<td>David</td>
|
|
207
|
+
<td>45</td>
|
|
208
|
+
<td>900</td>
|
|
209
|
+
<td>40,500</td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<th scope="row">4</th>
|
|
213
|
+
<td>Emily</td>
|
|
214
|
+
<td>30</td>
|
|
215
|
+
<td>600</td>
|
|
216
|
+
<td>18,000</td>
|
|
217
|
+
</tr>
|
|
218
|
+
<tr>
|
|
219
|
+
<th scope="row">5</th>
|
|
220
|
+
<td>Michael</td>
|
|
221
|
+
<td>38</td>
|
|
222
|
+
<td>760</td>
|
|
223
|
+
<td>29,080</td>
|
|
224
|
+
</tr>
|
|
225
|
+
</tbody>
|
|
226
|
+
</table>
|
|
227
|
+
<hr>
|
|
228
|
+
<h3>Forms elements</h3>
|
|
229
|
+
<form class="flex-column gap">
|
|
230
|
+
<fieldset>
|
|
231
|
+
<legend>Típico formulario</legend>
|
|
232
|
+
<div class="flex-column">
|
|
233
|
+
<label for="name">Nombre</label>
|
|
234
|
+
<input id="name" type="text" placeholder="Nombre completo">
|
|
235
|
+
</div>
|
|
236
|
+
<div class="flex-column">
|
|
237
|
+
<label for="email">Correo electrónico</label>
|
|
238
|
+
<input id="email" type="email" placeholder="nombre@gmail.com">
|
|
239
|
+
</div>
|
|
240
|
+
<div class="flex-column">
|
|
241
|
+
<label for="comentarios">Mensaje</label>
|
|
242
|
+
<textarea id="comentarios" placeholder="Algún mensaje que quieras dejar"></textarea>
|
|
243
|
+
</div>
|
|
244
|
+
<input type="submit" value="Enviar">
|
|
245
|
+
<input type="reset" value="Resetear">
|
|
246
|
+
</fieldset>
|
|
247
|
+
<fieldset>
|
|
248
|
+
<legend>Tipos de inputs</legend>
|
|
249
|
+
<div class="flex-column">
|
|
250
|
+
<label for="disabled">Bloqueado</label>
|
|
251
|
+
<input id="disabled" type="text" placeholder="No puedes escribir aquí, lo siento" disabled>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="flex-column">
|
|
254
|
+
<label for="password">Contraseña</label>
|
|
255
|
+
<input id="password" type="password" placeholder="no uses emojis">
|
|
256
|
+
</div>
|
|
257
|
+
<div class="flex-column">
|
|
258
|
+
<label for="date">Calendario</label>
|
|
259
|
+
<input id="date" type="date">
|
|
260
|
+
</div>
|
|
261
|
+
<div class="flex-column">
|
|
262
|
+
<label for="time">Horario</label>
|
|
263
|
+
<input id="time" type="time">
|
|
264
|
+
</div>
|
|
265
|
+
<div class="flex-column">
|
|
266
|
+
<label for="color">Selección de color</label>
|
|
267
|
+
<input id="color" type="color" value="#ababab">
|
|
268
|
+
</div>
|
|
269
|
+
<div>
|
|
270
|
+
<label for="file">Subir archivo</label>
|
|
271
|
+
<input id="file" type="file">
|
|
272
|
+
</div>
|
|
273
|
+
<div class="flex-column">
|
|
274
|
+
<label for="range">Rango</label>
|
|
275
|
+
<input id="range" type="range" min="0" max="100" value="50">
|
|
276
|
+
</div>
|
|
277
|
+
<div class="flex-column">
|
|
278
|
+
<label for="number">Número</label>
|
|
279
|
+
<input id="number" type="number" placeholder="elije un número o escríbelo">
|
|
280
|
+
</div>
|
|
281
|
+
<div class="flex-column">
|
|
282
|
+
<label for="checkbox">Check</label>
|
|
283
|
+
<input id="checkbox" type="checkbox">
|
|
284
|
+
</div>
|
|
285
|
+
<div class="flex-column">
|
|
286
|
+
<label for="radio">Opción</label>
|
|
287
|
+
<input id="radio" type="radio" >
|
|
288
|
+
</div>
|
|
289
|
+
</fieldset>
|
|
290
|
+
<fieldset class="flex-column gap">
|
|
291
|
+
<legend>Mas elementos</legend>
|
|
292
|
+
<div class="flex-column">
|
|
293
|
+
<label for="fuel">Meter</label>
|
|
294
|
+
<meter id="fuel" min="0" max="100" low="33" high="50" optimum="60" value="60"></meter>
|
|
295
|
+
</div>
|
|
296
|
+
<div class="flex-column">
|
|
297
|
+
<label for="progress">Progress</label>
|
|
298
|
+
<progress id="progress" max="100" value="40"></progress>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="flex-column">
|
|
301
|
+
<label for="dino-select">Seleccionar</label>
|
|
302
|
+
<select id="dino-select">
|
|
303
|
+
<optgroup label="Vanilla">
|
|
304
|
+
<option>HTML</option>
|
|
305
|
+
<option>CSS</option>
|
|
306
|
+
<option>JavaScript</option>
|
|
307
|
+
</optgroup>
|
|
308
|
+
<optgroup label="Frameworks">
|
|
309
|
+
<option>React</option>
|
|
310
|
+
<option>NextJs</option>
|
|
311
|
+
<option>Astro</option>
|
|
312
|
+
</optgroup>
|
|
313
|
+
</select>
|
|
314
|
+
</div>
|
|
315
|
+
</fieldset>
|
|
316
|
+
</form>
|
|
317
|
+
<hr>
|
|
318
|
+
<div class="flex-column gap">
|
|
319
|
+
<h3>Elementos interactivos</h3>
|
|
320
|
+
<h4>Summary</h4>
|
|
321
|
+
<details>
|
|
322
|
+
<summary>Un detalle</summary>
|
|
323
|
+
<p class="text-sm">Mi intención es hacer como mínimo 10 estilos diferentes.</p>
|
|
324
|
+
</details>
|
|
325
|
+
<h4>Dialog</h4>
|
|
326
|
+
<div class="flex-column">
|
|
327
|
+
<button class="button-fit" command="show-modal" commandfor="my-dialog">Abrir modal</button>
|
|
328
|
+
<dialog id="my-dialog">
|
|
329
|
+
<p>Ejemplo de una ventana modal.</p>
|
|
330
|
+
<button class="button-fit" commandfor="my-dialog" command="close">Cerrar</button>
|
|
331
|
+
</dialog>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
<hr>
|
|
335
|
+
<h3>Clases para botones</h3>
|
|
336
|
+
<p>
|
|
337
|
+
En muchas páginas web, los botones tienen estilos distintos según su intención y nivel de importancia. Aquí encontrarás clases para botones que te permitirán ampliar y enriquecer el diseño de tus interfaces de usuario.
|
|
338
|
+
</p>
|
|
339
|
+
<div class="flex-row">
|
|
340
|
+
<button class="button-primary button-fit">Principal</button>
|
|
341
|
+
<button class="button-secondary button-fit">Secundario</button>
|
|
342
|
+
<button class="button-tertiary button-fit">Terciario</button>
|
|
343
|
+
<button class="button-fit">Por defecto</button>
|
|
344
|
+
<button class="button-disabled button-fit">Bloqueado</button>
|
|
345
|
+
</div>
|
|
346
|
+
<p>Utiliza las clases:</p>
|
|
347
|
+
<div class="flex-row">
|
|
348
|
+
<pre>button-primary</pre>
|
|
349
|
+
<pre>button-secondary</pre>
|
|
350
|
+
<pre>button-tertiary</pre>
|
|
351
|
+
<pre>button-disabled</pre>
|
|
352
|
+
<pre>button-fit</pre>
|
|
353
|
+
</div>
|
|
354
|
+
<p class="text-sm">
|
|
355
|
+
No te dejes llevar por el nombre de las clases. Ningún botón es semánticamente más importante que otro; simplemente les di esos nombres para diferenciarlos y facilitar su uso. Utilízalos según lo consideres más conveniente.
|
|
356
|
+
</p>
|
|
357
|
+
<hr>
|
|
358
|
+
<h3>Clases para diferenciar secciones de página</h3>
|
|
359
|
+
<p>
|
|
360
|
+
Finalmente, aquí tienes algunas clases para contenedores. Es común que muchas páginas web utilicen distintos colores para determinadas secciones de la página o para elementos que necesitan destacar visualmente. Al igual que con los botones, dales el uso que más te convenga.
|
|
361
|
+
</p>
|
|
362
|
+
<h4>Examples</h4>
|
|
363
|
+
<div class="flex-column text-sm gap">
|
|
364
|
+
<article class="container-bg-01 container-radius">
|
|
365
|
+
<h3>Los pulpos tienen tres corazones</h3>
|
|
366
|
+
<p>
|
|
367
|
+
Dos de sus corazones bombean sangre hacia las branquias, mientras que el tercero la distribuye al resto del cuerpo. Curiosamente, cuando nadan, el corazón principal se detiene.
|
|
368
|
+
</p>
|
|
369
|
+
<footer>
|
|
370
|
+
<button class="button-primary button-fit">Acción</button>
|
|
371
|
+
<button class="button-tertiary button-fit">Cerrar</button>
|
|
372
|
+
</footer>
|
|
373
|
+
</article>
|
|
374
|
+
<article class="container-bg-02 container-radius">
|
|
375
|
+
<h3>La miel no caduca</h3>
|
|
376
|
+
<p>
|
|
377
|
+
Se han encontrado vasijas de miel en tumbas del antiguo Egipto que, miles de años después, aún eran aptas para el consumo gracias a su baja humedad y acidez natural.
|
|
378
|
+
</p>
|
|
379
|
+
<footer>
|
|
380
|
+
<button class="button-fit">Acción</button>
|
|
381
|
+
<button class="button-tertiary button-fit">Cerrar</button>
|
|
382
|
+
</footer>
|
|
383
|
+
</article>
|
|
384
|
+
<article class="container-border-01 container-radius">
|
|
385
|
+
<h3>Los tiburones existen antes que los árboles</h3>
|
|
386
|
+
<p>
|
|
387
|
+
Los primeros tiburones aparecieron hace más de 400 millones de años, mientras que los árboles surgieron millones de años después en la historia de la Tierra.
|
|
388
|
+
</p>
|
|
389
|
+
<footer>
|
|
390
|
+
<button class="button-primary button-fit">Acción</button>
|
|
391
|
+
<button class="button-secondary button-fit">Cerrar</button>
|
|
392
|
+
</footer>
|
|
393
|
+
</article>
|
|
394
|
+
<article class="container-border-02 container-radius">
|
|
395
|
+
<h3>El espacio no tiene sonido</h3>
|
|
396
|
+
<p>
|
|
397
|
+
El sonido necesita un medio para propagarse, como el aire o el agua. En el vacío del espacio, no hay partículas suficientes para transmitir ondas sonoras.
|
|
398
|
+
</p>
|
|
399
|
+
<footer>
|
|
400
|
+
<button class="button-secondary button-fit">Acción</button>
|
|
401
|
+
<button class="button-tertiary button-fit">Cerrar</button>
|
|
402
|
+
</footer>
|
|
403
|
+
</article>
|
|
404
|
+
</div>
|
|
405
|
+
<p>Usa las clases:</p>
|
|
406
|
+
<div class="flex-row">
|
|
407
|
+
<pre>container-bg-01</pre>
|
|
408
|
+
<pre>container-bg-02</pre>
|
|
409
|
+
<pre>container-border-01</pre>
|
|
410
|
+
<pre>container-border-02</pre>
|
|
411
|
+
<pre>container-radius</pre>
|
|
412
|
+
</div>
|
|
413
|
+
<hr>
|
|
414
|
+
<p class="text-sm">Fin del camino, <a href="#top">regresar al principio!</a></p>
|
|
415
|
+
</div>
|
|
416
|
+
</body>
|
|
417
|
+
</html>
|