PageSourceSearch

https://gencellpharma.com.co/

html gencellpharma.com.co collected 2026-10-08 10:16:32 UTC 27,030 bytes, 706 lines download raw bytes

1<html lang="en">
2    <head>
3        <meta charset="UTF-8">
4        <meta name="author" content="Mayller Joseph Monroy A."></meta>
5        <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"/>
6        <meta name="apple-mobile-web-app-title" content="CodePen"/>
7        <link rel="icon" type="image/x-icon" href="favicon.png" />          
8        
8<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
8
9        <title>Gencell</title>
10        <link rel="canonical" href="https://codepen.io/rafaelavlucas/pen/NWWQNjZ">
11        <style>
12            @import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap");
13            .about {
14                position: fixed;
15                z-index: 10;
16                bottom: 10px;
17                right: 10px;
18                width: 40px;
19                height: 40px;
20                display: flex;
21                justify-content: flex-end;
22                align-items: flex-end;
23                transition: all 0.2s ease;
24            }
25            .about .bg_links {
26                width: 40px;
27                height: 40px;
28                border-radius: 100%;
29                display: flex;
30                justify-content: center;
31                align-items: center;
32                background-color: rgba(0, 0, 0, 0.2);
33                border-radius: 100%;
34                backdrop-filter: blur(5px);
35                position: absolute;
36            }
37            .about .logo {
38                width: 40px;
39                height: 40px;
40                z-index: 9;
41                background-image: url(https://rafaelavlucas.github.io/assets/codepen/logo_white.svg);
42                background-size: 50%;
43                background-repeat: no-repeat;
44                background-position: 10px 7px;
45                opacity: 0.9;
46                transition: all 1s 0.2s ease;
47                bottom: 0;
48                right: 0;
49            }
50            .about .social {
51                opacity: 0;
52                right: 0;
53                bottom: 0;
54            }
55            .about .social .icon {
56                width: 100%;
57                height: 100%;
58                background-size: 20px;
59                background-repeat: no-repeat;
60                background-position: center;
61                background-color: transparent;
62                display: flex;
63                transition: all 0.2s ease, background-color 0.4s ease;
64                opacity: 0;
65                border-radius: 100%;
66            }
67            .about .social.portfolio {
68                transition: all 0.8s ease;
69            }
70            .about .social.portfolio .icon {
71                background-image: url(https://rafaelavlucas.github.io/assets/codepen/link.svg);
72            }
73            .about .social.dribbble {
74                transition: all 0.3s ease;
75            }
76            .about .social.dribbble .icon {
77                background-image: url(https://rafaelavlucas.github.io/assets/codepen/dribbble.svg);
78            }
79            .about .social.linkedin {
80                transition: all 0.8s ease;
81            }
82            .about .social.linkedin .icon {
83                background-image: url(https://rafaelavlucas.github.io/assets/codepen/linkedin.svg);
84            }
85            .about:hover {
86                width: 105px;
87                height: 105px;
88                transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
89            }
90            .about:hover .logo {
91                opacity: 1;
92                transition: all 0.6s ease;
93            }
94            .about:hover .social {
95                opacity: 1;
96            }
97            .about:hover .social .icon {
98                opacity: 0.9;
99            }
100            .about:hover .social:hover {
101                background-size: 28px;
102            }
103            .about:hover .social:hover .icon {
104                background-size: 65%;
105                opacity: 1;
106            }
107            .about:hover .social.portfolio {
108                right: 0;
109                bottom: calc(100% - 40px);
110                transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
111            }
112            .about:hover .social.portfolio .icon:hover {
113                background-color: #698fb7;
114            }
115            .about:hover .social.dribbble {
116                bottom: 45%;
117                right: 45%;
118                transition: all 0.3s 0.15s cubic-bezier(0.64, 0.01, 0.07, 1.65);
119            }
120            .about:hover .social.dribbble .icon:hover {
121                background-color: #ea4c89;
122            }
123            .about:hover .social.linkedin {
124                bottom: 0;
125                right: calc(100% - 40px);
126                transition: all 0.3s 0.25s cubic-bezier(0.64, 0.01, 0.07, 1.65);
127            }
128            .about:hover .social.linkedin .icon:hover {
129                background-color: #0077b5;
130            }
131
132            h1,
133            h2,
134            h3,
135            h4,
136            h5,
137            h6,
138            p,
139            ul,
140            li,
141            button,
142            a,
143            i,
144            input,
145            body {
146                margin: 0;
147                padding: 0;
148                list-style: none;
149                border: 0;
150                -webkit-tap-highlight-color: transparent;
151                text-decoration: none;
152                color: inherit;
153            }
154            h1:focus,
155            h2:focus,
156            h3:focus,
157            h4:focus,
158            h5:focus,
159            h6:focus,
160            p:focus,
161            ul:focus,
162            li:focus,
163            button:focus,
164            a:focus,
165            i:focus,
166            input:focus,
167            body:focus {
168                outline: 0;
169            }
170
171            body {
172                margin: 0;
173                padding: 0;
174                height: auto;
175                font-family: "Barlow", sans-serif;
176                background: #695681;
177            }
178
179            .logo {
180                position: fixed;
181                z-index: 5;
182                bottom: 10px;
183                right: 10px;
184                width: 40px;
185                height: 40px;
186                border-radius: 100%;
187                display: flex;
188                justify-content: center;
189                align-items: center;
190                background: rgba(0, 0, 0, 0.1);
191                border-radius: 100%;
192                backdrop-filter: blur(5px);
193            }
194            .logo img {
195                width: 55%;
196                height: 55%;
197                transform: translateY(-1px);
198                opacity: 0.8;
199            }
200
201            nav .menu {
202                width: 100%;
203                height: 80px;
204                position: absolute;
205                display: flex;
206                align-items: center;
207                justify-content: space-between;
208                padding: 0 5%;
209                box-sizing: border-box;
210                z-index: 3;
211            }
212            nav .menu .website_name {
213                color: #695681;
214                font-weight: 600;
215                font-size: 20px;
216                letter-spacing: 1px;
217                background: white;
218                padding: 4px 8px;
219                border-radius: 2px;
220                opacity: 0.5;
221                transition: all 0.4s ease;
222                cursor: pointer;
223            }
224            nav .menu .website_name:hover {
225                opacity: 1;
226            }
227            nav .menu .menu_links {
228                transition: all 0.4s ease;
229                opacity: 0.5;
230            }
231            nav .menu .menu_links:hover {
232                opacity: 1;
233            }
234            @media screen and (max-width: 799px) {
235                nav .menu .menu_links {
236                    display: none;
237                }
238            }
239            nav .menu .menu_links .link {
240                color: white;
241                text-transform: uppercase;
242                font-weight: 500;
243                margin-right: 50px;
244                letter-spacing: 2px;
245                position: relative;
246                transition: all 0.3s 0.2s ease;
247            }
248            nav .menu .menu_links .link:last-child {
249                margin-right: 0;
250            }
251            nav .menu .menu_links .link:before {
252                content: "";
253                position: absolute;
254                width: 0px;
255                height: 4px;
256                background: linear-gradient(90deg, #FFEDC0 0%, #FF9D87 100%);
257                bottom: -10px;
258                border-radius: 4px;
259                transition: all 0.4s cubic-bezier(0.82, 0.02, 0.13, 1.26);
260                left: 100%;
261            }
262            nav .menu .menu_links .link:hover {
263                opacity: 1;
264                color: #FB8A8A;
265            }
266            nav .menu .menu_links .link:hover:before {
267                width: 40px;
268                left: 0;
269            }
270            nav .menu .menu_icon {
271                width: 40px;
272                height: 40px;
273                position: relative;
274                display: none;
275                justify-content: center;
276                align-items: center;
277                cursor: pointer;
278            }
279            @media screen and (max-width: 799px) {
280                nav .menu .menu_icon {
281                    display: flex;
282                }
283            }
284            nav .menu .menu_icon .icon {
285                width: 24px;
286                height: 2px;
287                background: white;
288                position: absolute;
289            }
290            nav .menu .menu_icon .icon:before, nav .menu .menu_icon .icon:after {
291                content: "";
292                width: 100%;
293                height: 100%;
294                background: inherit;
295                position: absolute;
296                transition: all 0.3s cubic-bezier(0.49, 0.04, 0, 1.55);
297            }
298            nav .menu .menu_icon .icon:before {
299                transform: translateY(-8px);
300            }
301            nav .menu .menu_icon .icon:after {
302                transform: translateY(8px);
303            }
304            nav .menu .menu_icon:hover .icon {
305                background: #FFEDC0;
306            }
307            nav .menu .menu_icon:hover .icon:before {
308                transform: translateY(-10px);
309            }
310            nav .menu .menu_icon:hover .icon:after {
311                transform: translateY(10px);
312            }
313
314            .wrapper {
315                display: grid;
316                grid-template-columns: 1fr;
317                justify-content: center;
318                align-items: center;
319                height: 100vh;
320                overflow-x: hidden;
321            }
322            .wrapper .container {
323                margin: 0 auto;
324                transition: all 0.4s ease;
325                display: flex;
326                justify-content: center;
327                align-items: center;
328                position: relative;
329            }
330            .wrapper .container .scene {
331                position: absolute;
332                width: 100vw;
333                height: 100vh;
334                vertical-align: middle;
335            }
336            .wrapper .container .one,
337            .wrapper .container .two,
338            .wrapper .container .three,
339            .wrapper .container .circle,
340            .wrapper .container .p404 {
341                width: 60%;
342                height: 60%;
343                top: 20% !important;
344                left: 20% !important;
345                min-width: 400px;
346                min-height: 400px;
347            }
348            .wrapper .container .one .content,
349            .wrapper .container .two .content,
350            .wrapper .container .three .content,
351            .wrapper .container .circle .content,
352            .wrapper .container .p404 .content {
353                width: 600px;
354                height: 600px;
355                display: flex;
356                justify-content: center;
357                align-items: center;
358                position: absolute;
359                top: 50%;
360                left: 50%;
361                transform: translate(-50%, -50%);
362                animation: content 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
363            }
364            @keyframes content {
365                0% {
366                    width: 0;
367                }
368            }
369            .wrapper .container .one .content .piece,
370            .wrapper .container .two .content .piece,
371            .wrapper .container .three .content .piece,
372            .wrapper .container .circle .content .piece,
373            .wrapper .container .p404 .content .piece {
374                width: 200px;
375                height: 80px;
376                display: flex;
377                position: absolute;
378                border-radius: 80px;
379                z-index: 1;
380                animation: pieceLeft 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;
381            }
382            @keyframes pieceLeft {
383                50% {
384                    left: 80%;
385                    width: 10%;
386                }
387            }
388            @keyframes pieceRight {
389                50% {
390                    right: 80%;
391                    width: 10%;
392                }
393            }
394            @media screen and (max-width: 799px) {
395                .wrapper .container .one,
396                .wrapper .container .two,
397                .wrapper .container .three,
398                .wrapper .container .circle,
399                .wrapper .container .p404 {
400                    width: 90%;
401                    height: 90%;
402                    top: 5% !important;
403                    left: 5% !important;
404                    min-width: 280px;
405                    min-height: 280px;
406                }
407            }
408            @media screen and (max-height: 660px) {
409                .wrapper .container .one,
410                .wrapper .container .two,
411                .wrapper .container .three,
412                .wrapper .container .circle,
413                .wrapper .container .p404 {
414                    min-width: 280px;
415                    min-height: 280px;
416                    width: 60%;
417                    height: 60%;
418                    top: 20% !important;
419                    left: 20% !important;
420                }
421            }
422            .wrapper .container .text {
423                width: 60%;
424                height: 40%;
425                min-width: 400px;
426                min-height: 500px;
427                position: absolute;
428                margin: 40px 0;
429                animation: text 0.6s 1.8s ease backwards;
430            }
431            @keyframes text {
432                0% {
433                    opacity: 0;
434                    transform: translateY(40px);
435                }
436            }
437            @media screen and (max-width: 799px) {
438                .wrapper .container .text {
439                    min-height: 400px;
440                    height: 80%;
441                }
442            }
443            .wrapper .container .text article {
444                width: 400px;
445                position: absolute;
446                bottom: 0;
447                z-index: 4;
448                display: flex;
449                flex-direction: column;
450                justify-content: center;
451                align-items: center;
452                text-align: center;
453                bottom: 0;
454                left: 50%;
455                transform: translateX(-50%);
456            }
457            @media screen and (max-width: 799px) {
458                .wrapper .container .text article {
459                    width: 100%;
460                }
461            }
462            .wrapper .container .text article p {
463                color: white;
464                font-size: 18px;
465                letter-spacing: 0.6px;
466                margin-bottom: 40px;
467                text-shadow: 6px 6px 10px #32243E;
468            }
469            .wrapper .container .text article button {
470                height: 40px;
471                padding: 0 30px;
472                border-radius: 50px;
473                cursor: pointer;
474                box-shadow: 0px 15px 20px rgba(54, 24, 79, 0.5);
475                z-index: 3;
476                color: #695681;
477                background-color: white;
478                text-transform: uppercase;
479                font-weight: 600;
480                font-size: 12px;
481                transition: all 0.3s ease;
482            }
483            .wrapper .container .text article button:hover {
484                box-shadow: 0px 10px 10px -10px rgba(54, 24, 79, 0.5);
485                transform: translateY(5px);
486                background: #FB8A8A;
487                color: white;
488            }
489            .wrapper .container .p404 {
490                font-size: 200px;
491                font-weight: 700;
492                letter-spacing: 4px;
493                color: white;
494                display: flex !important;
495                justify-content: center;
496                align-items: center;
497                position: absolute;
498                z-index: 2;
499                animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both;
500                animation-delay: 1.2s;
501            }
502            @media screen and (max-width: 799px) {
503                .wrapper .container .p404 {
504                    font-size: 100px;
505                }
506            }
507            @keyframes anime404 {
508                0% {
509                    opacity: 0;
510                    transform: scale(10) skew(20deg, 20deg);
511                }
512            }
513            .wrapper .container .p404:nth-of-type(2) {
514                color: #36184F;
515                z-index: 1;
516                animation-delay: 1s;
517                filter: blur(10px);
518                opacity: 0.8;
519            }
520            .wrapper .container .circle {
521                position: absolute;
522            }
523            .wrapper .container .circle:before {
524                content: "";
525                position: absolute;
526                width: 800px;
527                height: 800px;
528                background-color: rgba(54, 24, 79, 0.2);
529                border-radius: 100%;
530                top: 50%;
531                left: 50%;
532                transform: translate(-50%, -50%);
533                box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
534                animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
535            }
536            @keyframes circle {
537                0% {
538                    width: 0;
539                    height: 0;
540                }
541            }
542            @media screen and (max-width: 799px) {
543                .wrapper .container .circle:before {
544                    width: 400px;
545                    height: 400px;
546                }
547            }
548            .wrapper .container .one .content:before {
549                content: "";
550                position: absolute;
551                width: 600px;
552                height: 600px;
553                background-color: rgba(54, 24, 79, 0.3);
554                border-radius: 100%;
555                box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
556                animation: circle 0.8s 0.4s cubic-bezier(1, 0.06, 0.25, 1) backwards;
557            }
558            @media screen and (max-width: 799px) {
559                .wrapper .container .one .content:before {
560                    width: 300px;
561                    height: 300px;
562                }
563            }
564            .wrapper .container .one .content .piece {
565                background: linear-gradient(90deg, #8077EA 13.7%, #EB73FF 94.65%);
566            }
567            .wrapper .container .one .content .piece:nth-child(1) {
568                right: 15%;
569                top: 18%;
570                height: 30px;
571                width: 120px;
572                animation-delay: 0.5s;
573                animation-name: pieceRight;
574            }
575            .wrapper .container .one .content .piece:nth-child(2) {
576                left: 15%;
577                top: 45%;
578                width: 150px;
579                height: 50px;
580                animation-delay: 1s;
581                animation-name: pieceLeft;
582            }
583            .wrapper .container .one .content .piece:nth-child(3) {
584                left: 10%;
585                top: 75%;
586                height: 20px;
587                width: 70px;
588                animation-delay: 1.5s;
589                animation-name: pieceLeft;
590            }
591            .wrapper .container .two .content .piece {
592                background: linear-gradient(90deg, #FFEDC0 0%, #FF9D87 100%);
593            }
594            .wrapper .container .two .content .piece:nth-child(1) {
595                left: 0%;
596                top: 25%;
597                height: 40px;
598                width: 120px;
599                animation-delay: 2s;
600                animation-name: pieceLeft;
601            }
602            .wrapper .container .two .content .piece:nth-child(2) {
603                right: 15%;
604                top: 35%;
605                width: 180px;
606                height: 50px;
607                animation-delay: 2.5s;
608                animation-name: pieceRight;
609            }
610            .wrapper .container .two .content .piece:nth-child(3) {
611                right: 10%;
612                top: 80%;
613                height: 20px;
614                width: 160px;
615                animation-delay: 3s;
616                animation-name: pieceRight;
617            }
618            .wrapper .container .three .content .piece {
619                background: #FB8A8A;
620            }
621            .wrapper .container .three .content .piece:nth-child(1) {
622                left: 25%;
623                top: 35%;
624                height: 20px;
625                width: 80px;
626                animation-name: pieceLeft;
627                animation-delay: 3.5s;
628            }
629            .wrapper .container .three .content .piece:nth-child(2) {
630                right: 10%;
631                top: 55%;
632                width: 140px;
633                height: 40px;
634                animation-name: pieceRight;
635                animation-delay: 4s;
636            }
637            .wrapper .container .three .content .piece:nth-child(3) {
638                left: 40%;
639                top: 68%;
640                height: 20px;
641                width: 80px;
642                animation-name: pieceLeft;
643                animation-delay: 4.5s;
644            }
645        </style>
646        
646<script>
647            window.console = window.console || function (t) {};
648        </script>
648
649    </head>
650
651    <body translate="no">        
652        <nav>
653            <div class="menu">
654                <p class="website_name"><img src="logoGencellColor.png" alt="Logo" /></p>                
655                <div class="menu_icon">
656                    <span class="icon"></span>
657                </div>
658            </div>
659        </nav>
660
661        <section class="wrapper">
662            <div class="container">
663                <div id="scene" class="scene" data-hover-only="false" style="transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; backface-visibility: hidden; pointer-events: none;">
664                    <div class="circle" data-depth="1.2" style="transform: translate3d(46.1px, -93.6px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: relative; display: block; left: 0px; top: 0px;"></div>
665                    <div class="one" data-depth="0.9" style="transform: translate3d(34.6px, -70.2px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
666                        <div class="content">
667                            <span class="piece"></span>
668                            <span class="piece"></span>
669                            <span class="piece"></span>
670                        </div>
671                    </div>
672                    <div class="two" data-depth="0.60" style="transform: translate3d(23px, -46.8px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
673                        <div class="content">
674                            <span class="piece"></span>
675                            <span class="piece"></span>
676                            <span class="piece"></span>
677                        </div>
678                    </div>
679                    <div class="three" data-depth="0.40" style="transform: translate3d(15.4px, -31.2px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
680                        <div class="content">
681                            <span class="piece"></span>
682                            <span class="piece"></span>
683                            <span class="piece"></span>
684                        </div>
685                    </div>
686                    <p class="p404" data-depth="0.50" style="transform: translate3d(19.2px, -39px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">ERROR</p>
687                    <p class="p404" data-depth="0.10" style="transform: translate3d(3.8px, -7.8px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">ERROR</p>
688                </div>
689                <div class="text">
690                    <article>
691                        <p>Esta página no existe <br>Por favor revisa el acceso!</p>                        
692                    </article>
693                </div>
694
695            </div>
696        </section>
697        
697<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
697
698        
698<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
698
699        
699<script id="rendered-js">
700// Parallax Code
701            var scene = document.getElementById('scene');
702            var parallax = new Parallax(scene);
703//# sourceURL=pen.js
704        </script>
704
705    </body>
706</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.