CodePen

HTML

            
              <div class="horse">
  <div class="saddle"></div>
  <div class="belly"></div>
  <div class="middle"></div>
  <div class="chin"></div>
  <div class="neck"></div>
  <div class="face"></div>
  <div class="top"></div>
  <div class="bridge"></div>
  <div class="eye"></div>
  <div class="ear"></div>
  <div class="back_ear"></div>
  <div class="bridle"></div>
  <div class="nose"></div>
  <div class="nostrils"></div>
  <div class="thigh"></div>
  <div class="leg"></div>
  <div class="hoof"></div>
  <div class="shoe"></div>
  <div class="ring"></div>
  <div class="circle"></div>
  <div class="mane"></div>
  <div class="top_mane"></div>
  <div class="bubbles"></div>
  <div class="skull">
    <div class="cranium"></div>
    <div class="jaw"></div>
    <div class="teeth"></div>
  </div>
</div>

<div class="water"></div>
            
          
!
via HTML Inspector

CSS

            
              html, body {
  width: 100%;
  height: 100%;
  background: #F8F1E0;
}

body:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url() center center no-repeat;
  background-size: cover;
  z-index: 100;
}

.water {
  width: 100%;
  height: 100%;
  background: #E4542B;
  margin-top: 389px;
  position: relative;
}

.water:after {
  content: '';
  width: 100%;
  height: 75px;
  top: -75px;
  position: absolute;
  background: 
linear-gradient(135deg, #F8F1E0 25%, transparent 25%) -64px 0,
linear-gradient(225deg, #F8F1E0  25%, transparent 25%) -64px 0,
linear-gradient(45deg, transparent 25%, transparent 25%);	
background-size: 128px 128px;
background-color: #E4542B;
}

.horse {
  width: 650px;
  height: 530px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

.saddle {
  width: 140px;
  height: 160px;
  position: absolute;
  left: 140px;
  top: -85px;
  overflow: hidden;
}

.saddle:before, .saddle:after {
  content: '';
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #C9A781;
  position: absolute;
  box-shadow: 4px 4px 0 0 #F8F1E0;
  z-index: -1;
}

.saddle:before {
  bottom: 18px;
  right: 18px;
  z-index: 1;
}

.saddle:after {
  right: 4px;
  bottom: 4px;
}

.belly {
  width: 315px;
  height: 112px;
  left: 145px;
  position: absolute;
  z-index: -2;
  overflow: hidden;
}

.belly:after {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: #493E2A;
  right: 0;
  top: -255px;
}

.middle {
  width: 75px;
  height: 160px;
  position: absolute;
  top: 100px;
  left: 263px;
  background: #493E2A;
}

.middle:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 60px;
  background: #E4542B;
  left: -240px;
  top: 200px;
  z-index: -1;
}

.middle:after {
  content: '';
  width: 215px;
  height: 190px;
  position: absolute; 
  left: -41px;
  top: -78px;
  background: #493E2A;
  transform: rotate(45deg);
}

.neck {
  width: 245px;
  height: 190px;
  top: 170px;
  left: 3px;
  position: absolute;
  transform: rotate(-45deg);
  overflow: hidden;
  box-shadow: 50px 0 0 #493E2A;
}

.neck:after {
  content: '';
  width: 560px;
  height: 560px;
  border-radius: 50%;
  position: absolute;
  background: #493E2A;
  top: 0px;
  left: -62px;
}

.face {
  width: 100px;
  height: 170px;
  background: #F8F1E0;
  position: absolute;
  left: 100px;
  top: 320px;
  transform: rotate(-45deg);
}

.chin {
  width: 35px;
  height: 80px;
  position: absolute;
  background: #493E2A;
  transform: rotate(-38deg);
  top: 330px;
  left: 182px;
}

.face:after {
  content: '';
  width: 75px;
  height: 130px;
  position: absolute;
  background: #F8F1E0;
  transform: rotate(8deg);
  top: 88px;
  left: 44px;
}

.face:before {
  content: '';
  width: 67px;
  height: 118px;
  background: #F8F1E0;
  position: absolute;
  left: -22px;
  top: 45px;
  transform: rotate(-18.5deg);
}

.top {
  position: absolute;
  width: 43px;
  height: 130px;
  left: 31px;
  top: 330px;
  transform: rotate(-45deg);
  overflow: hidden;
}

.top:after {
  content: '';
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  top: -70px;
  left: -20px;
  background: #F8F1E0;
}

.bridge {
  width: 45px;
  height: 38px;
  position: absolute;
  background: #F8F1E0;
  left: 168px;
  top: 457px;
  transform: rotate(-17.5deg);
}

.bridge:after {
  content: '';
  position: absolute;
  background: #F8F1E0;
  width: 32px;
  height: 22px;
  top: 28px;
  left: 30px;
  transform: rotate(41deg);
}

.eye {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #493E2A;
  top: 450px;
  position: relative;
  left: 170px;
  box-shadow: 0 0 0 8.5px #C9A781,
              0 0 0 12.5px #F8F1E0,
              0 0 0 19px #E4542B;
}

.ear {
  width: 62px;
  height: 40px;
  position: absolute;
  left: 22px;
  top: 445px;
  transform: rotate(-45deg);
  overflow: hidden;
  box-shadow: -2px 4px 0 0 #E4542B;
}

.ear:after {
  content: '';
  position: absolute;
  width: 103px;
  height: 103px;
  border-radius: 50%;
  background: #F8F1E0;
}

.back_ear {
  width: 70px;
  height: 32px;
  left: 33px;
  top: 475px;
  position: absolute;
  transform: rotate(-75deg);
  overflow: hidden;
  z-index: -1;
}

.back_ear:before {
  content: '';
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: absolute;
  left: -6px;
  background: #493E2A;
}

.bridle {
  width: 95px;
  height: 17px;
  position: absolute;
  background: #493E2A;
  top: 470px;
  left: 204px;
  transform: rotate(-45deg);
  overflow: hidden;
}

.bridle:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 19px;
  background: #E4542B;
  top: 0;
  left: -5px;
  transform: rotate(-18deg);
}

.nose {
  width: 67px;
  height: 67px;
  top: 452px;
  left: 242px;
  position: absolute;
  background: #F8F1E0;
  transform: rotate(22deg);
  z-index: -1;
}

.nose:after {
  content: '';
  position: absolute;
  width: 55px;
  height: 51px;
  background: #F8F1E0;
  top: 4px;
  left: 38px;
  transform: rotate(45deg)
}

.nose:before {
  content: '';
  position: absolute;
  width: 26px;
  height: 10px;
  background: #F8F1E0;
  top: -4px;
  left: 41px;
  transform: rotate(-21.5deg);
}

.nostrils {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: 0 9.5px 51px 9.5px;
  border-color: transparent transparent #E4542B transparent;
  transform: rotate(-57deg);
  left: 324px;
  top: 475px;
}

.nostrils:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-width: 16px 16px 0 0;
  border-style: solid;
  border-color: #E4542B transparent transparent transparent;
  left: -42px;
  top: -13px;
  transform: rotate(-8deg);
}

