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