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.