JRGould/index.html

## index.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>
	<!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>