-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
425 lines (425 loc) · 36.4 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
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
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html>
<html lang="en-MX">
<head>
<meta charset="UTF-8">
<meta name="autor" content="Ralber Rosario">
<meta name="description" content="Presentacion del curso de introducion a html">
<title>Introducion a Html:5 | V1</title>
<link rel="shortcut icon" href="/icons8-obsidian-64.ico" type="image/x-icon">
</head>
<body>
<div class="grid grid-col-6 grid-row-6 h-svh-full gid-col-gap-10 pa-10">
<!--Titulo-->
<section class="title flex flex-col-wrap justify-center items-center gap-10 white">
<h1 class="large balance bold">Introduccion a <span>HTML:5</span></h1>
<p class="smal font-500">Aqui podras ver un complemento basico de lo que te encontraras en tu camino de aprendisaje como utilidades</p>
</section>
<!--Into-->
<section class="temas flex justify-center items-center pa-4 white">
<div class="w-full h-full pa-10 flex flex-row-wrap items-center card rouded-16">
<div class="flex flex-col-wrap gap-10">
<!--Titulo introductorio-->
<section class="flex gap-8 flex-row-wrap items-center">
<div class="pa-4 flex justify-center items-center bg-white rouded">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 50 50">
<path d="M 45.273438 2.324219 C 45.085938 2.117188 44.816406 2 44.535156 2 L 5.464844 2 C 5.183594 2 4.914063 2.117188 4.726563 2.324219 C 4.535156 2.53125 4.441406 2.808594 4.46875 3.089844 L 7.988281 42.515625 C 8.023438 42.929688 8.3125 43.273438 8.710938 43.390625 L 24.722656 47.960938 C 24.808594 47.988281 24.902344 48 24.996094 48 C 25.089844 48 25.179688 47.988281 25.269531 47.960938 L 41.292969 43.390625 C 41.691406 43.273438 41.976563 42.929688 42.015625 42.515625 L 45.53125 3.089844 C 45.558594 2.808594 45.464844 2.53125 45.273438 2.324219 Z M 36.847656 15.917969 L 18.035156 15.917969 L 18.484375 21.007813 L 36.394531 21.007813 L 35.050781 36.050781 L 24.992188 39.089844 L 24.894531 39.058594 L 14.953125 36.046875 L 14.410156 29.917969 L 19.28125 29.917969 L 19.492188 32.296875 L 25.050781 33.460938 L 30.507813 32.296875 L 31.089844 25.859375 L 14.046875 25.859375 L 12.722656 11.054688 L 37.28125 11.054688 Z"></path>
</svg>
</div>
<h5 class="smal balance bold ">Intoducion a html</h5>
</section>
<p class="balance text-14 font-400">
En el vasto mundo de la creación web, HTML (HyperText Markup Language) es el lenguaje fundamental que da estructura y
significado a tus páginas web. Desde la organización del contenido hasta la presentación visual, HTML es la base sobre
la cual se construye la experiencia digital que deseas ofrecer a tus visitantes.
</p>
</div>
<!--Segunda plataforma-->
<div class="flex flex-col-wrap gap-10">
<h5 class="smal bold">¿Qué es HTML?</h5>
<p class="text-14 balance font-400">HTML es un lenguaje de marcado que utiliza una
serie de etiquetas para definir la estructura y el
contenido de una página web. Estas etiquetas
permiten a los navegadores interpretar y renderizar el
contenido de manera coherente, independientemente del dispositivo o del software utilizado
para acceder a la página.
</p>
</div>
</div>
</section>
<!--Recomendaciones-->
<section class="recursos flex justify-center items-center pa-4 white">
<div class="w-full h-full pa-10 flex flex-col-wrap justify-around items-center card gap-10 rouded-16">
<!--Elementos recomendados-->
<section class="flex flex-col-wrap gap-20">
<h6 class="medium balance">Recomendaciones a aprender</h6>
<ul class="flex flex-row-wrap gap-10 justify-center list-none">
<li>
<a href="https://developer.mozilla.org/en-US/">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 50 50">
<path fill-rule="evenodd" d="M 42 6 L 39 40 L 25 44 L 11 40 L 8 6 Z M 16.800781 28 L 20.800781 28 L 20.898438 30.5 L 25 31.898438 L 29.101563 30.5 L 29.398438 26 L 20.601563 26 L 20.398438 22 L 29.601563 22 L 29.898438 18 L 16.101563 18 L 15.800781 14 L 34.101563 14 L 33.601563 22 L 32.898438 33.5 L 25 36.101563 L 17.101563 33.5 Z"></path>
</svg>
</div>
</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 50 50">
<path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z"></path>
</svg>
</div>
</a>
</li>
</ul>
</section>
<!--Recomendados a futuro-->
<section class="flex flex-row-wrap gap-20 justify-center">
<div class="w-full flex justify-center">
<h6 class="medium balance">Recomendaciones a futuro</h6>
</div>
<ol class="flex flex-row-wrap gap-10 justify-center list-none">
<li>
<a href="https://angular.io">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 50 50">
<path d="M 24.929688 2.0019531 C 24.819813 2.0024531 24.709016 2.0206406 24.603516 2.0566406 L 3.671875 9.3417969 C 3.227875 9.4957969 2.9498125 9.93925 3.0078125 10.40625 L 6.3164062 37.529297 C 6.3554062 37.850297 6.5450781 38.133109 6.8300781 38.287109 L 24.478516 47.878906 C 24.626516 47.959906 24.791078 48 24.955078 48 C 25.120078 48 25.286547 47.958953 25.435547 47.876953 L 43.173828 38.154297 C 43.455828 37.999297 43.647547 37.717438 43.685547 37.398438 L 46.992188 10.277344 C 47.050187 9.8083437 46.769312 9.3609844 46.320312 9.2089844 L 25.253906 2.0527344 C 25.148906 2.0177344 25.039562 2.0014531 24.929688 2.0019531 z M 25 7 L 38 35 L 33.5625 35 L 30.78125 29.007812 L 19.21875 29.007812 L 16.4375 35 L 12 35 L 25 7 z M 25 16.5 L 21.080078 25 L 28.919922 25 L 25 16.5 z"></path>
</svg>
</div>
</a>
</li>
<li>
<a href="https://react.dev">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 50 50">
<path d="M 34.554688 3.984375 C 33.775003 3.9581582 32.958884 4.0940926 32.140625 4.359375 C 30.504109 4.889941 28.789203 5.9238848 27.029297 7.3554688 C 26.339589 7.9165071 25.643623 8.5578288 24.945312 9.2382812 C 24.262398 8.5751039 23.580733 7.9509974 22.90625 7.4023438 C 21.147758 5.9719089 19.4375 4.9375672 17.804688 4.4082031 C 16.171878 3.8788386 14.547223 3.8624356 13.212891 4.6328125 C 11.878558 5.4031893 11.080619 6.8173558 10.722656 8.4960938 C 10.364693 10.174832 10.404125 12.173992 10.763672 14.412109 C 10.888559 15.189511 11.066671 16.005078 11.269531 16.835938 C 10.507095 17.067004 9.7666767 17.309955 9.0800781 17.578125 C 7.0079817 18.387438 5.2934468 19.355663 4.0449219 20.507812 C 2.7963969 21.659962 1.9902344 23.058304 1.9902344 24.59375 C 1.9902344 26.129196 2.7963969 27.525585 4.0449219 28.677734 C 5.2934468 29.829884 7.0079817 30.800062 9.0800781 31.609375 C 9.8142516 31.896126 10.609118 32.154326 11.429688 32.398438 C 11.134531 33.501278 10.895394 34.571467 10.732422 35.585938 C 10.372587 37.825853 10.334588 39.825265 10.693359 41.507812 C 11.052134 43.19036 11.850478 44.612534 13.191406 45.386719 C 14.532336 46.160905 16.164264 46.141894 17.800781 45.611328 C 19.437297 45.080762 21.15025 44.048772 22.910156 42.617188 C 23.593512 42.061316 24.284757 41.427206 24.976562 40.753906 C 25.671996 41.431263 26.366006 42.068338 27.052734 42.626953 C 28.811227 44.057387 30.523438 45.089776 32.15625 45.619141 C 33.789061 46.148505 35.413715 46.164908 36.748047 45.394531 C 38.082379 44.624154 38.878366 43.209988 39.236328 41.53125 C 39.59429 39.852512 39.554857 37.855304 39.195312 35.617188 C 39.031899 34.599965 38.792614 33.526227 38.496094 32.419922 C 39.343769 32.169866 40.163744 31.904721 40.919922 31.609375 C 42.992018 30.800062 44.706553 29.829884 45.955078 28.677734 C 47.203603 27.525585 48.009766 26.129196 48.009766 24.59375 C 48.009766 23.058304 47.203603 21.659963 45.955078 20.507812 C 44.706553 19.355663 42.992018 18.387438 40.919922 17.578125 C 40.22347 17.306107 39.471688 17.059992 38.697266 16.826172 C 38.901775 15.990221 39.083345 15.168805 39.208984 14.386719 C 39.568819 12.146804 39.606825 10.145439 39.248047 8.4628906 C 38.889279 6.7803434 38.088976 5.3601244 36.748047 4.5859375 C 36.077582 4.1988452 35.334372 4.0105918 34.554688 3.984375 z M 34.462891 6.0195312 C 34.952154 6.03291 35.369535 6.1493386 35.726562 6.3554688 C 36.440618 6.7677287 36.968419 7.5700924 37.25 8.890625 C 37.531581 10.211156 37.521848 11.99533 37.189453 14.064453 C 37.075647 14.772878 36.910402 15.52369 36.722656 16.292969 C 34.677151 15.800695 32.435744 15.435401 30.046875 15.220703 C 28.847638 13.559329 27.615404 12.045781 26.373047 10.703125 C 27.030182 10.061662 27.683063 9.4617259 28.320312 8.9433594 C 29.946026 7.6209332 31.485126 6.7210962 32.769531 6.3046875 C 33.411734 6.0964824 33.973627 6.0061525 34.462891 6.0195312 z M 15.486328 6.0253906 C 15.978419 6.0116533 16.541491 6.1017415 17.185547 6.3105469 C 18.473657 6.7281576 20.015452 7.6275969 21.642578 8.9511719 C 22.267037 9.4591336 22.905298 10.047651 23.548828 10.673828 C 22.297283 12.027473 21.054862 13.55414 19.847656 15.230469 C 17.468889 15.449074 15.236606 15.81635 13.201172 16.310547 C 13.014826 15.545537 12.849558 14.798586 12.736328 14.09375 C 12.403642 12.02283 12.39534 10.238404 12.677734 8.9140625 C 12.960128 7.5897208 13.492238 6.7813032 14.212891 6.3652344 C 14.573216 6.1572002 14.994237 6.0391279 15.486328 6.0253906 z M 24.976562 12.142578 C 25.791172 13.029071 26.605956 13.99916 27.414062 15.042969 C 26.620033 15.009861 25.816288 14.990234 25 14.990234 C 24.167457 14.990234 23.34841 15.010498 22.539062 15.044922 C 23.347352 14.000306 24.16175 13.029737 24.976562 12.142578 z M 25 17.009766 C 26.359894 17.009766 27.685348 17.065647 28.974609 17.160156 C 29.86173 18.434311 30.728648 19.786055 31.554688 21.216797 C 32.280504 22.473948 32.937328 23.729163 33.535156 24.96875 C 32.931017 26.224782 32.263184 27.496972 31.527344 28.771484 C 30.879609 29.893393 30.20319 30.958949 29.515625 31.986328 C 28.059313 32.10805 26.550303 32.175781 25 32.175781 C 23.412375 32.175781 21.869462 32.104031 20.380859 31.976562 C 19.704742 30.963955 19.039735 29.91454 18.402344 28.810547 C 17.668186 27.538949 17.003577 26.269079 16.400391 25.015625 C 17.006106 23.755092 17.673701 22.47818 18.412109 21.199219 C 19.233818 19.775977 20.098207 18.432055 20.980469 17.164062 C 22.283609 17.067424 23.62445 17.009766 25 17.009766 z M 31.548828 17.410156 C 33.197299 17.615841 34.745083 17.901405 36.185547 18.244141 C 35.758129 19.645287 35.231654 21.108808 34.59375 22.619141 C 34.179567 21.820719 33.750599 21.019585 33.287109 20.216797 C 32.725422 19.243926 32.140408 18.316416 31.548828 17.410156 z M 18.34375 17.425781 C 17.764654 18.315097 17.194836 19.224578 16.644531 20.177734 C 16.175094 20.990823 15.737221 21.802736 15.318359 22.611328 C 14.68596 21.110075 14.162654 19.654877 13.738281 18.261719 C 15.168002 17.918363 16.706766 17.633813 18.34375 17.425781 z M 38.164062 18.775391 C 38.872944 18.989877 39.557566 19.21371 40.185547 19.458984 C 42.0957 20.205046 43.60665 21.088493 44.585938 21.992188 C 45.565224 22.895882 45.990234 23.757696 45.990234 24.59375 C 45.990234 25.429804 45.565225 26.291619 44.585938 27.195312 C 43.60665 28.099007 42.0957 28.982454 40.185547 29.728516 C 39.487698 30.001079 38.72096 30.248243 37.923828 30.482422 C 37.355199 28.723643 36.629408 26.888772 35.765625 25.015625 C 36.758785 22.865083 37.561088 20.768289 38.164062 18.775391 z M 11.802734 18.785156 C 12.398803 20.758169 13.190811 22.834118 14.169922 24.962891 C 13.30047 26.846955 12.571087 28.692254 12 30.460938 C 11.23096 30.232919 10.490212 29.992451 9.8144531 29.728516 C 7.9042995 28.982454 6.39335 28.099007 5.4140625 27.195312 C 4.434775 26.291618 4.0097656 25.429804 4.0097656 24.59375 C 4.0097656 23.757696 4.434775 22.895882 5.4140625 21.992188 C 6.39335 21.088493 7.9042995 20.205046 9.8144531 19.458984 C 10.432774 19.217483 11.105915 18.996837 11.802734 18.785156 z M 25 20 C 22.250421 20 20 22.250421 20 25 C 20 27.749579 22.250421 30 25 30 C 27.749579 30 30 27.749579 30 25 C 30 22.250421 27.749579 20 25 20 z M 15.341797 27.365234 C 15.762496 28.177853 16.200028 28.993283 16.671875 29.810547 C 17.041048 30.449973 17.418073 31.072393 17.800781 31.683594 C 16.457817 31.497372 15.181231 31.261605 13.982422 30.982422 C 14.363652 29.81481 14.819744 28.602796 15.341797 27.365234 z M 34.619141 27.365234 C 35.143284 28.605725 35.599609 29.819681 35.982422 30.990234 C 34.779808 31.269089 33.499292 31.504052 32.152344 31.689453 C 32.540071 31.070779 32.922982 30.44057 33.296875 29.792969 C 33.765252 28.981717 34.201083 28.171917 34.619141 27.365234 z M 13.40625 32.923828 C 15.216074 33.352568 17.177716 33.681912 19.257812 33.896484 C 20.64638 35.904859 22.092967 37.709497 23.548828 39.287109 C 22.897813 39.921859 22.252566 40.517583 21.621094 41.03125 C 19.99538 42.353677 18.454326 43.251559 17.169922 43.667969 C 15.885516 44.084378 14.926946 44.029446 14.212891 43.617188 C 13.498835 43.204927 12.972987 42.402563 12.691406 41.082031 C 12.409825 39.761499 12.417606 37.979279 12.75 35.910156 C 12.900793 34.971492 13.12615 33.966374 13.40625 32.923828 z M 36.560547 32.931641 C 36.842987 33.980548 37.069013 34.98935 37.220703 35.933594 C 37.553389 38.004513 37.56169 39.788939 37.279297 41.113281 C 36.996903 42.437623 36.468699 43.247993 35.748047 43.664062 C 35.027395 44.080132 34.059594 44.13441 32.771484 43.716797 C 31.483374 43.299186 29.941578 42.399747 28.314453 41.076172 C 27.678439 40.558811 27.028726 39.958258 26.373047 39.318359 C 27.838664 37.73459 29.295467 35.920758 30.693359 33.900391 C 32.778701 33.687251 34.745791 33.359875 36.560547 32.931641 z M 21.867188 34.101562 C 22.893951 34.157518 23.934244 34.195312 25 34.195312 C 26.030504 34.195312 27.037063 34.159787 28.03125 34.107422 C 27.014961 35.478593 25.979034 36.725149 24.947266 37.847656 C 23.916125 36.722751 22.882144 35.473968 21.867188 34.101562 z" clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
</div>
</a>
</li>
<li>
<a href="https://vuejs.org">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32">
<path d="M 9.9121094 2 L 16 15.390625 L 16 15.5 L 22 2 L 16 2 L 9.9121094 2 z M 13.019531 4 L 16 4 L 16 10.498047 L 15.986328 10.529297 L 13.019531 4 z M 4 6 L 16 31 L 28 6 L 22 6 L 16 19 L 10 6 L 4 6 z M 23.279297 8 L 24.822266 8 L 16 26.378906 L 16 23.773438 L 17.816406 19.839844 L 23.279297 8 z"></path>
</svg>
</div>
</a>
</li>
<li>
<a href="https://astro.build">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 64 64">
<linearGradient id="gMG_mkMd2oq4lWjgJJZtFa_lckHFUP7nJhG_gr1" x1="32.125" x2="32.125" y1="44.574" y2="60.885" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><path fill="url(#gMG_mkMd2oq4lWjgJJZtFa_lckHFUP7nJhG_gr1)" d="M32,47c-4.272,0-7.909-0.94-9.341-2.259C22.336,47.076,22.248,51.248,25,54 c0,0,0.615-3.824,3.5-3c1.75,0.5,1.25,3,1.25,4.875C29.75,56.875,30,59,34,61c0,0-2-5,4-8c4.198-2.099,3.989-6.15,3.486-8.397 C40.165,45.995,36.421,47,32,47z"></path><linearGradient id="gMG_mkMd2oq4lWjgJJZtFb_lckHFUP7nJhG_gr2" x1="32" x2="32" y1="2.824" y2="62.426" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><path fill="url(#gMG_mkMd2oq4lWjgJJZtFb_lckHFUP7nJhG_gr2)" d="M51,42c-0.099,0-0.197-0.015-0.294-0.044l-13-4c-0.338-0.104-0.596-0.379-0.679-0.723 l-5.103-21.259L25.963,37.27c-0.09,0.319-0.332,0.574-0.646,0.679l-12,4c-0.355,0.12-0.745,0.029-1.012-0.229 c-0.268-0.26-0.369-0.646-0.264-1.004l11-37C23.168,3.291,23.558,3,24,3h16c0.442,0,0.832,0.291,0.959,0.715l11,37 c0.104,0.354,0.007,0.736-0.255,0.996C51.514,41.898,51.26,42,51,42z M38.839,36.212l10.671,3.283L39.254,5H24.746l-10.24,34.444 l9.675-3.226L30,15.436c0.249-0.891,1.055-1.451,1.963-1.461c0.925,0.018,1.691,0.634,1.907,1.533L38.839,36.212z"></path><linearGradient id="gMG_mkMd2oq4lWjgJJZtFc_lckHFUP7nJhG_gr3" x1="32.126" x2="32.126" y1="2.824" y2="62.426" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1a6dff"></stop><stop offset="1" stop-color="#c822ff"></stop></linearGradient><path fill="url(#gMG_mkMd2oq4lWjgJJZtFc_lckHFUP7nJhG_gr3)" d="M33.996,61.999c-0.151,0-0.303-0.034-0.443-0.104c-3.187-1.594-4.803-3.619-4.803-6.02 c0-0.351,0.017-0.722,0.033-1.099c0.069-1.535,0.07-2.636-0.558-2.814c-0.593-0.171-0.918-0.027-1.11,0.094 c-0.718,0.457-1.063,1.703-1.128,2.104c-0.06,0.37-0.322,0.677-0.68,0.792c-0.356,0.118-0.749,0.021-1.015-0.244 c-3.074-3.074-2.964-7.649-2.624-10.103c0.051-0.369,0.303-0.679,0.652-0.805c0.35-0.125,0.741-0.047,1.016,0.206 C24.379,44.966,27.534,46,32,46c4.453,0,7.777-1.049,8.76-2.086c0.254-0.268,0.635-0.373,0.991-0.275s0.629,0.385,0.71,0.745 c0.961,4.288-0.502,7.754-4.014,9.511c-4.981,2.49-3.681,6.313-3.517,6.74c0.148,0.385,0.046,0.825-0.26,1.103 C34.482,61.909,34.24,61.999,33.996,61.999z M27.724,49.885c0.34,0,0.692,0.051,1.051,0.153c2.196,0.628,2.087,3.056,2.007,4.828 c-0.016,0.346-0.031,0.687-0.031,1.009c0,0.476,0,1.736,1.946,3.177c-0.002-2.017,0.813-4.924,4.856-6.946 c2.722-1.361,3.322-3.673,3.183-5.761C38.738,47.376,35.556,48,32,48c-3.382,0-6.477-0.579-8.489-1.537 c-0.062,1.66,0.14,3.727,1.153,5.47c0.308-0.578,0.75-1.165,1.378-1.564C26.547,50.047,27.116,49.885,27.724,49.885z"></path><linearGradient id="gMG_mkMd2oq4lWjgJJZtFd_lckHFUP7nJhG_gr4" x1="32.023" x2="32.023" y1="6.948" y2="36.278" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8ab4ff"></stop><stop offset="1" stop-color="#e492ff"></stop></linearGradient><path fill="url(#gMG_mkMd2oq4lWjgJJZtFd_lckHFUP7nJhG_gr4)" d="M37.762,7H26.238l-8.72,29.332l5.023-1.675l5.533-19.76c0.483-1.728,2.037-2.903,3.868-2.922 l0.03,0l0.03,0.001c1.85,0.035,3.382,1.267,3.814,3.066l4.703,19.595l6.011,1.849L37.762,7z"></path>
</svg>
</div>
</a>
</li>
<li>
<a href="https://bun.sh">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg height="32px" width="32px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#000000;} </style> <g> <path class="st0" d="M496.898,219.081C455.176,128.09,338.844,109.334,311.415,84.319c-11.584-10.58-23.31-19.091-36.122-23.544 c-0.254,1.511-0.436,3.023-0.436,4.585c0,3.561,0.669,7.314,2.069,11.301c1.4,3.976,3.52,8.166,6.33,12.456 c5.62,8.572,13.978,17.488,24.041,25.928c20.126,16.941,46.956,32.086,71.272,41.793c5.386,2.151,8.013,8.258,5.863,13.644 c-2.171,5.387-8.278,8.004-13.654,5.853c-17.266-6.908-35.372-16.128-52.13-26.962c-16.748-10.844-32.126-23.23-43.872-36.792 c-7.812-9.048-14.03-18.655-17.652-28.961c-2.078-5.894-3.276-12.01-3.266-18.259c-0.01-2.637,0.234-5.285,0.669-7.933 c-3.681,0.081-7.282,0.487-10.782,1.207c-0.721,5.144-1.126,10.489-1.126,16.038c0,17.944,3.783,37.614,10.479,56.563 c6.684,18.959,16.25,37.198,27.5,52.353c3.459,4.676,2.475,11.24-2.171,14.699c-4.666,3.448-11.239,2.475-14.688-2.192 c-12.639-17.031-23.067-36.984-30.442-57.87c-7.01-19.882-11.188-40.587-11.594-60.53c-6.36,7.872-12.112,15.916-17.052,24.062 c-14.577,23.94-22.55,48.58-22.53,71.282c0,1.228,0.021,2.445,0.072,3.652c0.213,5.792-4.301,10.671-10.094,10.884 c-5.792,0.224-10.671-4.3-10.894-10.092c-0.051-1.471-0.081-2.952-0.081-4.444c0.02-26.456,8.764-53.378,23.615-78.859 c-42.29,22.114-137.065,48.894-170.277,124.902c-35.99,82.431-6.045,174.183,103.874,214.789 c36.641,13.522,82.227,20.703,137.35,20.703c55.112,0,100.709-7.182,137.349-20.703 C502.944,393.264,534.38,300.842,496.898,219.081z"></path> </g> </g></svg>
</div>
</a>
</li>
<li>
<a href="https://nodejs.org/en">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 32 32">
<path d="M 15.994141 3 C 15.629141 3 15.264219 3.0895313 14.949219 3.2695312 L 5.0390625 8.9902344 C 4.3990625 9.3602344 4 10.060781 4 10.800781 L 4 21.179688 C 4 21.929688 4.3990625 22.620234 5.0390625 22.990234 L 7.640625 24.490234 C 8.900625 25.110234 9.3499219 25.109375 9.9199219 25.109375 C 11.789922 25.109375 12.859375 23.979531 12.859375 22.019531 L 12.859375 11.310547 C 12.859375 11.150547 12.730312 11.019531 12.570312 11.019531 L 11.320312 11.019531 C 11.150313 11.019531 11.029297 11.150547 11.029297 11.310547 L 11.029297 22.009766 C 11.029297 22.889766 10.120391 23.749531 8.6503906 23.019531 L 5.9296875 21.449219 C 5.8296875 21.399219 5.7695313 21.289687 5.7695312 21.179688 L 5.7695312 10.810547 C 5.7695312 10.690547 5.8296875 10.589297 5.9296875 10.529297 L 15.839844 4.8105469 C 15.929844 4.7505469 16.050391 4.7505469 16.150391 4.8105469 L 26.060547 10.529297 C 26.160547 10.589297 26.220703 10.690781 26.220703 10.800781 L 26.220703 21.179688 C 26.220703 21.289687 26.160313 21.399219 26.070312 21.449219 L 16.150391 27.179688 C 16.060391 27.229688 15.929844 27.229688 15.839844 27.179688 L 13.289062 25.669922 C 13.219062 25.619922 13.120781 25.610391 13.050781 25.650391 C 12.340781 26.050391 12.210781 26.100078 11.550781 26.330078 C 11.390781 26.380078 11.140625 26.479766 11.640625 26.759766 L 14.949219 28.720703 C 15.269219 28.900703 15.630234 29 15.990234 29 C 16.360234 29 16.719062 28.900703 17.039062 28.720703 L 26.960938 22.990234 C 27.600938 22.620234 28 21.929688 28 21.179688 L 28 10.810547 C 28 10.060547 27.600938 9.37 26.960938 9 L 17.039062 3.2695312 C 16.724063 3.0895313 16.359141 3 15.994141 3 z M 18.660156 11.005859 C 15.830156 11.005859 14.140625 12.205078 14.140625 14.205078 C 14.140625 16.375078 15.819062 16.974141 18.539062 17.244141 C 21.789062 17.564141 22.039062 18.045547 22.039062 18.685547 C 22.039062 19.785547 21.150547 20.255859 19.060547 20.255859 C 16.430547 20.255859 15.850156 19.594922 15.660156 18.294922 C 15.640156 18.154922 15.520859 18.054688 15.380859 18.054688 L 14.089844 18.054688 C 13.929844 18.054688 13.810547 18.185938 13.810547 18.335938 C 13.810547 20.005937 14.720547 21.994141 19.060547 21.994141 C 22.200547 21.994141 24 20.755703 24 18.595703 C 24 16.455703 22.549766 15.884609 19.509766 15.474609 C 16.419766 15.074609 16.109375 14.864531 16.109375 14.144531 C 16.109375 13.544531 16.380156 12.755859 18.660156 12.755859 C 20.690156 12.755859 21.449766 13.194453 21.759766 14.564453 C 21.789766 14.694453 21.899062 14.794922 22.039062 14.794922 L 23.330078 14.794922 C 23.410078 14.794922 23.479063 14.755313 23.539062 14.695312 C 23.589062 14.645313 23.619375 14.564609 23.609375 14.474609 C 23.409375 12.114609 21.840156 11.005859 18.660156 11.005859 z"></path>
</svg>
</div>
</a>
</li>
<li>
<a href="https://deno.com">
<div class="pa-2 flex justify-center items-center bg-white rouded link-hover-scale-1-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 48 48">
<path fill="#212121" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z"></path><path fill="#fff" d="M10.25,25.625c-0.012-0.279,0.5-6.375,9.875-8.25c0,0,10.698-0.832,11.786,7.897L33.375,42 c0,0-11.875,2.5-12.625,1.25s0.75-14.625,0.75-14.625S10.5,31.25,10.25,25.625z"></path><rect width=".5" height="7.64" x="21.611" y="3.993" fill="#fff" transform="rotate(-3.533 21.865 7.81)"></rect><rect width=".5" height="40.452" x="24.625" y="3.961" fill="#fff" transform="rotate(-3.533 24.88 24.184)"></rect><rect width=".5" height="2.38" x="17.967" y="12.373" fill="#fff" transform="rotate(-3.533 18.21 13.552)"></rect><rect width=".5" height="5.01" x="19.863" y="9.37" fill="#fff" transform="rotate(-3.533 20.114 11.87)"></rect><rect width=".5" height="4.133" x="15.36" y="33.996" fill="#fff" transform="rotate(-3.533 15.615 36.055)"></rect><rect width=".5" height="27.928" x="16.339" y="5.598" fill="#fff" transform="rotate(-3.533 16.593 19.56)"></rect><rect width=".5" height="4.258" x="11.449" y="35.371" fill="#fff" transform="rotate(-3.533 11.708 37.502)"></rect><rect width=".5" height="6.011" x="10.946" y="26.369" fill="#fff" transform="rotate(-3.533 11.204 29.378)"></rect><rect width=".5" height="6.763" x="9.924" y="9.494" fill="#fff" transform="rotate(-3.533 10.177 12.874)"></rect><rect width=".5" height="8.266" x="12.312" y="14.992" fill="#fff" transform="rotate(-3.533 12.563 19.12)"></rect><rect width=".5" height="9.518" x="7.047" y="26.241" fill="#fff" transform="rotate(-3.533 7.298 30.982)"></rect><rect width=".5" height="8.516" x="6.281" y="14.367" fill="#fff" transform="rotate(-3.533 6.536 18.627)"></rect><rect width=".5" height="6.137" x="9.267" y="31.494" fill="#fff" transform="rotate(-3.533 9.528 34.574)"></rect><rect width=".5" height="17.158" x="8.362" y="11.359" fill="#fff" transform="rotate(-3.533 8.617 19.94)"></rect><rect width=".5" height="5.26" x="25.909" y="9.995" fill="#fff" transform="rotate(-3.533 26.172 12.625)"></rect><rect width=".5" height="9.017" x="27.654" y="3.991" fill="#fff" transform="rotate(-3.533 27.9 8.494)"></rect><rect width=".5" height="31.811" x="30.745" y="10.22" fill="#fff" transform="rotate(-3.533 30.998 26.118)"></rect><rect width=".5" height="8.266" x="31.708" y="5.242" fill="#fff" transform="rotate(-3.533 31.955 9.368)"></rect><rect width=".5" height="13.526" x="33.971" y="6.862" fill="#fff" transform="rotate(-3.533 34.225 13.619)"></rect><rect width=".5" height="18.41" x="36.176" y="7.732" fill="#fff" transform="rotate(-3.533 36.428 16.93)"></rect><rect width=".5" height="8.015" x="39.147" y="28.617" fill="#fff" transform="rotate(-3.533 39.384 32.604)"></rect><rect width=".5" height="7.389" x="38.339" y="15.868" fill="#fff" transform="rotate(-3.533 38.583 19.552)"></rect><rect width=".5" height="21.666" x="40.579" y="12.604" fill="#fff" transform="rotate(-3.533 40.83 23.428)"></rect><circle cx="17.923" cy="21.859" r=".742" fill="#212121"></circle><circle cx="14.404" cy="21.38" r=".646" fill="#212121"></circle><path fill="#212121" d="M24,3C12.42,3,3,12.421,3,24s9.42,21,21,21s21-9.421,21-21S35.58,3,24,3z M22.026,42.896 c0.78-4.999,0.275-11.096,0.054-13.234c1.277-0.349,2.166-0.684,2.284-0.731c0.514-0.201,0.769-0.78,0.568-1.295 c-0.201-0.515-0.78-0.772-1.295-0.568c-2.475,0.966-9.415,2.804-11.768-0.243c-0.718-0.929-0.854-1.962-0.404-3.069 c1.024-2.522,4.674-4.836,8.491-5.381c5.454-0.78,10.296,3.085,10.97,7.063c0.589,3.477,1.493,13.004,1.721,15.459 C30.05,42.232,27.115,43,24,43C23.333,43,22.675,42.964,22.026,42.896z M34.552,39.789c-0.319-3.376-1.106-11.443-1.655-14.685 c-0.829-4.895-6.455-9.678-13.225-8.71c-4.538,0.648-8.769,3.428-10.061,6.609c-0.716,1.763-0.477,3.554,0.674,5.044 c2.204,2.855,6.541,2.706,9.828,2.071c0.219,2.251,0.644,7.929-0.062,12.462C11.464,40.758,5,33.122,5,24C5,13.523,13.523,5,24,5 s19,8.523,19,19C43,30.574,39.642,36.377,34.552,39.789z"></path>
</svg>
</div>
</a>
</li>
</ol>
</section>
<!--Rario de uso-->
<section>
<div class="flex flex-col-wrap gap-4">
<p class="medium bold balance">Radio de agrado mundial de <br> tecnologias de creacion web</p>
<table class="flex flex-row-wrap justify-center smal py-t-20 gap-20">
<tr>
<td>Nombre</td>
<td>Frecuencia</td>
</tr>
<div class="flex flex-col-wrap gap-8">
<tr>
<th>Angular</th>
<th>10%</th>
</tr>
<tr>
<th>React</th>
<th>50%</th>
</tr>
<tr>
<th>Vue</th>
<th>40%</th>
</tr>
</div>
</table>
</div>
</section>
</div>
</section>
<!--Contacto-->
<section class="contact flex justify-center items-center pa-4">
<div class="w-full h-full pa-10 flex flex-row-wrap items-center justify-center card-butom rouded-16 bg-filter-2-1 kit-filter">
<a href="https://github.com/CoollbreackerzSdo">
<button class="pointer github-buttom p-y-15-x-25 rouded-15">Github</button>
</a>
</div>
</section>
<!--Inquietudes-->
<section class="form-mini flex justify-center items-center pa-4 white">
<div class="w-full h-full pa-10 flex flex-col-wrap justify-around items-center card gap-10 rouded-16">
<section class="block">
<span class="medium bold tex-center">Envia tus inquietudes</span>
</section>
<!--No es mi fuerte hacer formularios la verdad-->
<section>
<form class="flex flex-col-wrap gap-10">
<section>
<div class="flex flex-col-wrap justify-center gap-10">
<input class="out-none pa-4 rouded transparent" placeholder="Email" type="text"/>
<input class="out-none pa-4 rouded transparent" placeholder="Mesaje" type="text"/>
</div>
</section>
<button type="submit" class="border-none out-none smal bold tex-center pa-4 rouded pointer">Comunicar</button>
</form>
</section>
</div>
</section>
</div>
<style>
:root{
--none-0:0px;
/*Colores*/
--white:#E8F7F1;
}
body{
background-image:url("https://i0.hippopx.com/photos/702/980/28/sleep-bed-sheets-covers-preview.jpg");
background-size: cover;
background-repeat: no-repeat;
}
*{
box-sizing: border-box;
margin: var(--none-0);
padding: var(--none-0);
font-family: Rubik , 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.out-none{
outline: none;
}
.pointer{
cursor: pointer;
}
.white{
color: var(--white);
}
.bg-transparent{
background-color: transparent;
}
.bg-white{
background-color: var(--white);
}
.bg-filter-2-1{
backdrop-filter: blur(2.1px);
}
.block{
display: block;
}
.flex{
display: flex;
}
.flex-row-wrap{
flex-flow: row wrap;
}
.flex-col-wrap{
flex-flow: column wrap;
}
.grid{
display: grid;
}
.grid-col-6{
grid-template-columns: repeat(6,1fr);
}
.grid-row-6{
grid-template-rows: repeat(6,1fr);
}
.gid-col-gap-10{
column-gap: 10px;
}
.justify-center{
justify-content: center;
}
.justify-around{
justify-content: space-around;
}
.items-center{
align-items: center;
}
.self-center{
align-self: center;
}
.gap-20{
gap: 20px;
}
.gap-10{
gap: 10px;
}
.gap-8{
gap: 8px;
}
.gap-4{
gap: 4px;
}
.title{
grid-column: 2 / 6;
}
.temas{
grid-column: 1 / 3;
grid-row: 2 / 7;
}
.recursos{
grid-column: 3 / 6;
grid-row: 2 / 7;
}
.form-mini{
grid-column: 6 / 7;
grid-row: 3 / 7;
}
.contact{
grid-column: 6 / 7;
grid-row: 2 / 3;
}
.smal{
font-size: 1rem;
}
.text-14{
font-size: 14px;
}
.medium{
font-size: 1.5rem;
}
.large{
font-size: 1.8rem;
}
.balance{
text-wrap: balance;
}
.tex-center{
text-align: center;
}
.bold{
font-weight: bold;
}
.border-none{
border: none;
}
.rouded{
border-radius: 4px;
}
.rouded-15{
border-radius: 15px;
}
.rouded-16{
border-radius: 16px;
}
.h-full{
height: 100%;
}
.h-svh-full{
height:100svh;
}
.w-full{
width: 100%;
}
.pa-2{
padding:2px;
}
.pa-4{
padding: 8px;
}
.pa-10{
padding: 20px;
}
.pa-12{
padding: 12px;
}
.card{
background: #ffffff14;
box-shadow: 0 4px 30px #0000001a;
}
.card-butom{
background: #e8e8e8;
box-shadow: 0 4px 30px #0000001a;;
}
.kit-filter{
-webkit-backdrop-filter: blur(2.1px);
}
.link-hover-scale-1-2{
transition: ease-in 200ms;
}
.link-hover-scale-1-2:hover{
scale: 1.2;
transition: ease 100ms;
}
.list-none{
list-style: none;
}
input{
height: 40px;
}
.p-y-15-x-25{
padding: 15px 25px;
}
.github-buttom {
border: unset;
color: #212121;
z-index: 1;
background: #e8e8e8;
position: relative;
font-weight: 1000;
font-size: 17px;
-webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms;
overflow: hidden;
}
.github-buttom::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
border-radius: 15px;
background-color: #212121;
z-index: -1;
-webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms
}
.github-buttom:hover {
color: #e8e8e8;
}
.github-buttom:hover::before {
width: 100%;
}
.buttom-summit{
padding: 15px 25px;
border-color: transparent;
align-self: center;
}
</style>
</body>
</html>