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