CodePen

HTML

            
              <div class="smiley-face">
  <div class="left-eye eye"></div>
  <div class="right-eye eye"></div>
  <div class="left-freckles freckles"></div>
  <div class="right-freckles freckles"></div>
  <div class="mouth">
    <h1>Smile More</h1>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Chivo:900);

*, *:before, *:after {
  box-sizing: border-box;
  user-select: none;
}

$darkYellow: #d08215;
$mediumYellow: #f9b522;


html {
  background-color: #fcc030;
  @include background-image(radial-gradient(center, circle, #fdca28, #fcc030));
}

.smiley-face {
  height: 375px;
  left: 50%;
  margin: -188px 0 0 -205px;
  position: absolute;
  top: 50%;
  width: 410px;
}

.eye {
  background-color: $darkYellow;
  border-radius: 50%;
  height: 87px;
  position: relative;
  width: 87px;
  
  &:before, &:after {
    background-color: #fff;
    border-radius: 50%;
    content: '';
    position: absolute;
  }
  
  &:before {
    height: 29px;
    top: 14px;
    right: 18px;
    width: 29px;
  }
  
  &:after {
    height: 12px;
    right: 15px;
    top: 42px;
    width: 12px;
  }
}

.left-eye {
  float: left;
  margin-bottom: 65px;
}

.right-eye {
  float: right;
}

.freckles {
  background-color: #fff;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  top: 100px;
  width: 10px;
  
  &:before, &:after {
    background-color: inherit;
    border-radius: inherit;
    content:'';
    height: inherit;
    position: absolute;
    width: inherit;
  }
}

.left-freckles {
  left: 0;
  
  &:before {
    left: -8px;
    top: 17px;
  }
  
  &:after {
    right: -12px;
    top: 12px;
  }
}

.right-freckles {
  right: 0;
  
  &:before {
    left: -12px;
    top: 12px;
  }
  
  &:after {
    right: -8px;
    top: 17px;
  }
}



.mouth {
  background-color: $darkYellow;
  border-radius: 0 0 200px 200px;
  height: 206px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: inherit;
  
  animation: smile 1.25s ease-out;
}

h1 {
  color: #fff;
  
  font: {
    family: 'Chivo', sans-serif;
    size: 3.5em;
  }
  margin: 70px auto 0;
  position: relative;
  text: {
    shadow: 0 5px 5px #f3a612;
    transform: uppercase;
  }
  width: 200px;
  z-index: 1;
  
  &:before {
    background-color: $mediumYellow;
    border-radius: 200px 200px 0 0;
    clip: rect(auto, auto, auto, auto);
    content:'';
    height: 190px;
    left: -70px;
    position: absolute;
    top: -50px;
    width: 350px;
    z-index: -1;
  }
}

@keyframes smile {
  0% {
    border-radius: 0 0 20px 20px;
    height: 20px;
  }
  100% {
    border-radius: 0 0 200px 200px;
    height: 206px;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
* Inspired by Cristina Ordaz smiley face. I put this together  
* quickly so didn't spend to much time reducing the amount of 
* elements, please fork if you can reduce the elements! :)
* 
* Design can be found here -
* http://drbl.in/gmtW
*
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................