Last active
August 27, 2021 11:13
-
-
Save aluferraz/5f6438603e5dc8a694d5af5c4bd20f28 to your computer and use it in GitHub Desktop.
Site em construção
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const html = `<!DOCTYPE html> | |
| <style> | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| height: 100%; | |
| background: #7D6290; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .denis-flat:hover .cabeca, .denis-flat:hover .boca, .denis-flat:hover .braco.direito, .denis-flat:hover { | |
| animation: none; | |
| } | |
| .denis-flat:hover .braco.esquerdo { | |
| animation : batemouse .5s infinite ease-in; | |
| left: 132px; | |
| z-index: 5; | |
| } | |
| .denis-flat:hover .olho.esquerdo { | |
| animation : olhobatemouseesq .5s infinite ease-in; | |
| z-index: 5; | |
| } | |
| .denis-flat:hover .olho.direito { | |
| animation : olhobatemousedir .5s infinite ease-in; | |
| z-index: 5; | |
| } | |
| @keyframes olhobatemouseesq { | |
| 0% {height:2px;transform: rotate(20deg)} | |
| 50% {height:2px; transform: rotate(20deg)} | |
| 100% {height:2px;transform: rotate(20deg)} | |
| } | |
| @keyframes olhobatemousedir { | |
| 0% {height:2px;transform: rotate(-20deg)} | |
| 50% {height:2px; transform: rotate(-20deg)} | |
| 100% {height:2px;transform: rotate(-20deg)} | |
| } | |
| /* Propriedades genericas */ | |
| .mesa, .computador, .texto, .denis-flat, .cafe { | |
| position:relative; | |
| width: auto; | |
| } | |
| .cenario { | |
| width: 100%; | |
| background: #7D6290; | |
| height: 100vh; | |
| display:flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .maquina { | |
| background: rgba(136, 174, 226, 0.3); | |
| width: 90px; | |
| height: 130px; | |
| position: absolute; | |
| left: -60px; | |
| z-index: 2; | |
| top: -260px; | |
| border-radius: 0 0 70px 70px; | |
| } | |
| .graomaior { | |
| background: rgb(45, 31, 30); | |
| width: 81px; | |
| height: 120px; | |
| position: absolute; | |
| left: -57px; | |
| top: -256px; | |
| border-radius: 0 0 70px 70px; | |
| } | |
| .cabelo { | |
| position: absolute; | |
| z-index: 2; | |
| border-bottom: 35px yellow solid; | |
| border-right: 20px transparent solid; | |
| border-left: 21px transparent solid; | |
| transform: scale(1,.6) rotate(241deg); | |
| left: 119px; | |
| top: -98px; | |
| border-radius: 365px; | |
| } | |
| .cabelo:first-child { | |
| left: 130px; | |
| top: -93px; | |
| z-index: 2; | |
| border-bottom: 20px #EBC93D solid; | |
| border-right: 18px transparent solid; | |
| border-left: 19px transparent solid; | |
| border-radius: 400px; | |
| transform: scale(.8,1) rotate(337deg); | |
| } | |
| .cabelo:nth-child(2n){ | |
| position: absolute; | |
| z-index: 2; | |
| border-bottom: 23px #EBC93D solid; | |
| border-right: 8px transparent solid; | |
| border-left: 11px transparent solid; | |
| transform: scale(1.9,.8) rotate(2deg); | |
| left: 135px; | |
| top: -97px; | |
| border-radius: 18px; | |
| } | |
| .cabelo:nth-child(3n){ | |
| left: 141px; | |
| top: -98px; | |
| z-index: 2; | |
| border-bottom: 39px #EBC93D solid; | |
| border-right: 26px transparent solid; | |
| border-left: 2px transparent solid; | |
| border-radius: 400px; | |
| transform: scale(.8,.7) rotate(0deg); | |
| } | |
| .cabelo:nth-child(4n){ | |
| left: 116px; | |
| top: -96px; | |
| z-index: 2; | |
| border-bottom: 23px #EBC93D solid; | |
| border-right: 26px transparent solid; | |
| border-left: 21px transparent solid; | |
| border-radius: 0 0 0 372px; | |
| transform: scale(.8,.7) rotate(0deg); | |
| } | |
| .cabelo.rabo { | |
| left: 158px; | |
| top: -97px; | |
| z-index: 2; | |
| width: 14px; | |
| height: 20px; | |
| border: none; | |
| background:#EBC93D; | |
| border-radius: 72px; | |
| transform: scale(1,1) rotate(60deg); | |
| } | |
| .orelha { | |
| height: 13px; | |
| width: 10px; | |
| background: #F8D9BA; | |
| border-radius: 20px; | |
| display: block; | |
| position: absolute; | |
| left:157px; | |
| top: -73px; | |
| } | |
| .boca { | |
| height: 2px; | |
| width: 8px; | |
| background: #000; | |
| display: block; | |
| position: absolute; | |
| left: 128px; | |
| top: -49px; | |
| z-index: 3; | |
| animation : boca 7s infinite ease-in; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(9deg); | |
| } | |
| .olho.direito { | |
| left: 125px; | |
| top: -67px; | |
| } | |
| .olho.esquerdo { | |
| left: 136px; | |
| top: -67px; | |
| } | |
| .nariz { | |
| height: 5px; | |
| width: 5px; | |
| background: #EDC091; | |
| border-radius: 40px; | |
| display: block; | |
| position: absolute; | |
| left: 129px; | |
| top: -59px; | |
| transform: rotate(7deg); | |
| z-index: 2; | |
| } | |
| .nariz::before { | |
| content: ''; | |
| border-bottom: 11px solid #EDC091; | |
| border-left: 2px solid transparent; | |
| border-right: 2px solid transparent; | |
| display: block; | |
| position: absolute; | |
| top: -9px; | |
| } | |
| .barba { | |
| height: 17px; | |
| width: 24px; | |
| background: #AB6919; | |
| border-radius: 0px 40px 10px 40px; | |
| display: block; | |
| position: absolute; | |
| left: 121px; | |
| top: -56px; | |
| transform: rotate(-5deg); | |
| z-index: 1; | |
| } | |
| .barba::before { | |
| content: ''; | |
| height: 13px; | |
| width: 24px; | |
| background: #AB6919; | |
| border-radius: 0 0 140px 80px; | |
| display: block; | |
| position: absolute; | |
| left: 17px; | |
| top: -2px; | |
| transform: rotate(-36deg); | |
| z-index: 1; | |
| } | |
| div.cabeca { | |
| animation: shake-head 7s infinite ; | |
| z-index:2; | |
| position: absolute; | |
| top: 0; | |
| left:0; | |
| transform: rotate(0deg) translate(0,10px); | |
| } | |
| span.cabeca { | |
| height: 50px; | |
| width: 40px; | |
| background: #F8D9BA; | |
| border-radius: 20px; | |
| display: block; | |
| position: absolute; | |
| left:120px; | |
| top: -90px; | |
| } | |
| .corpo { | |
| z-index: 1; | |
| } | |
| .tronco { | |
| width: 21px; | |
| border-bottom: #252424 solid 70px; | |
| position: absolute; | |
| left: 125px; | |
| top: -26px; | |
| transform: rotate(0deg) translate(2px, 0); | |
| z-index: 0; | |
| border-right: transparent 9px solid; | |
| border-left: transparent 7px solid; | |
| border-radius: 171px 201px 101px 50px; | |
| } | |
| .braco { | |
| border: 5px red solid; | |
| position: absolute; | |
| width: 20px; | |
| border-radius: 21px; | |
| } | |
| .braco::before { | |
| content: ''; | |
| border: 5px #252424 solid; | |
| position: absolute; | |
| width: 10px; | |
| border-radius: 21px; | |
| } | |
| .braco::after { | |
| content: ''; | |
| border: 4px #F8D9BA solid; | |
| position: absolute; | |
| width: 4px; | |
| border-radius: 20px 0 0 20px; | |
| } | |
| .braco.direito::after { | |
| left: -15px; | |
| top: -5px; | |
| animation: maodireita 7s infinite ease-in; | |
| } | |
| .braco.direito { | |
| border: 5px #252424 solid; | |
| position: absolute; | |
| z-index: 2; | |
| animation: bracodireito 7s infinite ease-in; | |
| width: 26px; | |
| border-radius: 21px; | |
| top: -2px; | |
| left: 119px; | |
| transform: rotate(-15deg); | |
| } | |
| .braco.direito::before { | |
| transform: rotate(-38deg); | |
| top: -9px; | |
| left: 23px; | |
| } | |
| .braco.esquerdo { | |
| border: 5px #252424 solid; | |
| position: absolute; | |
| top: -4px; | |
| width: 16px; | |
| z-index: 1; | |
| border-radius: 21px; | |
| transform: rotate(-10deg); | |
| } | |
| .denis-flat:not(:hover) .braco.esquerdo { | |
| left: 100px; | |
| animation : bracoesquerdo 7s infinite ease-in; | |
| } | |
| .braco.esquerdo::after { | |
| left: -15px; | |
| top: -5px; | |
| } | |
| .braco.esquerdo::before { | |
| transform: rotate(-38deg); | |
| top: -10px; | |
| left: 13px; | |
| } | |
| .denis-flat { | |
| animation: shake-body 7s infinite ease-in; | |
| left: 20px; | |
| top: -15px; | |
| cursor:pointer; | |
| } | |
| /* Computador */ | |
| .tela { | |
| border-bottom: 45px solid #F0D8FB; | |
| border-left: 10px solid transparent; | |
| border-right: 10px solid transparent; | |
| height: 0; | |
| position: absolute; | |
| width: 22px; | |
| z-index: 1; | |
| display: block; | |
| top: -28px; | |
| left: 44px; | |
| } | |
| .tela::before { | |
| content: ''; | |
| border-top: 52px solid #F0D8FB; | |
| border-left: 7px solid transparent; | |
| border-right: 6px solid transparent; | |
| position: absolute; | |
| display: block; | |
| top: -43px; | |
| z-index: 1; | |
| left: -43px; | |
| width: 89px; | |
| border-radius: 6px; | |
| } | |
| .tela::after{ | |
| content: ''; | |
| border-top: 10px solid rgba(0, 0, 0, 0.11); | |
| border-left: 9px solid transparent; | |
| border-right: 5px solid transparent; | |
| position: absolute; | |
| display: block; | |
| top: 4px; | |
| z-index: -1; | |
| left: -7px; | |
| transform: rotate(166deg); | |
| width: 19px; | |
| } | |
| .ball { | |
| width: 11px; | |
| height: 11px; | |
| background: #FFF; | |
| display: block; | |
| position: absolute; | |
| top: -50px; | |
| left: 60px; | |
| z-index: 5; | |
| border-radius: 20px; | |
| } | |
| .teclado { | |
| width: 40px; | |
| height: 3px; | |
| background: #CC84EF; | |
| position: absolute; | |
| left: 100px; | |
| top: -4px; | |
| z-index: 1; | |
| display: block; | |
| border-radius: 20px; | |
| } | |
| .botao-cafe { | |
| width: 18px; | |
| height: 5px; | |
| background: #fff; | |
| position: absolute; | |
| left: 160px; | |
| top:-8px; | |
| z-index: 1; | |
| display:block; | |
| border-radius: 20px; | |
| } | |
| .botao-cafe::after { | |
| width: 22px; | |
| height: 3px; | |
| background: #3E1B4E; | |
| position: absolute; | |
| left: -2px; | |
| top:4px; | |
| display:block; | |
| border-radius: 20px; | |
| z-index: 2; | |
| content: ''; | |
| } | |
| /* Mesa */ | |
| .mesa span.baixo { | |
| border-top: 100px solid #F0D8FB; | |
| border-left: 20px solid transparent; | |
| border-right: 110px solid transparent; | |
| height: 0; | |
| position:absolute; | |
| width: 0px; | |
| z-index:2; | |
| } | |
| .mesa span.baixo:nth-child(2n) { | |
| border-top: 100px solid #F0D8FB; | |
| border-left: 180px solid transparent; | |
| border-right: 20px solid transparent; | |
| } | |
| .mesa span.baixo:nth-child(5n) { | |
| border-bottom: 10px solid #F0D8FB; | |
| border-top: 90px solid #F0D8FB; | |
| border-left: 140px solid #F0D8FB; | |
| margin-left: 20px; | |
| border-right: 20px solid #F0D8FB; | |
| } | |
| .mesa span.baixo.sombreado { | |
| border-top: 67px solid #fff; | |
| border-left: 7px solid transparent; | |
| border-right: 35px solid transparent; | |
| height: 0; | |
| position: absolute; | |
| width: 0px; | |
| z-index: 2; | |
| bottom: -96px; | |
| left: 12px; | |
| transform: rotate(-5deg); | |
| width: 75px; | |
| } | |
| .mesa span.baixo.sombreado::before { | |
| content: ""; | |
| border-bottom-width: 32px; | |
| border-bottom-style: solid; | |
| border-bottom-color: rgb(255, 255, 255); | |
| border-left: 0 solid transparent; | |
| border-right: 68px solid transparent; | |
| height: 0; | |
| z-index: 2; | |
| position: absolute; | |
| transform: rotate(-79deg); | |
| bottom: 16px; | |
| left: 49px; | |
| width: 7px; | |
| } | |
| .mesa span.barra { | |
| width: 150px; | |
| height:10px; | |
| border-radius:20px; | |
| background: #fff; | |
| position:absolute; | |
| z-index: 3; | |
| margin-left: -10px; | |
| } | |
| .mesa span.barra:first-child { | |
| margin-left: 60px; | |
| background: #F0D8FB; | |
| } | |
| .sombra { | |
| width:210px; | |
| border-radius:100%; | |
| height: 13px; | |
| background: #3E1B4E; | |
| position:absolute; | |
| bottom: -110px; | |
| z-index:1; | |
| } | |
| .texto span { | |
| position: absolute; | |
| top: 120px; | |
| left: -95px; | |
| font: 900 2rem "Open Sans"; | |
| color: #fff; | |
| min-width:400px; | |
| text-align: center; | |
| animation: shake .4s infinite ease-in; | |
| } | |
| .olho { | |
| width: 5px; | |
| background: #474747; | |
| border-radius: 40px; | |
| margin-top: 0; | |
| display: block; | |
| position: absolute; | |
| animation: piscada 7s infinite; | |
| } | |
| /* @keyframes shake { | |
| 0% {transform: translateX(-3px)} | |
| 100% {transform: translateX(3px)} | |
| } */ | |
| @keyframes batemouse { | |
| 0% {transform:rotate3d(171,211,1,190deg); | |
| left: 135px} | |
| 50% {transform:rotate3d(1,211,1,190deg); | |
| left: 141px} | |
| 100% {transform: rotate3d(1,211,1,190deg); | |
| left: 135px} | |
| } | |
| @keyframes bracoesquerdo { | |
| 0% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(20deg); | |
| } | |
| 1% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(0deg); | |
| } | |
| 3% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(21deg); | |
| } | |
| 4% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(0deg); | |
| } | |
| 7% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(25deg); | |
| } | |
| 9% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(40deg); | |
| } | |
| 10% { | |
| top: -5px; | |
| left: 103px; | |
| transform: rotate(32deg); | |
| } | |
| 11% { | |
| top: -5px; | |
| left: 113px; | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @keyframes maodireita { | |
| 0% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(20deg); | |
| } | |
| 1% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(0deg); | |
| } | |
| 3% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(21deg); | |
| } | |
| 4% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(0deg); | |
| } | |
| 7% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(25deg); | |
| } | |
| 9% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(0deg); | |
| } | |
| 10% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(30deg); | |
| } | |
| 11% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(0deg); | |
| } | |
| 18% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(0deg); | |
| } | |
| 21% { | |
| left: 19px; | |
| top: -13px; | |
| transform: rotate(0deg); | |
| } | |
| 25% { | |
| left: 19px; | |
| top: 0px; | |
| transform: rotate(0deg); | |
| } | |
| 31% { | |
| left: 19px; | |
| top: 0px; | |
| transform: rotate(0deg); | |
| } | |
| 38% { | |
| left: -15px; | |
| top: -5px; | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @keyframes bracodireito { | |
| 0% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(20deg); | |
| } | |
| 1% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(0deg); | |
| } | |
| 3% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(21deg); | |
| } | |
| 4% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(0deg); | |
| } | |
| 7% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(25deg); | |
| } | |
| 9% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(0deg); | |
| } | |
| 10% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(30deg); | |
| } | |
| 11% { | |
| top: -2px; | |
| left: 113px; | |
| transform: rotate(0deg); | |
| } | |
| } | |
| @keyframes boca { | |
| 0% { | |
| height: 2px; | |
| width: 8px; | |
| left: 128px; | |
| top: -51px; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(9deg); | |
| } | |
| 60% { | |
| height: 2px; | |
| width: 8px; | |
| left: 128px; | |
| top: -51px; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(9deg); | |
| } | |
| 70% { | |
| height: 10px; | |
| width: 13px; | |
| left: 124px; | |
| top: -52px; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(9deg); | |
| } | |
| 75% { | |
| height: 10px; | |
| width: 13px; | |
| left: 124px; | |
| top: -52px; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(9deg); | |
| } | |
| 78% { | |
| height: 2px; | |
| width: 13px; | |
| left: 128px; | |
| top: -51px; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(-18deg); | |
| } | |
| 98% { | |
| height: 8px; | |
| width: 23px; | |
| left: 128px; | |
| top: -51px; | |
| border-radius: 0 0 20px 20px; | |
| transform: rotate(-18deg); | |
| } | |
| } | |
| @keyframes shake-head { | |
| 0% {transform: rotate(0deg) translate(10px, 7px);} | |
| 59% {transform: rotate(0deg) translate(10px, 7px);} | |
| 80% {transform: rotate(50deg) translate(-78px,-96px);} | |
| 100% {transform: rotate(0deg) translate(10px, 7px);} | |
| 200% {transform: rotate(0deg) translate(20px, 7px);} | |
| } | |
| @keyframes piscada { | |
| 0% {height: 5px; margin-top:0px;} | |
| 1% {height: 5px;margin-top:0px;} | |
| 2% {height: 5px; margin-top:0px;} | |
| 3% {height: 1px; margin-top:2px;} | |
| 4% {height: 5px;margin-top:0px;} | |
| 5% {height: 5px;margin-top:0px;} | |
| 6% {height: 1px;margin-top:2px;} | |
| 7% {height: 5px;margin-top:0px;} | |
| 8% {height: 5px;margin-top:0px;} | |
| 9% {height: 5px;margin-top:0px;} | |
| 10% {height: 5px;margin-top:0px;} | |
| 11% {height: 5px;margin-top:0px;} | |
| 12% {height: 5px;margin-top:0px;} | |
| 13% {height: 5px;margin-top:0px;} | |
| 14% {height: 5px;margin-top:0px;} | |
| 15% {height: 5px;margin-top:0px;} | |
| 16% {height: 5px;margin-top:0px;} | |
| 17% {height: 5px;margin-top:0px;} | |
| 18% {height: 5px;margin-top:0px;} | |
| 19% {height: 5px;margin-top:0px;} | |
| 20% {height: 5px;margin-top:0px;} | |
| 21% {height: 5px;margin-top:0px;} | |
| 22% {height: 5px;margin-top:0px;} | |
| 23% {height: 5px;margin-top:0px;} | |
| 24% {height: 5px;margin-top:0px;} | |
| 25% {height: 5px;margin-top:0px;} | |
| 26% {height: 5px;margin-top:0px;} | |
| 27% {height: 5px;margin-top:0px;} | |
| 28% {height: 1px;margin-top:2px;} | |
| 29% {height: 5px;margin-top:0px;} | |
| 30% {height: 5px;margin-top:0px;} | |
| 31% {height: 5px;margin-top:0px;} | |
| 32% {height: 5px;margin-top:0px;} | |
| 33% {height: 5px;margin-top:0px;} | |
| 34% {height: 5px;margin-top:0px;} | |
| 35% {height: 5px;margin-top:0px;} | |
| 36% {height: 5px;margin-top:0px;} | |
| 37% {height: 5px;margin-top:0px;} | |
| 38% {height: 5px;margin-top:0px;} | |
| 39% {height: 5px;margin-top:0px;} | |
| 40% {height: 5px;margin-top:0px;} | |
| 41% {height: 5px;margin-top:0px;} | |
| 42% {height: 5px;margin-top:0px;} | |
| 43% {height: 5px;margin-top:0px;} | |
| 44% {height: 5px;margin-top:0px;} | |
| 45% {height: 5px;margin-top:0px;} | |
| 46% {height: 5px;margin-top:0px;} | |
| 47% {height: 5px;margin-top:0px;} | |
| 48% {height: 5px;margin-top:0px;} | |
| 49% {height: 5px;margin-top:0px;} | |
| 50% {height: 5px;margin-top:0px;} | |
| 51% {height: 5px;margin-top:0px;} | |
| 52% {height: 5px;margin-top:0px;} | |
| 53% {height: 5px;margin-top:0px;} | |
| 54% {height: 5px;margin-top:0px;} | |
| 55% {height: 5px;margin-top:0px;} | |
| 56% {height: 5px;margin-top:0px;} | |
| 57% {height: 5px;margin-top:0px;} | |
| 58% {height: 5px;margin-top:0px;} | |
| 59% {height: 5px;margin-top:0px;} | |
| 60% {height: 1px;margin-top:2px;} | |
| /* 61% {height: 5px;margin-top:0px;} | |
| 62% {height: 5px;margin-top:0px;} | |
| 63% {height: 1px;margin-top:2px;} */ | |
| /* 64% {height: 5px;margin-top:0px;} | |
| 65% {height: 1px;margin-top:2px;} | |
| 66% {height: 1px;margin-top:2px;} | |
| 67% {height: 5px;margin-top:0px;} | |
| 68% {height: 5px;margin-top:0px;} | |
| 69% {height: 5px;margin-top:0px;} | |
| 70% {height: 5px;margin-top:0px;} | |
| 71% {height: 5px;margin-top:0px;} | |
| 72% {height: 5px;margin-top:0px;} | |
| 73% {height: 5px;margin-top:0px;} | |
| 74% {height: 5px;margin-top:0px;} | |
| 75% {height: 5px;margin-top:0px;} | |
| 76% {height: 5px;margin-top:0px;} | |
| 77% {height: 5px;margin-top:0px;} | |
| 78% {height: 5px;margin-top:0px;} | |
| 79% {height: 1px;margin-top:2px;} | |
| 80% {height: 5px;margin-top:0px;} | |
| 81% {height: 5px;margin-top:0px;} | |
| 82% {height: 5px;margin-top:0px;} */ | |
| 83% {height: 1px;margin-top:2px;} | |
| 84% {height: 5px;margin-top:0px;} | |
| 85% {height: 5px;margin-top:0px;} | |
| 86% {height: 5px;margin-top:0px;} | |
| 87% {height: 5px;margin-top:0px;} | |
| 88% {height: 5px;margin-top:0px;} | |
| 89% {height: 5px;margin-top:0px;} | |
| 90% {height: 5px;margin-top:0px;} | |
| 91% {height: 5px;margin-top:0px;} | |
| 92% {height: 5px;margin-top:0px;} | |
| 93% {height: 5px;margin-top:0px;} | |
| 94% {height: 5px;margin-top:0px;} | |
| 95% {height: 5px;margin-top:0px;} | |
| 96% {height: 5px;margin-top:0px;} | |
| 97% {height: 1px;margin-top:2px;} | |
| 98% {height: 5px;margin-top:0px;} | |
| 99% {height: 5px;margin-top:0px;} | |
| 100% {height: 5px;margin-top:0px;} | |
| } | |
| </style> | |
| <div class="cenario"> | |
| <div class="cafe"> | |
| <span class="maquina"></span> | |
| <span class="graomaior"></span> | |
| </div> | |
| <div class="computador"> | |
| <span class="tela"></span> | |
| <span class="ball"></span> | |
| <span class="teclado"></span> | |
| <span class="botao-cafe"></span> | |
| </div> | |
| <div class="denis-flat"> | |
| <div class="cabeca"> | |
| <span class="cabelo"></span> | |
| <span class="cabelo"></span> | |
| <span class="cabelo"></span> | |
| <span class="cabelo"></span> | |
| <span class="cabelo rabo"></span> | |
| <span class="orelha"></span> | |
| <span class="cabeca"></span> | |
| <span class="olho esquerdo"></span> | |
| <span class="olho direito"></span> | |
| <span class="nariz"></span> | |
| <span class="barba"></span> | |
| <span class="boca"></span> | |
| </div> | |
| <div class="corpo"> | |
| <span class="tronco"></span> | |
| <span class="braco direito"></span> | |
| <span class="braco esquerdo"></span> | |
| </div> | |
| </div> | |
| <div class="mesa"> | |
| <span class="barra"></span> | |
| <span class="barra"></span> | |
| <span class="baixo"></span> | |
| <span class="baixo"></span> | |
| <span class="baixo"></span> | |
| <span class="baixo sombreado"></span> | |
| <span class="sombra"></span> | |
| </div> | |
| <div> | |
| </div> | |
| <div class="texto"> | |
| <span>Site em construção</span> | |
| </div> | |
| </div> | |
| ` | |
| async function handleRequest(request) { | |
| return new Response(html, { | |
| headers: { | |
| "content-type": "text/html;charset=UTF-8", | |
| }, | |
| }) | |
| } | |
| addEventListener("fetch", event => { | |
| return event.respondWith(handleRequest(event.request)) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment