wir
12/2/2015 - 1:48 PM

Give it a rest html

Give it a rest html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Give it a REST</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script src="app.js"></script>

  <style>
    .giar {
      position: relative;
      width: 40%;
      margin: 0 auto;
      text-align: center;
      font-family: Helvetica Neue, Helvetica, sans-serif;
      color: #466;
    }
    .giar h1 {
      min-height: 1em;
    }
    .giar .votes {
      position: relative;

      margin: 2em auto;
      font-size: 2em;
    }
    .giar .votes span {
      border: 1px solid #eee;
      cursor: pointer;
      display: inline-block;
      padding: .5em;
    }
    .giar .votes span:hover {
      background: #eee;
    }
    .giar .votes .down {
      margin-right: .3em;
    }
    .giar .votes .down:before {
      content: " ";
    }
    .giar .votes .up {
      margin-left: .3em;
    }
    .giar .votes .up:before {
      content: " ";
    }
    .reading-list ul{
      list-style: none;
      padding: 0;
    }
    .reading-list ul li{
      padding-bottom: .5em;
      margin-bottom: .5em;
      border-bottom: 1px solid #eee;
    }
    a{
      text-decoration: none;
      color: #69c;
    }
    a:hover{
      color: #699;
    }
    .clear-list{
      color: #930;
    }
    .clear-list:hover{
      color: #600;
    }
</style>

</head>
<body>

  <div class=giar>
    <h1>Loading...</h1>
    <div class=votes>
      <span class=down>0</span><span class=up>0</span>
    </div>
    <div class="reading-list">
      <h2>Reading List</h2>
      <ul>
        <li>Items will be added here</li>
      </ul>
    </div>
    <a href="#" class="clear-list">clear</a>
  </div>

</body>
</html>