Hello Kitty
Guardo vocês, leitores, visitantes, seguidores, amigos, no cantinho + especial do meu coração♥
<style>
.hkbox{
position: relative;
height: 450px;
width: 280px;}
.orelha1{
position: absolute;
top: 0;
left: 10px;
background: white;
width: 60px;
height: 60px;
border-radius: 28% 50% 50% 50%;
border: 10px solid white;
transform: rotate(10deg);
}
.orelha2{
position: absolute;
top: -13px;
right: -5px;
background: white;
width: 60px;
height: 60px;
border-radius: 28% 50% 50% 50%;
border: 10px solid white;
transform: rotate(80deg);
}
.hkhead{
z-index: 4;
width: 100%;
height: 350px;
border-radius: 40% 40% 20% 20%;
background: white;
border-top: 10px solid whitesmoke;
border-left: 15px solid white;
border-bottom: 10px dotted whitesmoke;
border-right: 14px solid white;
}
.olho1{
position: absolute;
width: 50px;
height: 40px;
border-radius: 50%;
border-top: 10px solid lightblue;
top: 22%;
left: 24%;
transform: rotate(0deg);
}
.olho2{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border-top: 10px solid lightblue;
top: 22%;
right: 15%;
transform: rotate(0deg);
}
.nariz{
position: absolute;
top: 26%;
left: 48%;
z-index: 6;
background: #edb93b;
border: 6px solid white;
width: 25px;
height: 15px;
border-radius: 50% 50% 45% 45%;
}
#laco{
position: absolute;
top: -1%;
right: 2%;
width: 130px;
height: 90px;
}
.cnt-laco{
position: relative;
}
.circulo{
background: hotpink;
width: 40px;
height: 40px;
border: 8px solid hotpink;
border-radius: 50%;
z-index: 999;
position: absolute;
margin-top: 25px;
left: 40%;
}
.circulo-pequeno-r{
background: pink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 51px;
right: 8%;
}
.circulo-pequeno-l{
background: pink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 24px;
left: 30%;
}
.lazo-1
.lazo-1:after{
position: absolute;
top: -30%;
left: 18%;
content: '';
display: block;
background: hotpink;
width: 47px;
height: 55px;
border-radius: 50%;
z-index: 99;
}
.lazo-1:before{
position: absolute;
margin-top: 2px;
left: 15%;
content: '';
display: block;
background: hotpink;
width: 50px;
height: 60px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 99;
}
.lazo-1-sombra
.lazo-1-sombra:after{
position: absolute;
top: -8px;
left: 10%;
content: '';
display: block;
background: hotpink;
width: 67px;
height: 65px;
border-radius: 50%;
z-index: 9;
}
.lazo-1-sombra:before{
position: absolute;
margin-top: -1px;
left: 8%;
content: '';
display: block;
background: hotpink;
width: 65px;
height: 70px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
.lazo-2
.lazo-2:after{
position: absolute;
margin-top: 40px;
right: -17%;
content: '';
display: block;
background: hotpink;
width: 55px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 99;
}
.lazo-2:before{
position: absolute;
margin-top: 45px;
right: -13%;
content: '';
display: block;
background: hotpink;
width: 60px;
height: 60px;
border-radius: 50%;
transform: rotate(40deg);
z-index: 99;
}
.lazo-2-sombra
.lazo-2-sombra:after{
position: absolute;
margin-top: 50px;
right: -14%;
content: '';
display: block;
background: hotpink;
width: 73px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 9;
}
.lazo-2-sombra:before{
position: absolute;
margin-top: 33px;
right: -24%;
content: '';
display: block;
background: hotpink;
width: 69px;
height: 70px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
.corpim{
position: relative;
top: -190px;
width: 320px;
height: 200px;
}
.mao-1{
position: absolute;
width: 60px;
height: 100px;
background: white;
border: 9px solid whitesmoke;
border-radius: 48% 48% 48% 48%;
top: 156px;
right: -16%;
transform: rotate(-190deg);
}
.mao-1:after{
content: '';
position: absolute;
top: 40px;
left: -13px;
display: block;
width: 40px;
height: 50px;
background: white;
transform: rotate(-100deg);
border-radius: 50%;
border-top: 10px solid whitesmoke;
}
.mao-2{
position: absolute;
width: 60px;
height: 100px;
background: white;
border: 9px solid whitesmoke;
border-radius: 48% 48% 48% 48%;
top: 106px;
left: -6%;
transform: rotate(190deg);
}
.mao-2:after{
content: '';
position: absolute;
top: 40px;
left: -13px;
display: block;
width: 40px;
height: 50px;
background: white;
transform: rotate(-100deg);
border-radius: 50%;
border-top: 10px solid whitesmoke;
}
.miu{
width: 280px;
border-radius: 50%;
margin-top: -75px;
background: white;
color: pink;
font-family: 'Delius', cursive;
font-size: 14px;
}
#laco2{
display: none;
position: absolute;
top: -1%;
left: 2%;
width: 130px;
height: 90px;
}
.cnt-laco2{
position: relative;
}
.circulo2{
background: hotpink;
width: 40px;
height: 40px;
border: 8px solid hotpink;
border-radius: 50%;
z-index: 999;
position: absolute;
margin-top: 25px;
right: 40%;
}
.circulo-pequeno-r2{
background: pink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 51px;
left: 8%;
}
.circulo-pequeno-l2{
background: pink;
width: 20px;
height: 20px;
border: 6px solid hotpink;
border-radius: 50%;
z-index: 998;
position: absolute;
margin-top: 24px;
right: 30%;
}
.lazo-12
.lazo-12:after{
position: absolute;
top: -30%;
right: 18%;
content: '';
display: block;
background: hotpink;
width: 47px;
height: 55px;
border-radius: 50%;
z-index: 99;
}
.lazo-12:before{
position: absolute;
margin-top: 2px;
right: 15%;
content: '';
display: block;
background: hotpink;
width: 50px;
height: 60px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 99;
}
.lazo-12-sombra
.lazo-12-sombra:after{
position: absolute;
top: -8px;
right: 10%;
content: '';
display: block;
background: hotpink;
width: 67px;
height: 65px;
border-radius: 50%;
z-index: 9;
}
.lazo-12-sombra:before{
position: absolute;
margin-top: -1px;
right: 8%;
content: '';
display: block;
background: hotpink;
width: 75px;
height: 80px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
.lazo-22
.lazo-22:after{
position: absolute;
margin-top: 40px;
left: -17%;
content: '';
display: block;
background: hotpink;
width: 55px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 99;
}
.lazo-22:before{
position: absolute;
margin-top: 45px;
left: -13%;
content: '';
display: block;
background: hotpink;
width: 60px;
height: 60px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 99;
}
.lazo-22-sombra
.lazo-22-sombra:after{
position: absolute;
margin-top: 50px;
left: -14%;
content: '';
display: block;
background: hotpink;
width: 73px;
height: 60px;
transform: rotate(38deg);
border-radius: 50%;
z-index: 9;
}
.lazo-22-sombra:before{
position: absolute;
margin-top: 33px;
left: -24%;
content: '';
display: block;
background: hotpink;
width: 69px;
height: 70px;
border-radius: 50%;
transform: rotate(38deg);
z-index: 9;
}
</style>
<div class='hkbox'>
<div class='hkhead'>
<div id='laco2'>
<div class='cnt-laco2'></div>
<div class='circulo2'></div>
<div class='circulo-pequeno-r2'></div>
<div class='circulo-pequeno-l2'></div>
<div class='lazo-12'></div>
<div class='lazo-12-sombra'></div>
<div class='lazo-22'></div>
<div class='lazo-22-sombra'></div>
</div>
<div class='orelha1'></div>
<div class='orelha2'></div>
<div class='nariz'></div>
<div class='olho1'></div>
<div class='olho2'></div>
<div id='laco'>
<div class='cnt-laco'></div>
<div class='circulo'></div>
<div class='circulo-pequeno-r'></div>
<div class='circulo-pequeno-l'></div>
<div class='lazo-1'></div>
<div class='lazo-1-sombra'></div>
<div class='lazo-2'></div>
<div class='lazo-2-sombra'></div>
</div>
<div class='corpim'></div>
<div class='mao-1'></div>
<div class='mao-2'></div><div class='miu'>
<center> ADICIONE ALGUMA COISA AQUI
</center></div>
</div></div>
Comentários
Postar um comentário