CodePen Embed - Super Mario (KiKaGiGa) 🎮

<div class="container">
  <div class="mario-container">
    <div class="hat">
      <div class="logo-hat"></div>
      <div class="mid-shadow-hat"></div>
      <div class="shadow-hat"></div>
    </div>
    <div class="face-container">
      <div class="left-ear">
        <div class="l-ear"></div>
        <div class="l-ear"></div>
        <div class="l-ear"></div>
      </div>
      <div class="face">
        <div class="eye-container">
          <div class="eye"></div>
        </div>
        <div class="left-sideburn"></div>
        <div class="nose"></div>
        <div class="right-sideburn"></div>
        <div class="moustache-container">
          <div class="moustache"></div>
          <div class="moustache"></div>
        </div>
        <div class="blush-container">
          <div class="blush"></div>
        </div>
      </div>
      <div class="right-ear">
        <div class="r-ear"></div>
        <div class="r-ear"></div>
        <div class="r-ear"></div>
      </div>
    </div>
    <div class="top-body-container">
      <div class="top-body">
      </div>
      <div class="mario-body">
          <div class="button-container">
              <div class="button"></div>
        </div>
        </div>
      <div class="rectangle-container">
            <div class="rectangle-body"></div>
          </div>
      <div class="left-arm"></div>
      <div class="hand">
      </div>
      <div class="right-arm"></div>
    </div>
    <div class="bottom-body-container">
      <div class="pants-container">
        <div class="pants"></div>
        <div class="pants"></div>
      </div>
      <div class="feet-container">
        <div class="foot"></div>
        <div class="foot"></div>
      </div>
    </div>
  </div>
</div>

html,body,.container{
  padding:0;
  margin:0;
  height:100vh;
}

body{
 background:#D7D6B8;  
}

