Skip to content

Instantly share code, notes, and snippets.

@aluferraz

aluferraz/em_construcao.js

Last active August 27, 2021 11:13
Show Gist options
  • Save aluferraz/5f6438603e5dc8a694d5af5c4bd20f28 to your computer and use it in GitHub Desktop.
Save aluferraz/5f6438603e5dc8a694d5af5c4bd20f28 to your computer and use it in GitHub Desktop.
Download ZIP
Site em construção
Raw
em_construcao.js
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