CodePen

HTML

            
              <div class="wrapper">
  <input type="text" value="1337">
  <ul>
    <li>C</li>
    <li>+-</li>
    <li>%</li>
    <li>/</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>&times;</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>-</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>+</li>
    <li class="long">0</li>
    <li>.</li>
    <li>=</li>
  </ul>  
</div>
            
          
!

CSS

            
              html {
  background: #272c2f url(http://goo.gl/KMUPT);

  color: #333;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
	-webkit-font-smoothing: antialiased;
	font-style, font-weight, letter-spacing, line-height, word-spacing: normal;
}

.wrapper {
  margin: 50px auto;
  width: 320px;
  height: 432px;
  background: #eee;
  box-shadow: 0 0 25px 0 #000;
}

input {
  padding: 30px;
  width: 260px;
  height: 60px;
  border: 0;
  border-bottom: 8px solid #eee;

  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: 0.3rem;
  text-align: right;
}

ul li {
  float: left;
  margin: 0 1px 1px 0;
  width: 79px;
  height: 60px;
  background: #fff;
  display: inline-block;

  font-size: 1.3rem;
  line-height: 6.2rem;
  text-align: center;
  
  -webkit-transition: all 0.5s;
}

ul li:hover {
  background: #eee;
  -webkit-transition: all 0.1s;
}

ul li:nth-child(4n+4), ul li:last-child {
  margin: 0 0 1px 0;
  width: 80px;
}

.long {
  width: 159px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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