body:after{
  margin:0;
  padding:0;
  content:"";
  display:grid;
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  background-image:url(https://images.pexels.com/photos/479462/pexels-photo-479462.jpeg?cs=srgb&dl=pexels-icon-com-479462.jpg&fm=jpg);
  background-size:80px 80px;
  mix-blend-mode:soft-light;
  opacity:0.2;
}

.container{
  display:grid;
  align-items:center;
  justify-content:center;
  
}
/*------------------------------------------*/
.mario-container{
  display:grid;
  justify-content:center;
  height:469px;
  width:482px;
}

/*------------------------------------------*/
.hat-container{
  display:grid;
  justify-self:center;
  height:129px;
  width:384px;
}

.hat{
  display:grid;
  align-items:center;
  justify-content:center;
  justify-self:center;
  height:129px;
  width:384px;
  background:#B50001;
  border-radius:66px 66px 0px 0px;
  z-index:3;
  overflow:hidden;
}

.logo-hat{
  display:grid;
  align-items:center;
  justify-content:center;
  justify-self:center;
  height:64px;
  width:96px;
  background:#EAE9E5;
  border-radius:32px;
  transform:translatex(-2px);
}

.logo-hat:before{
  content:"";
  display:grid;
  height:64px;
  width:64px;
  background:red;
  clip-path: polygon(30% 0, 0 50%, 100% 50%, 70% 0, 50% 20%);
  transform:translateY(13px);
}

.mid-shadow-hat{
  display:grid;
  height:57px;
  width:274px;
  border:16px solid #641703;
  border-bottom:0;
  border-radius:64px 64px 0 0;
}

.shadow-hat{
  display:grid;
  height:16px;
  width:44px;
  background:#641703;
  transform:translate(-39px,-23px);
  box-shadow: 340px 0px 0px #641703;
}

/*------------------------------------------*/

.face-container{
  display:grid;
  z-index:0;
  grid-template-columns:repeat(3,1fr);
  height:130px;
  width:482px;
}

/*--------*/

.left-ear{
  display:grid;
  height:130px;
  width:65px;
}

.l-ear:nth-child(1):before{
  content:"";
  display:grid;
  height:3px;
  width:18px;
  background:#40371A;
  transform:translate(13px,-16px);
}

.l-ear:nth-child(1){
  display:grid;
  z-index:1;
  height:64px;
  width:64px;
  background:#E09673;
  border-radius:50%;
  transform:translate(36px,16px);
}

.l-ear:nth-child(2){
  height:96px;
  width:96px;
  background:#40371A;
  border-radius:50%;
  transform:translate(16px,-64px);
}

.l-ear:nth-child(3){
  display:grid;
  height:64px;
  width:64px;
  border-radius:50%;
  background: #40371A;
  transform:translate(0px,-130px);
}

/*--------*/

.face{
  display:grid;
  z-index:1;
  height:130px;
  width:352px;
  background:#E09673;
  border-radius: 0px 0px 32px 32px;
}

.face:after{
  content:"";
  display:grid;
  height:32px;
  width:352px;
  background:#D07A31;
  transform:translatey(-389px);
}

.nose{
  display:grid;
  z-index:1;
  justify-self:center;
  height:96px;
  width:96px;
  background:#BD551E;
  border-radius:50%;
  transform:translatey(-129px);
}

.eye-container{
  display:grid;
  z-index:1;
  justify-self:center;
  height:49px;
  width:225px;
  transform:translatey(17px);
}

.eye{
  display:grid;
  height:49px;
  width:34px;
  border-radius:17px;
  background:#40371A;
  box-shadow:191px 0 0 #40371A;
}

.moustache-container{
  display:grid;
  grid-template-columns:repeat(2,64px);
  align-items:center;
  justify-self:center;
  height:50px;
  width:194px;
  overflow:hidden;
  transform:translatey(-225px);
}

.moustache:nth-child(1){
  display:grid;
  height:64px;
  width:64px;
  border-radius:50%;
  background:#40371A;
  box-shadow:130px 0 0 #40371A;
  transform:translatey(-40px);
}

.moustache:nth-child(2){
  display:grid;
  justify-self:center;
  height:96px;
  width:96px;
  background:#40371A;
  border-radius:50%;
  transform:translatey(-46px);
}

.blush-container{
  display:grid;
  justify-self:center;
  height:34px;
  width:290px;
  transform:translate(-1px,-289px);
}

.blush{
  display:grid;
  height:34px;
  width:34px;
  background:#D87C93;
  box-shadow: 259px 0 0 #D87C93;
}

.left-sideburn{
  display:grid;
  z-index:1;
  height:80px;
  width:32px;
  background:#40371A;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
  transform:translate(-1px,-50px);
}

.right-sideburn{
  display:grid;
  z-index:1;
  justify-self:end;
  height:80px;
  width:32px;
  background:#40371A;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
  transform:translate(1px,-226px) rotatey(180deg);
}
/*--------*/

.right-ear{
  display:grid;
  height:130px;
  width:65px;
  transform:rotateY(180deg) translatex(1px);
}

.r-ear:nth-child(1):before{
  content:"";
  display:grid;
  height:3px;
  width:18px;
  background:#40371A;
  transform:translate(12px,-16px);
}

.r-ear:nth-child(1){
  display:grid;
  z-index:1;
  height:64px;
  width:64px;
  background:#E09673;
  border-radius:50%;
  transform:translate(36px,16px);
}

.r-ear:nth-child(2){
  height:96px;
  width:96px;
  background:#40371A;
  border-radius:50%;
  transform:translate(16px,-64px);
}

.r-ear:nth-child(3){
  display:grid;
  height:64px;
  width:64px;
  border-radius:50%;
  background: #40371A;
  transform:translate(0px,-130px);
}

/*------------------------------------------*/

.top-body-container{
  display:grid;
  height:160px;
  width:482px;
  transform:translatey(-32px);
}

.top-body{
  display:grid;
  justify-self:center;
  height:96px;
  width:290px;
  background:#B50001;
  clip-path: polygon(17% 0%, 83% 0%, 100% 100%, 0% 100%);
}

.top-body-container:before{
  content:"";
  display:grid;
  z-index:4;
  justify-self:center;
  height:32px;
  width:226px;
  background:#0006;
  transform:translatey(31px);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}

.left-arm{
  display:grid;
  z-index:2;
  height:96px;
  width:34px;
  background:#B50001;
  transform:skew(-27.5deg) translate(-14px,-257px);
}

.mario-body{
  display:grid;
  justify-self:center;
  z-index:1;
  height:96px;
  width:225px;
  background:#5C5D8D;
  transform:translate(0,-32px);
  border-radius:0px 0px 34px 34px;
}

.button-container{
  display:grid;
  justify-self:center;
  height:32px;
  width:130px;
  transform:translatey(1px);
}

.button{
  display:grid;
  height:32px;
  width:32px;
  background:#F89202;
  border-radius:50%;
  box-shadow: 98px 0px 0px #F89202;
}

.rectangle-container{
 display:grid;
 z-index:3;
 justify-self:center;
 height:65px;
 width:128px;
 transform:translate(0px,-192px);
}

.rectangle-body{
  display:grid;
  height:65px;
  width:32px;
  background:#5C5D8D;
  box-shadow: 96px 0px 0px #5C5D8D;
}

.right-arm{
  display:grid;
  z-index:2;
  height:96px;
  width:34px;
  background:#B50001;
  transform:skew(27.5deg) translate(530px,-387px) rotatey(180deg);
}

.hand{
  display:grid;
  justify-self:center;
  height:34px;
  width:322px;
  background:#EAE9E5;
  transform:translate(0px,-257px);
  border-radius:17px;
}

/*------------------------------------------*/

.bottom-body-container{
  display:grid;
  justify-self:center;
  height:50px;
  width:226px;
}

.pants-container{
  display:grid;
  justify-self:center;
  height:17px;
  width:194px;
}

.pants{
  display:grid;
  height:19px;
  width:82px;
  background:#5C5D8D;
  clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
  transform:translatey(-1px);
}

.pants:nth-child(2){
  transform:rotatey(180deg) translate(-112px,-20px);
}

.feet-container{
  display:grid;
  height:33px;
  width:;226px;
}

.foot{
  display:grid;
  height:33px;
  width:81px;
  background:#443A1F;
  border-radius:18px 0px 0px 0px;
}

.foot:nth-child(2){
  border-radius: 0px 18px 0px 0px;
  transform:translate(145px,-33px);
}

//Original -> https://www.behance.net/gallery/18534289/KiKaGiGa-Mario

This Pen is owned by BlurSoulx on CodePen.

See more by @BlurSoulx on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.