CodePen

HTML

            
              <!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/styles.css">

</head>
<body>
  <header>
    <h1>FYeah</h1>
    <h2><svg version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" y="0px" width="27px" height="27px" viewBox="-6 -4 27 27" enable-background="new -2.917 -1.75 27 27"
   xml:space="preserve">
<defs>
</defs>
<path class="logo" fill="#3A3026" d="M10.583,0C4.738,0,0,4.888,0,10.917c0,6.027,4.738,10.916,10.583,10.916c5.844,0,10.584-4.889,10.584-10.916
  C21.167,4.888,16.427,0,10.583,0z M13.098,14.933c-0.2,0.781-0.644,1.525-1.334,2.23c-0.751,0.782-1.503,1.174-2.254,1.174
  c-1.012,0-1.518-0.545-1.518-1.633c0-0.491,0.113-1.104,0.341-1.841c0.015-0.03,0.372-1.026,1.07-2.99
  c0.561-1.579,0.842-2.484,0.842-2.714c0-0.292-0.106-0.437-0.319-0.437c-0.38,0-0.806,0.364-1.277,1.092
  c-0.472,0.729-0.753,1.093-0.844,1.093c-0.152,0-0.228-0.107-0.228-0.322c0-0.061,0.092-0.307,0.276-0.736
  c0.628-1.441,1.502-2.162,2.622-2.162c1.027,0,1.541,0.406,1.541,1.219c0,0.506-0.302,1.618-0.906,3.335
  c-0.79,2.331-1.193,3.511-1.208,3.542c-0.093,0.321-0.139,0.605-0.139,0.85c0,0.399,0.146,0.599,0.44,0.599
  c0.386,0,0.78-0.237,1.181-0.713c0.216-0.261,0.509-0.705,0.88-1.334c0.278-0.476,0.463-0.713,0.556-0.713
  c0.215,0.015,0.308,0.138,0.278,0.368V14.933z M13.086,4.605c-0.222,0.215-0.495,0.322-0.816,0.322s-0.594-0.107-0.816-0.322
  C11.231,4.391,11.12,4.123,11.12,3.8c0-0.291,0.115-0.552,0.345-0.782s0.498-0.345,0.805-0.345c0.307,0,0.575,0.111,0.805,0.333
  c0.23,0.223,0.345,0.487,0.345,0.793C13.42,4.123,13.309,4.391,13.086,4.605z"/>
</svg>
Push Them Buttons</h2>
  </header>
  <div class="pad">
    <ul>
      <li>Q</li>
      <li>2</li>
    </ul>  
    <ul>
      <li>&uarr;</li>
      <li>5</li>
    </ul> 
    <ul>
      <li>E</li>
      <li>7</li>
    </ul>  
    <ul>
      <li>R</li>
      <li>&equiv;</li>
    </ul> 
  </div>
  <div role="main">

  </div>
  <footer>

  </footer>

  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

</body>
</html>
            
          
!
via HTML Inspector

CSS

            
              $bodyColor1:#bde151; // h1 green 
$bodyColor2:#5c4c3e; // body brown
$bodyColor3:#3a3026; // h2 drk brown
$bodyColor4:#493d31; // key drkr brown
$bodyColor5:#4c3f33; // border brown
$bodyColor6:#3e342b; // key top brown

body {
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
    background-color: $bodyColor2;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    padding: 50px 100px;

}


header {
    h1 {
        color: $bodyColor1;
        font-size: 4em;
        font-weight: lighter;
        letter-spacing: 10px;
        margin-left: -40px;
    }
    h2 {
       color: $bodyColor3;
       font-size: 2em;
       margin-bottom: 10px; 
       font-style:italic;
       font-weight: lighter;
       font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;  
    
    }

}

.logo {
       -webkit-svg-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
       -moz-svg-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
       svg-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2);
}

.pad {
    padding: 0 10px;
    float: left;
    border: 1px solid hsla(0,0%,0%,.15);
    border-radius: 10px;
    box-shadow: 1px 1px 1px hsla(0,0%,100%,.2),
                inset 1px 1px 1px hsla(0,0%,100%,.2);
    
    ul {
        float: left;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    li {
        border: 1px solid hsla(0,0%,0%,.15);
        border-radius: 10px;
        text-align: center;
        background-color:$bodyColor4 ;
        box-shadow: 4px 4px 4px rgba(000, 000, 000, 0.6),
                inset 1px 1px 1px hsla(0,0%,100%,.2);
        color: #fff;
        white-space: nowrap;
        padding: 20px 25px;
        text-shadow: 1px 1px 1px rgba(000, 000, 000, 0.2);
        margin:20px 10px 20px 10px;
        position: relative;   
     
    }
}
li:hover, li:focus {
        background-color:darken($bodyColor4,4%); 
    }
li:active {
  box-shadow: 1px 0px 1px rgba(000, 000, 000, 0.4);
  @include transform(translate(3px, 3px));
}
li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -5px;
  bottom: -5px;
}
li:active:after {
  top: -3px;
  left: -3px;
  right: -2px;
  bottom: -2px;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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