LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  01

1001

1101

 011

  011

0101

0100

   01

CSS
@import url(https://fonts.googleapis.com/css?family=Kameron);

body {
  background: #231F20;
  line-height: 0%;
}
#image {
  width: 300px;
  height: 300px;
  position: absolute;
}
#center {
  border-radius: 50%;
  background: #FEFAD5;
  width: 520px;
  height: 520px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -260px;
  margin-top: -260px;
}
#head {
  background: #231F20;
  width: 300px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -150px;
  margin-top: -200px;
  border-right: 10px solid #231F20;
  border-radius: 300px / 400px;
  transform: rotate(5deg);
}
#cheeks {
  width: 280px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -155px;
  margin-top: -125px;
  border-left: 20px solid #231F20;
  border-right: 20px solid #231F20;
  border-radius: 300px / 300px;
  transform: rotate(5deg);
}

#receding-hairline-1 {
  background: #FEFAD5;
  width: 10px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -5px;
  margin-top: -190px;
  border-left: 10px solid #FEFAD5;
  border-radius: 120px / 180px;
  transform: rotate(-40deg);
}
#receding-hairline-2 {
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 10px;
  margin-top: -180px;
  border-left: 4px solid #FEFAD5;
  border-radius: 120px / 180px;
  transform: rotate(-20deg);
}
#receding-hairline-3 {
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 5px;
  margin-top: -180px;
  border-left: 7px solid #FEFAD5;
  border-radius: 100px / 180px;
  transform: rotate(10deg);
}
#receding-hairline-4 {
  background: #FEFAD5;
  width: 10px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -5px;
  margin-top: -190px;
  border-right: 10px solid #231F20;
  border-radius: 120px / 180px;
  transform: rotate(55deg);
}





#left-ear {
  background: #E75E25;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -200px;
  margin-top: -110px;
  border-radius: 100px;
  border-bottom: 10px solid #231F20;
  border-left: 10px solid #231F20;
  transform: rotate(40deg);
}
#right-ear {
  background: #E75E25;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 100px;
  margin-top: -100px;
  border-radius: 100px;
  border-top: 10px solid #231F20;
  border-right: 10px solid #231F20;
  transform: rotate(40deg);
}
#left-ear-wax {
  width: 80px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -175px;
  margin-top: -90px;
  border-radius: 100px;
  border-right: 20px solid #231F20;
  border-bottom: 20px solid #231F20;
  border-top: 10px solid #231F20;
  transform: rotate(10deg);
}
#right-ear-wax {
  width: 70px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 105px;
  margin-top: -85px;
  border-radius: 100px;
  border-top: 10px solid #231F20;
  border-left: 10px solid #231F20;
  border-bottom: 20px solid #231F20;
  transform: rotate(10deg);
}

#left-ear-plug {
  background: #E75E25;
  width: 10px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -175px;
  margin-top: -70px;
  border-radius: 10px / 30px;
  transform: rotate(-30deg);
}
#right-ear-plug {
  background: #E75E25;
  width: 15px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 175px;
  margin-top: -60px;
  border-radius: 15px / 30px;
  transform: rotate(30deg);
}

#left-eye-socket {
  background: #231F20;
  width: 170px;
  height: 220px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -150px;
  margin-top: -200px;
  border-radius: 170px / 220px;
  transform: rotate(-20deg);
}
#right-eye-socket {
  background: #231F20;
  width: 170px;
  height: 220px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -10px;
  margin-top: -190px;
  border-radius: 170px / 210px;
  transform: rotate(20deg);
}
#left-eye {
  background: #FEFAD5;
  width: 120px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -135px;
  margin-top: -175px;
  border-radius: 120px / 180px;
  transform: rotate(-10deg);
}
#right-eye {
  background: #FEFAD5;
  width: 120px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 25px;
  margin-top: -170px;
  border-radius: 120px / 180px;
  transform: rotate(10deg);
}



#left-numbers, #right-numbers {
  font-size: 56px;
  margin-bottom: -20px;
  color: lime;
  font-family: 'Kameron', serif;
}

#left-numbers p, #right-numbers p{
  font-size: 62px;
  margin-bottom: -10px;
  color: #231F20;
  font-family: 'Kameron', serif;
}

#left-numbers {
  width: 120px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -145px;
  margin-top: -225px;
  border-radius: 120px / 180px;
}

#right-numbers {
  width: 120px;
  height: 180px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 20px;
  margin-top: -220px;
  border-radius: 120px / 180px;
}


#mouth-socket {
  background: #E75E25;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-left: 7px solid #231F20;
  border-bottom: 10px solid #231F20;
  border-right: 5px solid #231F20;
  margin-left: -115px;
  margin-top: 10px;
  border-radius: 200px;
}