.thigh {
  width: 57px;
  height: 208px;
  position: absolute;
  background: #493E2A;
  top: 93px;
  left: 442px;
  transform: rotate(-47deg);
}

.thigh:after {
  content: '';
  position: absolute;
  width: 41px;
  height: 155px;
  background: #493E2A;
  left: 37px;
  top: -5px;
  transform: rotate(16deg);
}

.leg {
  width: 35px;
  height: 171px;
  position: absolute;
  background: #493E2A;
  transform: rotate(47deg);
  top: 133px;
  left: 560px;
}

.leg:after {
  content: '';
  position: absolute;
  background: #493E2A;
  width: 27px;
  height: 90px;
  left: -12px;
  top: 35px;
  transform: rotate(15deg);
}

.hoof {
  width: 75px;
  height: 38px;
  left: 576px;
  top: 133px;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 -4px 0 #F8F1E0;
}

.hoof:after {
  content: '';
  position: absolute;
  width: 41px;
  height: 62px;
  background: #493E2A;
  top: -12px;
  left: 22px;
  transform: rotate(-26deg);
}

.hoof:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 50px;
  background: #493E2A;
  left: 12px;
  top: -13px;
  transform: rotate(-39deg);
}

.shoe {
  width: 70px;
  height: 43px;
  position: absolute;
  left: 560px;
  top: 86px;
  overflow: hidden;
}

.shoe:after {
  content: '';
  position: absolute;
  width: 49px;
  height: 47px;
  background: #C9A781;
  top: 12px;
  left: 12px;
  transform: rotate(-33deg);
}

.ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  border: 2px solid #C9A781;
  left: 281px;
  top: 413px;
  box-shadow: 13px -20px 0 -16px #F8F1E0,
            19.5px -30px 0 -16px #F8F1E0,
              24px -40px 0 -16px #F8F1E0,
              29px -50px 0 -16px #F8F1E0,
              32px -60px 0 -16px #F8F1E0,
              35px -70px 0 -16px #F8F1E0,
              38px -80px 0 -16px #493E2A,
              40px -90px 0 -16px #493E2A,
              42px -100px 0 -16px #493E2A,
              43px -110px 0 -16px #493E2A,
              43.5px -120px 0 -16px #493E2A,
              43px -130px 0 -16px #493E2A,
              43px -140px 0 -16px #493E2A,
              42px -150px 0 -16px #493E2A,
              41px -160px 0 -16px #493E2A,
              39px -170px 0 -16px #493E2A,
              37px -180px 0 -16px #F8F1E0,
              34px -190px 0 -16px #F8F1E0,
              30px -200px 0 -16px #F8F1E0,
              26px -210px 0 -16px #F8F1E0,
              21px -220px 0 -16px #F8F1E0,
              16px -230px 0 -16px #F8F1E0,
              9px -240px 0 -16px #F8F1E0,
              2px -250px 0 -16px #F8F1E0,
              -6px -260px 0 -16px #F8F1E0,
              -14px -268px 0 -16px #F8F1E0,
              -22px -276px 0 -16px #F8F1E0,
              -30px -283px 0 -16px #F8F1E0,
              -38px -290px 0 -16px #F8F1E0,
              -49px -298px 0 -16px #F8F1E0,
              -59px -304px 0 -16px #F8F1E0,
              -70px -310px 0 -16px #F8F1E0,
              -82px -315px 0 -16px #F8F1E0,
              -95px -320px 0 -16px #F8F1E0,
              -107px -324px 0 -16px #F8F1E0,
              -119px -327px 0 -16px #F8F1E0,
              -131px -329px 0 -16px #F8F1E0,
              -143px -330px 0 -16px #F8F1E0;
}

.mane {
  width: 221px;
  height: 250px;
  position: absolute;
  left: -50px;
  top: 67px;
  overflow: hidden;
  transform: rotate(-22deg);
  z-index: -2;
}

.mane:after {
  content: '';
  width: 472px;
  height: 472px;
  border-radius: 50%;
  background: #E4542B;
  position: absolute;
  top: -15px;
  left: 70px;
  box-shadow: 29px -59px 0 0  #F8F1E0,
              -42px 26px 0 0  #E4542B,
              -41px -40px 0 0 #F8F1E0,
              -42px 26px 0 0 #E4542B,
              -60px 42px 0 0  #E4542B;

}

.top_mane {
  width: 45.5px;
  height: 122px;
  position: absolute;
  left: 9px;
  top: 319px;
  overflow: hidden;
  transform: rotate(-45deg);
  z-index: -1;
  border-right: 4px solid #F8F1E0;
}

.top_mane:after {
  content: '';
  width: 336px;
  height: 336px;
  border-radius: 50%;
  position: absolute;
  background: #493E2A;
  top: -60px;
  left: 9px;
}

.bubbles {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 419px;
  left: 441px;
  background: #F8F1E0;
  box-shadow: 17px 59px 0 -3.5px #F8F1E0,
             -10px 147px 0 12.5px #F8F1E0,
              25px 200px 0 4.5px #F8F1E0,
             -20px 265px 0 8.5px #F8F1E0,
              0 351px 0 -1px #F8F1E0;
}

.skull {
  width: 157px;
  height: 172px;
  position: absolute;
  left: 370px;
  top: 783px;
}

.cranium {
  width: 157px;
  height: 157px;
  top: 41px;
  left: 18px;
  position: absolute;
  transform: rotate(-35deg);
  overflow: hidden;
}

.cranium:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 25px 14px 0 14px;
  border-color: #E4542B transparent transparent transparent;
  left: 65px;
  top: 0;
}

.cranium:before {
  content: '';
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #E4542B;
  position: absolute;
  left: 17px;
  top: 11px;
  box-shadow: 75px 0 0 0 #E4542B,
              38px 12px 0 54px #493E2A;
}

.jaw {
  width: 55px;
  height: 16px;
  background: #493E2A;
  left: 10px;
  top: 23px;
  position: absolute;
  transform: rotate(-35deg);
  z-index: -1;
}

.jaw:before {
  content: '';
  width: 57px;
  height: 37px;
  position: absolute;
  background: #493E2A;
  top: 7px;
  left: -6px;
  transform: rotate(14deg);
}

.jaw:after {
  content: '';
  position: absolute;
  width: 60px;
  height: 39px;
  background: #493E2A;
  right: -4px;
  top: 6px;
  z-index: -1;
  transform: rotate(-12deg);
}

.teeth {
  width: 6px;
  height: 11px;
  left: 8px;
  top: 23px;
  background: #493E2A;
  position: absolute;
  transform: rotate(-35.5deg);
  box-shadow: 17px 0 0 0 #493E2A,
              26px 0 0 0 #493E2A,
              35px 0 0 0 #493E2A;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................