-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
1583 lines (1436 loc) · 115 KB
/
post.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
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!-- ⊙⩌⨀
Ingresa a tu cuenta y gestiona todos tus movimientos a través de tu APP para facilitar todos tus movimientos. ¡Te llevamos a tu cuenta! 👇 IR A MI CUENTA
https://codepen.io/luisangelmaciel/pen/NWEqdbd
2006 - 2023 © LuisAngelMaciel, Inc.! Marketing Technology Stack
¿Quién hizo todo esto?
http://twitter.com/luisangelmaciel-->
<html lang="es-MX" dir="ltr" prefix="og: https://ogp.me/ns#" Content-Type="text/html" Content-Security-Policy="img-src" Cache-Control: max-age=31536000 Content-Encoding="gzip" class="no-js">
<head itemscope itemtype="#https://schema.org/WebSite">
<meta charset="UTF-8">
<title>Publicaciones</title>
<link rel="canonical" href="https://luisangelmaciel.github.io">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.google-analytics.com" />
<link rel="preconnect" href="https://fonts.gstatic.com ">
<link rel="stylesheet " href="https://fonts.googleapis.com/css2?family=Roboto&display=swap ">
<link rel="preload" as="font">
<link rel="mask-icon" href="icon/mask-icon.sgv" color="#666666">
<!-- Splash Screen for iPhone X (1125px x 2436px) <link rel="https://api.w.org/" href="wp-json/" /> -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="img/apple-touch-startup-image.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="icon/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" sizes="57x57" href="icon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="icon/apple/touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon-180x180.png">
<link rel="shortcut icon" href="favicon.png" sizes="192x192" type="IMG">
<link rel="icon" type="image/x-icon" href="favicon.ico" sizes="192x192" id="favicon" />
<link rel="icon" type="image/png " sizes="114x114 " href="icon/maskable_icon.png " purpose="any maskable ">
<link rel="icon" type="image/png " sizes="16x16" href="icon/icon-16x16.png" purpose="any ">
<link rel="icon" type="image/png " sizes="32x32" href="icon/icon-32x32.png" purpose="any ">
<link rel="icon" type="image/png " sizes="64x64" href="icon/icon64x64.png " purpose="any ">
<link rel="icon" type="image/png" sizes="96x96" href="icon/icon-96x96.png" purpose="any ">
<link rel="icon" type="image/png " sizes="128x128 " href="icon/icon128x128.png " purpose="any ">
<link rel="icon " type="image/png " sizes="144x144 " href="icon/icon144x144.png " purpose="any ">
<link rel="icon " type="image/png " sizes="152x152 " href="icon/icon152x152.png " purpose="any ">
<link rel="icon " type="image/png " sizes="512x512 " href="icon/icon512x512.png " purpose="any ">
<link rel="icon " type="image/png " sizes="192x192 " href="icon/icon192x192.png " purpose="any ">
<link rel="icon " type="image/png " sizes="256x256 " href="icon/icon256x256.png " purpose="any ">
<meta http-equiv="content-encoding" content="gzip">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="es-mx">
<meta http-equiv="X-UA-Compatible " content="IE=edge ">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="max-age=31536000 ">
<meta http-equiv="cache-control" content="no-cache,must-revalidate,public" />
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="vary-header" content="Accept-Encoding">
<meta http-equiv="Vary" content="Accept-Encoding" />
<meta http-equiv="HTTP Status Code" content="HTTP/1.1 200 OK" />
<meta http-equiv="expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<meta name="application-name" content="Hi! Luis Angel Maciel">
<meta name="theme-color" content="white" />
<meta name="mobile-web-app-capable " content="yes " />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="@luisangelmaciel">
<meta name="msapplication-navbutton-color" content="#017dbb">
<meta name="msapplication-TileImage" content="img/msapplication-TileImage.jpg">
<meta name="msapplication-TileColor" content="#017dbb">
<meta name="msapplication-allowDomainMetaTags" content="true">
<meta name="msapplication-config" content="https://luisangelmaciel.github.io" />
<meta name="msapplication-navbutton-color" content="#017dbb">
<meta name="msapplication-square70x70logo" content="img/msapplication-square70x70logo.png" />
<meta name="msapplication-square150x150logo" content="img/msapplication-square150x150logo.png" />
<meta name="msapplication-wide310x150logo" content="img/msapplication-wide310x150logo.png" />
<meta name="msapplication-square310x310logo" content="img/msapplication-square310x310logo" />
<meta name="msapplication-badge" content="frequency=1440; polling-uri=https://luisangelmaciel.github.io/polling.xml">
<meta name="msapplication-notification" content="frequency=1440;polling-uri=https://luisangelmaciel.github.io/polling.xml; cycle=1" />
<meta name="msapplication-tooltip" content="LuisAngelMaciel Love's Professional Web Development Blog">
<meta name="msapplication-task" content="name=Tags;action-uri=#!tags;icon-uri=./favicon.ico">
<meta name="msapplication-task" content="name=Calendar;action-uri=#!calendar;icon-uri=./favicon.ico">
<meta name="msapplication-task" content="name=Libraries;action-uri=#!libraries;icon-uri=./favicon.ico">
<meta name="msapplication-task" content="name=Presentations;action-uri=#!presentations;icon-uri=./favicon.ico">
<!-- Link, Facebook and Twitter integration -->
<meta name="generator " content="@LuisAngelMaciel ">
<meta name="rights" content="®@LuisAngelMaciel">
<meta name="description" content="Entusiasta en temas de emprendimiento, sexualidad, viajes, arte drag, investigación de mercados, interfaz y experiencias de usuario.
Mercadológo, diseñador y desarrollador web. ¿Qué quieres construir hoy? Un Sitio de negocios, una tienda de comercio electrónico, un portafolio, blog">
<meta name="keywords " content="portafolio, cv, desarrollador y mercadologo, curriculum vitae, luis angel maciel padilla, Desarrollador y diseñador web, diseñador de producto, Comercializador ">
<meta name="robots " content="max-snippet:-1, max-image-preview:large, max-video-preview:-1 ">
<meta name="robots" content="index, follow" />
<meta name="author" content="@LuisAngelMaciel">
<meta name="googlebot" content="max-snippet:[0],max-image-preview:[standard]" />
<meta name="googlebot" content="index, follow">
<meta name="googlebot-video" content="index" />
<meta name="googlebot-image" content="index" />
<meta name="googlebot-news" content="index, follow">
<meta name="google " content="nositelinkssearchbox " />
<meta name="google-site-verification" content="#" />
<meta property="og:locale " content="es_MX ">
<meta property="og:type " content="website ">
<meta property="og:type" content="club" />
<meta property="og:title " content=" Luis Angel Maciel ">
<meta property='og:description' content='Entusiasta en temas de emprendimiento, sexualidad, viajes, arte drag, investigación de mercados, interfaz y experiencias de usuario.
Mercadológo, diseñador y desarrollador web. ¿Qué quieres construir hoy? Un Sitio de negocios, una tienda de comercio electrónico, un portafolio, blog'>
<meta property="og:url " content="https://luisangelmaciel.github.io">
<meta property="og:site_name " content="Luis Angel Maciel">
<meta property="og:image " content="https://luisangelmaciel.github.io/img/og-image.png" />
<meta property="og:image:secure_url " content="https://luisangelmaciel.github.io/img/og-imageSecureUrl.png " />
<meta property="og:image:width " content="1080 " />
<meta property="og:image:height " content="400 " />
<meta property="og:image:alt" content="Desarrollador y diseñador web, diseñador de producto, Comercializador " />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:video" content="https://luisangelmaciel.github.io/video/og-video.swf " />
<meta property="og:video:secure_url " content="https://luisangelmaciel.github.io/video/og-videoSecure.swf " />
<meta property="og:video:type " content="website " />
<meta property="og:video:width " content="400 " />
<meta property="og:video:height " content="300 " />
<!-- Twitt card -->
<link rel="me " href="https://twitter.com/luisangelmaciel">
<meta property="twitter:card " content="summary ">
<meta property="twitter:site " content="@luisangelmaciel ">
<meta property="twitter:domain " content="https://www.luisangelmaciel.one">
<meta name="twitter:card " content="summary_large_image " />
<meta name="twitter:site " content="@luisangelmaciel " />
<meta name="twitter:title " content="@luisangelmaciel " />
<meta name="twitter:image " content="img/twitterimage.jpg " />
<meta name='twitter:description' content=' Desarrollador y diseñador web, diseñador de producto, Comercializador '>
<meta name="twitter:url " content="https://twitter.com/luisangelmaciel ">
<meta name="twitter:widgets:autoload " content="off ">
<meta name="twitter:widgets:border-color " content="#ff00ff ">
<meta name="twitter:widgets:theme " content="dark ">
<meta name="twitter:dnt " content="on ">
<meta name="twitter:label1 " content="Desarrollador y diseñador web, diseñador de producto, Comercializador ">
<meta name="twitter:data1 " content="Trabajemos juntos . ">
<meta name="twitter:player " content="https://luisangelmaciel.github.io/video/twitter_player.webp " />
<meta name="twitter:player:width " content="480 " />
<meta name="twitter:player:height " content="480 " />
<meta name="twitter:player:stream " content="https://luisangelmaciel.github.io/video/twitter_player_stream.webm " />
<meta name="twitter:player:stream:content_type " content="video/mp4 " />
<!-- Fonts -->
<link rel="preload " as="font-display: auto; ">
<link rel="preload " href="/lib/fonts/roboto-mono-v13-latin-500.woff2 " as="font " type="font/woff2 " crossorigin>
<link rel="preload " href="/lib/fonts/free-fa-brands-400.woff2 " as="font " type="font/woff2 " crossorigin>
<link rel="preload " href="/lib/fonts/free-fa-solid-900.woff2 " as="font " type="font/woff2 ">
<script src="https://luisangelmaciel.github.io/js/lazysizes.min.js" rel="preload " as="script " asyncc charset="utf-8 "></script>
<script src="https://luisangelmaciel.github.io/js/compressed.js"></script>
<script src="https://luisangelmaciel.github.io/preloader.js"></script>
<!-- Catálogo de iconos Fontawesome https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=regular&m=free -->
<script src="https://luisangelmaciel.github.io/js/fontawesome-1d9115e34a.js"></script>
<link rel="stylesheet " href="https://luisangelmaciel.github.io/css/style.css" media="all" as="style ">
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
elmnt.innerHTML = this.responseText;
}
if (this.status == 404) {
elmnt.innerHTML = "Page not found.";
}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
};
</script>
<style>
body {
margin: 0;
padding:o;
height: 100hv;
overflow-y: auto;
width:100%;
}
.common-post {
padding: var(--size3) var(--size4);
padding-block-end: var(--size1);
margin-block-end: var(--size4);
background-color: var(--abalance1);
border-radius: var(--size2);
box-shadow: 0 1px 2px var(--balance4);
}
/* Native CSS variables */
:root {
/* colors */
--main-color:#1877f2;
--text-color:#050505;
--full-color:255 255 255;
--empty-color:0 0 0;
/* white default*/
--abalance1:rgba(var(--full-color) / 1);
--abalance80:rgba(var(--full-color) / 0.80);
/* black default*/
--balance1:rgb(var(--empty-color) / 0.05);
--balance2:rgb(var(--empty-color) / 0.10);
--balance3:rgb(var(--empty-color) / 0.15);
--balance4:rgb(var(--empty-color) / 0.20);
--balance8:rgb(var(--empty-color) / 0.60);
--balance10:rgb(var(--empty-color) / 0.80);
--balance-full:#f0f2f5;
/* sizes */
--height-header:40px;
/* common sizes */
--size1:4px;
--size2:calc(var(--size1) * 2);
--size3:calc(var(--size1) * 3);
--size4:calc(var(--size1) * 4);
--size5:calc(var(--size1) * 5);
}
.shadows-images {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/*height: 100vh;
width: 100%;*/
/*margin: auto;*/
}
.image-card {
width: 60px;
height: 60px;
border-radius: 5px;
position: relative;
background-size: cover;
margin: 1px;
}
.image-card:before {
content: "";
position: absolute;
width: 60%;
height: 100%;
background-image: inherit;
background-size: cover;
border-radius: 5px;
z-index: -1;
filter: blur(12px);
opacity: 0.6;
left: 50%;
transform: translate(-50%, 10%);
}
.my-list {
min-height: 100hv;
overflow-y: auto;
}
.listado {
border: none;
outline: none;
padding: 10px 16px;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.activeli, .listado:hover {
background-color: #f1f1f1;
}
a:hover {color:inherit; }
input {
display: block;
width: 100%;
outline: none;
}
</style>
</head>
<body>
<div id="preloder" class=" background-icon-black-1B1C24 w3-hide">
<div class=" w3-center ">
<div class="container-name ">
<div class="box ">
<div class="fil2 w3-hide-large w3-hide-medium">
<img src="https://luisangelmaciel.github.io/img/lamp-loader.svg" alt="logo" loading="lazy lazyload " class="lazy img" width="300" height="auto">
</div>
<div class="title w3-center w3-hide-large w3-hide-medium ">
<span class="block "></span>
<p style="font-size: 36px; color: #fee; text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #017db0, 0 0 0.5em #0674a0, 0 0 0.1em #19a1d6, 0 10px 3px #000;" class="lato w3-center">Luis Ángel Maciel<span></span></p>
</div>
<br class="w3-hide-large w3-hide-medium">
<br class="w3-hide-large w3-hide-medium">
<div class="role ">
<div class="block "></div>
<p style="color:#35b0e0 " class="w3-hide-small">Marketing, diseño y experiencia de usuario</p>
</div>
</div>
</div>
</div>
<div class="loader "> </div>
</div>
<div class="scrollmenu-post" class="">
<div id="myBtnContainer" class="w3-hide">
<button class="btn-filter" onclick="filterSelection('all')"> <div class="image-card btn-filter" style="background-image: url('https://dragvesti.github.io/rutarot/Rutarot%2000%20The%20fool.webp')" onclick="filterSelection('all')"></div><br>All</button>
<button class="btn-filter" onclick="filterSelection('css-post')"> <div class="image-card btn-filter" style="background-image: url('https://dragvesti.github.io/rutarot/Rutarot%2000%20The%20fool.webp')" ></div><br>Post</button>
<button class="btn-filter" onclick="filterSelection('desing-post')"> <div class="image-card btn-filter" style="background-image: url('https://dragvesti.github.io/rutarot/Rutarot%2000%20The%20fool.webp')" ></div><br>1478Desing</button>
<button class="btn-filter" onclick="filterSelection('apps-post')"> Apps</button>
<button class="btn-filter" onclick="filterSelection('proyectos-post')"> Proyectos</button>
<button class="btn-filter" onclick="filterSelection('game-post')"> Game</button>
<button class="btn-filter" onclick="filterSelection('dragonBall-post')"> Dragon Ball</button>
<button class="btn-filter" onclick="filterSelection('dragQueen-post')"> Drag Queen</button>
<button class="btn-filter" onclick="filterSelection('2022-post')"> 2022</button>
</div>
</div>
<div class="scrollmenu">
<i><p></p></i> <i><p></p></i>
<i><p></p></i> <i><p></p></i>
<i class="fas fa-home " aria-hidden="true" onclick="document.location='https://cdpn.io/pen/debug/ExOdqNR?authentication_hash=RBMOJWNxBBjk'"> Home </i>
<i><p></p></i> <i><p></p></i>
<i class="fas fa-newspaper" aria-hidden="true" > Lo más nuevo </i>
<i><p></p></i> <i><p></p></i>
<i class="fas fa-sitemap" aria-hidden="true" onclick="https://cdpn.io/pen/debug/ExOdqNR?authentication_hash=RBMOJWNxBBjk'"> Mapa de sitio </i>
<i><p></p></i> <i><p></p></i>
<i class="fa fa-suitcase" aria-hidden="true" onclick="https://cdpn.io/pen/debug/ExOdqNR?authentication_hash=RBMOJWNxBBjk'"> Xiiber </i>
<i><p></p></i> <i><p></p></i>
<i class="fas fa-chess-queen" aria-hidden="true" onclick="document.location='index.html'"> Dragvesti </i>
<i><p></p></i> <i><p></p></i>
<i class="fas fa-envelope-open-text" onclick="https://cdpn.io/pen/debug/ExOdqNR?authentication_hash=RBMOJWNxBBjk'"> Productos y Servicios </i>
<i><p></p></i> <i><p></p></i>
<i><p></p></i> <i><p></p></i>
<i><p></p></i> <i><p></p></i>
</div>
<div id="Extras" class="iTab w3-container" style="display:none; z-index:99999; min-height: 94vh; height: 100hv; overflow-y: auto; width:100%; margin:0; top:0; botton:0;;">
<style>
.iframe-search{ min-height: 94vh;
height: 100hv;
overflow-y: auto;
width:100%;
margin:0;
top:0;
botton:0;
}</style>
<span onclick="openiTab('Search')" style="position: fixed;top: 30px; right: 30px; display: block; z-index: 100; transition: all 250ms linear;"> cerrar </span>
<iframe width="100%" height="94vh" name="view" src="" frameborder="0" allowfullscreen style="border-radius: 0px; background: #c8c6dc;box-shadow: inset -20px 20px 43px #a09eb0,inset 20px -20px 43px #f0eeff; " class="iframe-search"></iframe>
</div>
<main class="page-post">
<div class="scrollmenu-post" class="w3-container w3-white w3-margin">
<div id="myBtnContainer" class="w3-container w3-white w3-margin w3-padding ">
<button class="btn-filter" onclick="filterSelection('all')"> <strong>Ver todo</strong></button>
<button class="btn-filter" onclick="filterSelection('css-post')"> CSS</button>
<button class="btn-filter" onclick="filterSelection('desing-post')"> Desing</button>
<button class="btn-filter" onclick="filterSelection('apps-post')"> Apps</button>
<button class="btn-filter" onclick="filterSelection('proyectos-post')"> Proyectos</button>
<button class="btn-filter" onclick="filterSelection('game-post')"> Game</button>
<button class="btn-filter" onclick="filterSelection('error404-post')"> Error 404!</button>
<button class="btn-filter" onclick="filterSelection('REcurado')"> (Re)desing [Curado]</button>
<button class="btn-filter" onclick="filterSelection('dragonBall-post')"> Dragon Ball</button>
<button class="btn-filter" onclick="filterSelection('dragQueen-post')"> Drag Queen</button>
<button class="btn-filter" onclick="filterSelection('2022-post')"> 2022</button>
<button class="btn-filter" onclick="filterSelection('2023-post')"> 2023</button>
</div>
</div>
<!-- Es el fade de texto, por el momento sin uso --> <!--div class="ScrollFadeOutText">
<style>
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.faded-text {
/* Fading background gradient from the current text color */
background-image: linear-gradient(transparent 5%, currentColor 35%, currentColor 85%, transparent 90%);
z-index: 2;
/* Clip it to the text */
-webkit-background-clip: text;
background-clip: text;
/* Keep the background fixed to the viewport */
background-attachment: fixed;
/* Set the text to transparent for the fading background to show through */
}
.faded-text>* {
color: transparent;
z-index: 2;
}
}
</style>
<div class="faded-text">
</div>
</div-->
<div class="searchable"><br><br><br><br><br><br>
<!--
https://www.xbr.pw//assets/css/hi/countdown/dist/index.html
https://www.w3schools.com/howto/howto_css_disable_text_selection.asp
https://blog.imagekit.io/how-to-manage-an-image-heavy-website-23d1f75bc8bb
https://blog.imagekit.io/image-seo-the-comprehensive-guide-for-better-ranking-images-221dec590882
https://blog.codinghorror.com/the-2030-self-driving-car-bet/
https://crece.withgoogle.com/intl/es_mx/certificates/?utm_source=HPP&utm_medium=Owned&utm_campaign=Certs_LATAM
https://www.xbr.pw//assets/css/hey/justo-estudiando/index.html
https://cosm.ws/
https://set.studio/
https://apps-para-hacer-la-vida-mas-facil.hashnode.dev/
https://www.abubakersaeed.com/
https://xbrpw.github.io/2023/3/neumorphic-elements/dist/index.html
https://chilipepper.notion.site/Terms-of-Use-e8ee179053a043f3b47890714045365b
https://www.hirist.com/login
https://xbrpw.github.io/teclado/abc
https://xbrpw.github.io/teclado/index.html
https://www.xbr.pw//assets/css/hey/card.html
https://xbrpw.github.io/img/marcas/colum-gallery-big%20-%20copia.html
On a mission to help 1 million people start building with AI.
Made by hand in over 125 cities around the world.
https://www.xbr.pw/adivina-quien/index.html
https://app.simplenote.com/p/zmcrwl
https://www.xbr.pw/galeria-de-fotos/gallery-example/gallery-example/dist/index.html
https://www.xbr.pw/galeria-de-fotos/photo-nex-pre/index.html
https://www.xbr.pw/galeria-de-fotos/scroll/index.html
https://xbrpw.github.io/2023/7/nom-dia-horoscopo-vue-input-preview/a.html
https://xbrpw.github.io/2023/7/mobile-friendly-form-elements-login/index.html
https://www.producthunt.com/collections/8-ai-tools-for-better-meetings?ref=hpfeed?utm_source=messenger&utm_medium=messenger&utm_campaign=
https://www.xbr.pw/assets/css/hi/vibrate-api/index.html#
http://www.kitjenson.com/
https://joshguo.space/Contact
https://www.10xdesigners.co/home
https://chrisyee.ca/blog/lg-4k-monitor-review/
https://xbrpw.github.io/fans/device-detector/dist/index.html
https://www.xbr.pw//assets/css/hey/card.html
https://www.xbr.pw//assets/css/hi/password-toggle-microinteraction/dist/index.html
-->
<div id="iTabName-iTab" class="container-filter faded-text">
<div class="w3-container w3-padding w3-center w3-centered w3-white common-post">
<input type="text" autofocus placeholder=" 🔍 Buscar ..." style=" width: 100%; height: 40px;"/>
</div>
<div class="w3-bar w3-black w3-xxlarge w3-hide">
<button class="w3-bar-item w3-black w3-xlarge w3-responsive w3-margin w3-hide" onclick="openiTab('Search')">Login</button>
<button class="w3-bar-item w3-black w3-xlarge w3-responsive w3-margin w3-right w3-hide" onclick="openiTab('Extras')">Extras</button>
</div>
<div id="Search" class="iTab">
<div id="myLISTADO" class="my-list ">
<ul class="w3-ul">
<li class="listado searchable-item post-info filterDiv all desing-post proyectos-post" onclick="openiTab('Extras')">
<div class="" style="line-height:18px;">
<span>
<p style="font-size:14px"><b>desing</b> <span style="color:grey">| 10 marzo 2023</span></p>
<h1 style="line-height:24px; font-size:26px"><strong>Glyps</strong><br>
<span style="line-height:20px; font-size:18px; font-weight: 100;">
<a href="https://luisangelmaciel.github.io/glyphs/animales/demo.html" target="view" title="container-rainbow">Glyps Animales</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/banderas/demo.html" target="view" title="container-rainbow">Glyps Banderas</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/banderas.html" target="view" title="container-rainbow">Glyps Banderas</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/como-te-sientes-hoy/como-que-quiero-llorar.svg" target="view" title="container-rainbow">Glyps Como te sientes hoy</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/google-calendar-2020/cal_01_v2.png" target="view" title="container-rainbow">Glyps Google Calendar</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/horoscope/demo.html" target="view" title="container-rainbow">Glyps Horosccopo</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/mexico/demo.html" target="view" title="container-rainbow">Glyps México </a><br>
<a href="https://luisangelmaciel.github.io/glyphs/mexico.html" target="view" title="container-rainbow">Glyps México</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/pago/demo.html" target="view" title="container-rainbow">Glyps Pago</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/pago.html" target="view" title="container-rainbow">Glyps Pago</a><br>
<a href="https://luisangelmaciel.github.io/glyphs/siluetas/Siluetas-Glyphs-Demo.html" target="view" title="container-rainbow">Glyps Siluetas</a><br>
</span>
</h1>
<p style="font-size:14px; color:grey" class="w3-hide><b>Lighthouse: </b> <span style=""> 100 | 100 | 100 | 83 </span></p>
</span>
</div>
</li>
<li class="listado searchable-item activeli post-info filterDiv all REcurado" onclick="openiTab('Extras')">
<div class="" style="line-height:18px;">
<a href="https://luisemoji.github.io/batman/index.html" target="view" title="container-rainbow">
<p style="font-size:14px"><b>desing</b> <span style="color:grey">| 10 marzo 2023</span></p>
<h1 style="line-height:24px; font-size:26px"><b>Batman</b><br>
<span style="line-height:20px; font-size:18px; font-weight: 100;">Re(desing)[Curado]</span>
</h1>
<p style="font-size:14px; color:grey"><b>Lighthouse: </b> <span style=""> 100 | 100 | 100 | 83 </span></p>
</a>
</div>
</li>
<li class="listado searchable-item activeli post-info filterDiv all REcurado w3-hide" onclick="openiTab('Extras')">
<div class="" style="line-height:18px;">
<a href="" target="view" title="container-rainbow">
<p style="font-size:14px"><b>imput</b> <span style="color:grey">| 10 marzo 2023</span></p>
<h1 style="line-height:24px; font-size:26px"><b>Pokemon Friends</b><br>
<span style="line-height:20px; font-size:18px">Diseño curado</span>
</h1>
<p style="font-size:14px; color:grey"><b>Lighthouse: </b> <span style=""> 99 | 94 | 100 | 67</span></p>
</a>
</div>
</li>
<li class="listado searchable-item post-info filterDiv all css-post" onclick="openiTab('Extras')"><a href=" " target="view" title=" "> </a></li>
<li class="listado searchable-item post-info filterDiv all css-post proyectos-post" onclick="openiTab('Extras')"><a href=" https://xbrpw.github.io/1596/dist/index.html " target="view" title=" "> Entradas 1596</a></li>
<li class="listado searchable-item post-info filterDiv all apps-post" onclick="openiTab('Extras')"><a href=" https://www.xbr.pw/go/api/extrae-color/index.html " target="view" title="Extractor de color "> Extractor de color</a></li>
<li class="listado searchable-item post-info filterDiv all css-post proyectos-post" onclick="openiTab('Extras')"><a href=" https://xbrpw.github.io/2023/pro/index.html#loginind " target="view" title="Login morado "> Login morado </a></li>
<li class="listado searchable-item post-info filterDiv all css-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/eso/dashboard/2022/01/index.html " target="view" title="Solicitud de dominio ">Solicitud de dominio </a></li>
<li class="listado searchable-item post-info filterDiv all css-post" onclick="openiTab('Extras')"><a href="https://www.xbr.pw/assets/css/hi/2024//index.html" target="view" title="Calendario de eventos ">Calendario de eventos </a></li>
<li class="listado searchable-item post-info filterDiv all css-post" onclick="openiTab('Extras')"><a href="https://codepen.io/helloluis/full/yLaxmmP" target="view" title="Redes sociales">Redes sociales</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href=" https://xbrpw.github.io/short-url/404s/sencilla.html" target="view" title=".container-rainbow">404-error-page Sencilla</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/this-page-does-not-exist/index.html" target="view" title=".container-rainbow">404 error page</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/milk-carton/dist/index.html" target="view" title=".container-rainbow">404 error page Milk carton</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/homero-y-sus-rosquillas/index.html" target="view" title=".container-rainbow">404 error page Homero y sus rosquillas</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/fullscreen-win-8-bsod-prank-with-js-fullscreen-api/dist/index.html" target="view" title=".container-rainbow">404 error page</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/forest-encounter/index.html" target="view" title="404 error page OVNI Grabando">404 error page OVNI Grabando</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/chicas-super-poderosas/index.html" target="view" title="404 error page Chicas Superpoderosas">404 error page - Chicas Superpoderosas</a></li>
<li class="listado searchable-item post-info filterDiv all error404-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/404s/404-tittle-not-found-/index.html" target="view" title="404 error page not found">404 error page - Not found</a></li>
<li class="listado searchable-item post-info filterDiv all 2022-post game-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/2022/abre-tu-regalo-de-navidad/index.html" target="view" title="abre-tu-regalo-de-navidad">Abre tu-regalo-de-navidad</a></li>
<li class="listado searchable-item post-info filterDiv all 2022-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/2022/regalo-navideño/index.html" target="view" title="Regalo Navideño">Regalo Navideño</a></li>
<li class="listado searchable-item post-info filterDiv all 2022-post desing-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/2022/No-te-deseo-una-feliz-navidad/index.html" target="view" title="No-te-deseo-una-feliz-navidad/">No-te-deseo-una-feliz-navidad</a></li>
<li class="listado searchable-item post-info filterDiv all 2022-post proyectos-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/2022/halloween-monster/dist/index.html" target="view" title="Hallowen Monster">Envia un monster en este Hallowen</a></li>
<li class="listado searchable-item post-info filterDiv all css-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/2022/flashlight-effect/dist/index.html" target="view" title="Flashlight Effect">Flashlight Effec, descubre el mensaje</a></li>
<li class="listado searchable-item post-info filterDiv all desing-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/alllinks/index.html" target="view" title="All links (Link trhe option)">All links (Link trhe option)</a></li>
<li class="listado searchable-item post-info filterDiv all game-post desing-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/adivina-quien/index.html" target="view" title="Adivina Quién">Adivina Quién</a></li>
<li class="listado searchable-item post-info filterDiv all game-post desing-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/meow-piano/index.html" target="view" title="Meow-piano">Meow piano</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/author/autor-rainbow-card/index.html" target="view" title="autor-rainbow-card">Autor rainbow card</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/author/card/fullpage-bgimage.html" target="view" title="fullpage-bgimage">Fullpage background image</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/author/index.html" target="view" title="Author/index.html">Author index</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io//short-url/author/card/index.html" target="view" title="card">Author card</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/author/texto-blanco-negro/index.html" target="view" title="texto-blanco-negro">Texto blanco & negro</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post dragonBall-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io//short-url/author/sombra-efecto-ejemplo-goku/index.html" target="view" title="Sombra-efecto-ejemplo-goku">Sombra efecto ejemplo Goku</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/author/lamp/index.html" target="view" title="Lampara de escritorio">Lámpara de escritorio</a></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io/short-url/author/buuble/index.html" target="view" title="Buuble/">Buuble</a searchable-item></li>
<li class="listado searchable-item post-info filterDiv all 2023-post" onclick="openiTab('Extras')"><a href="https://xbrpw.github.io//short-url/author/luisangelmaciel.html" target="view" title="author/luisangelmaciel">Autor</a></li>
<li class="listado searchable-item post-info filterDiv all game-post desing-post" onclick="openiTab('Extras')"><a href="https://luisangelmaciel.github.io/yicel/index.html" target="view" title="Yicel">Yicel</a></li>
</ul>
<div class="SAVE">
<div class="searchable-item post-info filterDiv all css-post">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="https://luisemoji.github.io/anda-tocale-aqui/index.html" target="_blank" title="Anda, tócale aquí" aria-label="Anda, tócale aquí"><span class="hpost-span "> <b>Anda, tócale aquí</b> </span> <span><small style="color:grey">8 junio 2013</small></span><br><span class="hpost-span-text ">
Lighthouse: 94 100 100 91
</a> </span> </h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="#ValorAnteTodo" target="_blank" title="Loader name" aria-label="Loader name"><span class="hpost-span "> <b>Valor ante todo</b> </span> <span><small style="color:grey">8 junio 2013</small></span><br><span class="hpost-span-text ">
Valor es una palabra siempre presente en el espíritu del emprendedor y del empresario. Se necesita valor, con un toque de audacia, para animarse a dejar la seguridad de un sueldo a fin de mes e iniciar un negocio propio. Y si queremos ga- narnos un lugar en el mercado, será imprescindible sumar valor no sólo a nuestro producto o servicio, sino a todas las áreas que componen la estructura de nuestra empresa.<br><br>
Esto es algo que muchos emprendedores no terminan de entender y gran parte de la explicación del fracaso de muchos negocios. Hoy la competencia es mayor, tenemos enfrente a un consumidor mejor informado y con muchas más opciones para elegir. La realidad es que ya no podemos darnos el lujo de acomodarnos en la oferta tradicional que nos dio resultados hasta hace pocos años.<br><br>
Los cimientos de tu empresa deben dejar claro al mercado. desde el inicio, no sólo en qué se va a diferenciar tu oferta, sino de qué otra manera vas a vender para dejar siempre encantado a tu cliente, o por qué tu sistema de distribución será la envidia de la competencia. Competir hoy significa innovar, crear, ir siempre un paso más adelante... ¿Ya tienes tu negocio operando? No importa. Siempre hay tiempo para reinventarse y tomar nuevamente la delantera.
</a> </span> </h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="https://codepen.io/luisangelmaciel/pen/mdQdvvy" target="_blank" title="Loader name" aria-label="Loader name"><span class="hpost-span "> <b>Pens 2021 </b> </span> <span><small style="color:grey">7 junio 2013</small></span><br><span class="hpost-span-text ">Un diseño para Codepen con el top de diseños en 2021 para ser presentado en el home de mi perfil </a> </span> </h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="https://luisangelmaciel.github.io/one/loader-name-dot/index.html" target="_blank" title="Loader name" aria-label="Loader name"><span class="hpost-span "> <b>Loader name </b> </span> <span><small style="color:grey">6 junio 2013</small></span><br><span class="hpost-span-text ">El preloader es un elemento que no debe faltar en el checklist de una web o app, le da la confianza al usuario de que esta cargando el sitio y que en breve estara cargado. En algunos otros loader que he realizado he puesto leyendas como "Espera un poco" seguido de "Espera solo un poquito más" y finalmente "Ya casi esta, no desesperes" y listo, el sitio esta cargado. </a> </span> </h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all">
<div style=" display: flex; " class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="https://www.xbr.pw/go/" target="_blank" title="" aria-label=""><span class="hpost-span "> <b>Zona de trabajo</b> </span><br><span class="hpost-span-text ">Espacio de trabajo que incluye un podomoro, bloc de notas, enlaces directos, nippes, lista de tareas, historial proyectos </a> </span> </h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="https://www.youtube.com/watch?v=18hCRoZfb-Y" target="_blank" title="360p CGTavel En Acapulco Límpio 2016, Acapulco, México CGTavel" aria-label="360p CGTavel En Acapulco Límpio 2016, Acapulco, México CGTavel">
<span class="hpost-span "> <b>Video limpio del spot de CG Travel 2016 </b> </span>
<br><span class="hpost-span-text ">Para la agencia de viajes CG Travel decidi hacer un video promocional y se lo deje en manos de un profesional: Dr. Olibear. Quería que el video tuviera escenas de cuando los doy la bienvenida al autobus y la convivencia en la playa. Para grabar escenas de la playa lo invite a Acapulco. Definitivamente volvería hacer otro video de este tipo y con más versiones para varias temporadas del año. </a> </span> </h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all dragQueen-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Logo Dragvesti" loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post "> <a href="https://revistakingmx.wordpress.com/2016/07/30/cucuconfessions/" target="_blank" title="Dragvesti #CucuConfessions con Cynthia Lee Fontaine en México 2016" aria-label="Dragvesti #CucuConfessions con Cynthia Lee Fontaine en México 2016">
<span class="hpost-span "> <b>Fotos CucuConffessions 2016 </b> </span>
<br><span class="hpost-span-text "> Me encontre una nota del evento que hice en 2016 para Dragvesti con Cinthya lee Fontaine en el Teatro Hipódromo Condesa galería de fotos de la revista online King El resto de las fotos del Meet and greet, fotos del teatro y afterparty en la página de</a> </span>
<a href="https://dragvesti.github.io/cucuconfessions/index.html" target="_blank" title="Dragvesti #CucuConfessions con Cynthia Lee Fontaine en México 2016" aria-label="Dragvesti #CucuConfessions con Cynthia Lee Fontaine en México 2016"><span class="a-post ">Dragvesti</span></a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post desing-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg" width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b>Menu drageable with modal. HTML, JavaScript & CSS </b> </span>
<br><span class="hpost-span-text "> Código CSS de un menu que se puede desplazar por la pantalla. </span>
<a href="https://codepen.io/luisangelmaciel/pen/jOZROGO " target="_blank" title="Menu drageable with modal. HTML, JavaScript & CSS " aria-label="Menu drageable with modal. HTML, JavaScript & CSS "><span class="a-post ">Ver código en Codepen</span></a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all 2022-post proyectos-post desing-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/tamales.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b>Pida sus ricos Tamales. </b> </span>
<br><span class="hpost-span-text "> De Rajas, Cremino, Mole con pollo, Bombones y el nuevo sabor de Bubulubu. </span>
</h3>
<div class="h-post ">
<span class="hpost-span-text "> Este proyecto de tamales es un negocio familiar. </span>
<a href=" https://luisangelmaciel.github.io/pdf/tamales-tabloide.pdf" target="_blank"><span class="a-post ">Haz tu pedido.</span></a>
</div>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all 2022-post proyectos-post desing-post apps-post dragonBall-post dragQueen-post">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-3.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b>Stickers para whatsapp.</b> </span>
<br><span class="hpost-span-text "> Disponible en SVG, listos para crear en Whatsapp Web. </span>
</h3>
<div class="h-post ">
<span class="hpost-span-text "> Lo importante de este templete es la visualización de las galerias de imagenes en forma de carrusel con solo abrir una imagen </span>
<a href=" https://luisangelmaciel.github.io/stickers-para-whatsapp " target="_blank"><span class="a-post ">En proceso</span></a><br><br>
</div>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all proyectos-post desing-post 2022-post">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b>Formato</b> </span>
<br><span class="hpost-span-text "> Orden de compra para LAMP! Diseño en CorelDraw </span>
<a href=" https://luisangelmaciel.github.io/pdf/orden de compra.pdf " target="_blank"><span class="a-post ">Descargar PDF</span></a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all 2022-post desing-post">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-1.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b>La creatividad te hace brillar.</b> </span>
<br><span class="hpost-span-text "> Haz que tu creatividad funcione. </span>
<a href=" https://luisangelmaciel.github.io/2022/la-creatividad-te-hace-brillar-Haz-que-tu-creatividad-funcione.html " target="_blank"><span class="a-post ">Notas de un curso de In-store Media, 2016</span></a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-3.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b>Toxel CSS</b> </span>
<br><span class="hpost-span-text "> He agregado un nuevo estilo llamado color-rainbow. Hace que cada 3 segundos, cambie de color. </span>
<a href=" https://luisangelmaciel.github.io/Toxel "><span class="a-post ">Con @-moz-keyframes y @-webkit-keyframes</span></a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all apps-post proyectos-post game-post css-post dragonBall-post dragQueen-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/favicon-luisemoji.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> A todos nos gusta recordar los viejos tiempos. </b> </span>
<br><span class="hpost-span-text "> A todos nos gusta recordar los viejos tiempos. Pero si lo que queremos es avanzar, es necesario dejar a un lado la nostalgia digital. La creatividad, estrategia, métricas, análisis y experiencia, es lo que impulsará tu proyecto al logro de sus objetivos.
Justo lo que tengo para ofrecerte. Contactame</span>
<a rel="noreferrer noopener " href="https://luisemoji.github.io/viborita/ " target=" _blank " title="Jugar ahora " aria-label=" Match game ">
<span class="a-post "> Juego de la viborita </span>
</a>
</h3>
</div>
</div>
</div>
<div class="searchable-item filterDiv all proyectos-post desing-post ">
<div class="flex border-b border-solid common-post">
<div class="w-1/8 text-right pl-3 ">
<div><i class="fa fa-thumb-tack text-teal mr-2 "></i></div>
<div>
<img src="https://luisangelmaciel.github.io/img/favicon-luisemoji.svg " alt="avatar " class="rounded-full h-12 w-12 mr-2 " loading="lazy lazyload " class="lazy ">
</div>
</div>
<div class="w-7/8 p-3 pl-0 ">
<div class="text-xs text-grey-dark ">Proyecto</div>
<span class="hpost-span "> <b>@LuisEmoji</b> </span>
<br><span class="h-postx "> Página que realice para elaborar unas prácticas de código HTMl y juegos clásicos como La viborita
y un Match. En diseño algo de Batman, Pokemon, Minion. </span>
<a href="https://luisemoji.github.io/ " target="_blank " title=" @LuisEmoji " aria-label=" @LuisEmoji "><span class="a-post ">Web</span></a>
<img src="https://luisemoji.github.io/img/og-image.webp " alt="tweet image " loading="lazy lazyload " class="lazy responsive_imagepost ">
</div>
</div>
</div>
<div class="searchable-item searchable-item post-info filterDiv all apps-post proyectos-post game-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/favicon-luisemoji.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Match game </b> </span>
<br><span class="hpost-span-text "> <i>Gaymer Vintage.</i> ¿Te consideras buen observador? Encuentra la mayor combinación de parejas en tan sólo 30 segundos. </span>
<a rel="noreferrer noopener " href="https://luisemoji.github.io/emoji-match-game/ " target="_blank " title="Jugar ahora " aria-label=" Match game ">
<span class="a-post "> Jugar ahora</span>
</a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all apps-post proyectos-post game-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/avatar-esfera-4-estrellas.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> ¿Qué tan rápido eres en el touch? </b> </span>
<br><span class="hpost-span-text "> Ponte a prueba y haz llover emojis de tu pantalla. </span>
<a rel="noreferrer noopener " href="https://luisemoji.github.io/anda-tocale-aqui/ " target="_blank " title="¿Qué tan rapido eres en el touch? " aria-label="¿Qué tan rapido eres en el touch? ">
<span class="a-post "> Haz la prueba aquí.</span>
</a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all apps-post proyectos-post game-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/avatar-esfera-4-estrellas.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> El juego de la viborita </b> </span>
<br><span class="hpost-span-text "> Un clásico que no puede faltar (juego con teclado). </span>
<a rel="noreferrer noopener " href=" https://luisemoji.github.io/viborita/ " target="_blank " title="El juego de la viborita " aria-label="El juego de la viborita "><span class="a-post " > Jugar</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all apps-post proyectos-post css-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/avatar-esfera-4-estrellas.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Ho-oh, HTML Vibrate API</b> </span>
<br><span class="hpost-span-text "> Es una app que funciona para todos los dispositivos móviles con vibrador. Son 7 tipos de vibraciones disponibles. Me alegra ser parte del directorio <i>rePokemon.</i> En la lista Ho-Oh es el Pokémon número 250.</span>
<a href="https://luisangelmaciel.github.io/Ho-Oh " rel="noreferrer noopener "><span class="a-post " target="_blank " title="Hazlo vibrar " aria-label=" Directorio de contactos "> Hazlo vibrar</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item filterDiv all proyectos-post desing-post apps-post css-post ">
<div class="flex border-b border-solid common-post">
<div class="w-1/8 text-right pl-3 ">
<div><i class="fa fa-thumb-tack text-teal mr-2 "></i></div>
<div>
<img src="https://luisangelmaciel.github.io/img/favicon-Igglybuff.svg " alt="avatar " class="rounded-full h-12 w-12 mr-2 " loading="lazy lazyload " class="lazy ">
</div>
</div>
<div class="w-7/8 p-3 pl-0 ">
<div class="text-xs text-grey-dark ">App</div>
<span class="hpost-span "> <b>iGglybuff</b> </span>
<br><span class="h-postx "> Diseños que he realizado y decidí agruparlos para poder ser utilizados como svg,icons,font & glyph. </span>
<a href="https://luisangelmaciel.github.io/Igglybuff " target="_blank " title=" Igglybuff " aria-label=" Igglybuff "><span class="a-post ">Descargar</span></a>
<img src="https://luisangelmaciel.github.io/img/iGglybuff-app.webp" alt="Igglybuff" loading="lazy lazyload " class="lazy rounded-sm responsive_imagepost">
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all apps-post proyectos-post css-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/avatar-esfera-4-estrellas.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Ho-oh, HTML Vibrate API</b> </span>
<br><span class="hpost-span-text "> Es una app que funciona para todos los dispositivos móviles con vibrador. Son 7 tipos de vibraciones disponibles. Me alegra ser parte del directorio <i>rePokemon.</i> En la lista Ho-Oh es el Pokémon número 250.</span>
<a href="https://luisangelmaciel.github.io/Ho-Oh " rel=" noreferrer noopener "><span class="a-post " target="_blank " title="Hazlo vibrar " aria-label=" Directorio de contactos "> Hazlo vibrar</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item filterDivall proyectos-post desing-post apps-post css- ">
<div class="flex border-b border-solid common-post">
<div class="w-1/8 text-right pl-3 ">
<div><i class="fa fa-thumb-tack text-teal mr-2 "></i></div>
<div>
<img src="https://luisangelmaciel.github.io/img/favicon-xurkitree.svg " alt="avatar " class="rounded-full h-12 w-12 mr-2 " loading="lazy lazyload " class="lazy ">
</div>
</div>
<div class="w-7/8 p-3 pl-0 ">
<div class="text-xs text-grey-dark ">App</div>
<span class="hpost-span "> <b>Propuesta Linktree</b> </span>
<br><span class="h-postx "> Propuesta de diseño tipo linktree, nombrada <i>Hi.</i> Me sirvió como base para hacer el diseño de la propuesta final. El css es de tailwind, el minc.css estaba super pesado y lighthouse pedía reducirlo, pero ni uncss pudo
reducirlo. Así que tuve que recortar por partes </span>
<a href="https://luisangelmaciel.github.io/hi " target="_blank " title=" Propuesta tipo linktree, nombrada hi " aria-label=" tipo linktree, nombrada hi "><span class="a-post ">todo el código hasta que al fin logre compactarlo en la versión final de esta página.</span></a>
<img src="https://luisangelmaciel.github.io/img/xurkitree.webp " alt="tweet image " loading="lazy lazyload " class="lazy rounded-sm responsive_imagepost">
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all apps-post proyectos-post css-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Directorio de contactos</b> </span>
<br><span class="hpost-span-text "> Práctica para creación de formularios. </span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/directorio-de-contactos " target="_blank " title="One " aria-label="Niiha Villant "><span class="a-post "> Agregar contacto </span></a>
</h3><br>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all desing-post css-post proyectos-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> eBooks </b> </span>
<br><span class="hpost-span-text "> Códigos HTML, CSS y Java </span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/ebooks " target="_blank " title=" freecodecamp fcc-survey-form " aria-label=" freecodecamp fcc-survey-form "><span class="a-post "> Descargar</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all desing-post css-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> One </b> </span>
<br><span class="hpost-span-text "> Códigos HTML, CSS y Java </span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/one/ " target="_blank " title=" freecodecamp fcc-survey-form " aria-label=" freecodecamp fcc-survey-form "><span class="a-post " > Ver propuesta</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post proyectos-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Práctica <i>fcc-survey-form</i> </b> </span>
<br><span class="hpost-span-text "> Para acreditar el certificado de Free Code Camp</span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/freecodecamp/fcc-survey-form/ " target="_blank " title=" freecodecamp fcc-survey-form " aria-label=" freecodecamp fcc-survey-form "><span class="a-post " > Ver formulario</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all desing-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Arte digital </b> </span>
<br><span class="hpost-span-text "> También es arte, he aquí una<i> galería </i>de trazos digitales. </span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/art " target="_blank " title="Galería de arte digital " aria-label=" Galería de arte digital "></a>><span class="a-post " Visitar</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all proyectos-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/avatar-esfera-4-estrellas.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Calculadora Pokémon </b> </span>
<br><span class="hpost-span-text "> Servía antes de 2021, pero con tanto cambio en la app del juego, queda nula la fórmula. </span>
<a rel="noreferrer noopener " href="https://github.com/luisangelmaciel/calculadora.pokemon " target="_blank " title="Calculadora Pokémon. " aria-label=" Calculadora Pokémon. "><span class="a-post " > Usar calculadora</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all desing-post proyectos-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Agenda checklist </b> </span>
<br><span class="hpost-span-text "> Estoy diseñando una agenda check list. El objetivo de la agenda es formar hábitos. </span>
<a rel="noreferrer noopener " href="https://github.com/luisangelmaciel/checklist " target="_blank " title="Checklist. Agenda para hábitos " aria-label="Check list "><span class="a-post " > Ver proceso</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all desing-post proyectos-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> La casa del Ángel </b> </span>
<br><span class="hpost-span-text "> Club </span>
<a rel="noreferrer noopener " href="https://github.com/luisangelmaciel/la-casa-del-angel " target="_blank " title="Efectos de animación " aria-label="Niiha Villant "><span class="a-post " > Ver</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post desing-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Práctica de ocio que quedo al 100% en Lighthouse </b> </span>
<br><span class="hpost-span-text "> Este fue el diseño que me inspiró para la animación de mi fondo de pantalla. El reto en este proyecto era la optimización de imágenes y animación. </span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/how-to/avengers-in-3d/fork/ " target="_blank " title="Efectos de animación " aria-label="Niiha Villant "><span class="a-post " > Ver proyecto mejorado</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post 2022-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">
<span class="hpost-span "> <b> Template </b> </span>
<br><span class="hpost-span-text "> Curriculum </span>
<a rel="noreferrer noopener " href="https://luisangelmaciel.github.io/curriculum/ " target="_blank " title="Memes: RuPaul´s Drag Race " aria-label="Niiha Villant "><span class="a-post " > Ver</span> </a>
</h3>
</div>
</div>
</div>
<div class="searchable-item post-info filterDiv all css-post desing-post ">
<div style="display: flex;" class="common-post">
<img src="https://luisangelmaciel.github.io/img/lamp-2.svg " width="32px " height="32px " alt="Ico " loading="lazy " class="lazyload h-12 w-12 mr-2 img-post ">
<div class="text-post ">
<h3 class="h-post ">