#left-nose {
  background: #E75E25;
  width: 60px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -70px;
  margin-top: -30px;
  border-radius: 70px / 60px;
  border-left: 7px solid #231F20;
  border-top: 10px solid #231F20;
  
  transform: rotate(20deg);
}
#right-nose {
  background: #E75E25;
  width: 60px;
  height: 54px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-top: 10px solid #231F20;
  border-right: 7px solid #231F20;
  margin-left: -6px;
  margin-top: -28px;
  border-radius: 65px / 60px;
  transform: rotate(-20deg);
}
#hitler-mustache {
  background: #231F20;
  width: 35px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -25px;
  margin-top: 15px;
  transform: rotate(5deg);
}

#left-nose-shadow {
  width: 25px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -55px;
  margin-top: -7px;
  border-radius: 20px / 20px;
  border-left: 7px solid #231F20;
  border-top: 10px solid #231F20;
  transform: rotate(50deg);
}
#right-nose-shadow {
  width: 25px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-right: 5px solid #231F20;
  border-top: 10px solid #231F20;
  border-right: 5px solid #231F20;
  margin-left: 18px;
  margin-top: -4px;
  border-radius: 20px / 20px;
  transform: rotate(-50deg);
}
#left-nose-hole {
  background: #231F20;
  width: 20px;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -55px;
  margin-top: -5px;
  border-radius: 20px / 15px;;
  transform: rotate(-30deg);
}
#right-nose-hole {
  background: #231F20;
  width: 20px;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 26px;
  margin-top: 0px;
  border-radius: 20px / 15px;
  transform: rotate(30deg);
}




#left-lip {
  background: #E75E25;
  width: 40px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -46px;
  margin-top: 28px;
  border-radius: 30px / 50px;
  transform: rotate(0deg);
}
#right-lip {
  background: #E75E25;
  width: 30px;
  height: 104px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: 35px;
  border-radius: 65px / 60px;
  transform: rotate(8deg);
}

#jay-leno-left {
  background: #E75E25;
  width: 90px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: 165px;
  border-left: 7px solid #231F20;
  border-bottom: 5px solid #231F20;
  border-radius: 0px 80px 40px 80px;
  transform: rotate(5deg);
}
#jay-leno-right {
  background: #E75E25;
  width: 70px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: 198px;
  border-right: 7px solid #231F20;
  border-bottom: 5px solid #231F20;
  border-radius: 0px 00px 40px 0px;
  transform: rotate(5deg);
}

#mouth {
  background: #231F20;
  width: 70px;
  height: 90px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -90px;
  margin-top: 91px;
  border-top: 15px solid #E75E25;
  border-right: 25px solid #E75E25;
  border-left: 10px solid #E75E25;
  border-bottom: 5px solid #E75E25;
  border-radius: 65px / 60px;
  transform: rotate(-15deg);
}

#tongue {
  background: #E75E25;
  width: 82px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: 135px;
  border-radius: 90px 50px 20px 0px;
  transform: rotate(-15deg);
}

#tongue-shadow {
  background: #231F20;
  width: 45px;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -59px;
  margin-top: 168px;
  border-radius: 200px 0px 200px 50px;
  transform: rotate(5deg);
}

#jay-lenno-mask {
  background: #E75E25;
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: 180px;
  border-radius: 90px 90px 50px 50px;
  transform: rotate(-5deg);
}




#top-hair {
  background: #231F20;
  width: 60px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -223px;
  border-radius: 65px / 60px;
  transform: rotate(-20deg);
}
#top-hair-mask {
  background: #FEFAD5;
  width: 60px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -213px;
  border-radius: 65px / 60px;
  transform: rotate(-16deg);
}

#left-cheek-ball-1 {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -190px;
  margin-top: -30px;
  border-radius: 100px;
  border-bottom: 10px solid #231F20;
  transform: rotate(-50deg);
}
#left-cheek-ball-2 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -225px;
  margin-top: -70px;
  border-radius: 100px;
  border-bottom: 30px solid #231F20;
  transform: rotate(-60deg);
}

#left-cheek-ball-3 {
  width: 50px;
  height: 90px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: -185px;
  margin-top: 20px;
  border-radius: 100px;
  border-right: 20px solid #231F20;
  transform: rotate(0deg);
}


#right-cheek-ball-1 {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 145px;
  margin-top: 30px;
  border-radius: 100px;
  border-left: 10px solid #231F20;
  transform: rotate(-20deg);
}
#right-cheek-ball-2 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 65px;
  margin-top: 70px;
  border-radius: 100px;
  border-left: 30px solid #231F20;
}

#right-cheek-ball-3 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%; 
  margin-left: 115px;
  margin-top: 20px;
  border-radius: 100px;
  border-left: 30px solid #231F20;
  transform: rotate(0deg);
}
Host Instantly Drag and Drop Website Builder

 

Description

Pure CSS. First time using HAML. Working with HAML was very convenient as otherwise the code would have been less readable. This is a 3h work.
Term
Wed, 11/29/2017 - 11:20

Related Codes

Pen ID
Pen ID