<!doctype html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-2">
            <h1>feedster</h1>
          </div>
          <div class="col-md-1 col-md-offset-9">

            <div class="notification">
              <img class src="http://s3.amazonaws.com/codecademy-content/projects/2/feedster/bell.svg">
              <ul class="notification-menu">
                <li>
                  <img class="avatar" src="http://s3.amazonaws.com/codecademy-content/projects/2/feedster/wr2.svg">
                  <h3>William Roberts II</h3>
                  <p>Clean as a whistle</p>
                </li>
                <li>
                  <img class="avatar" src="http://s3.amazonaws.com/codecademy-content/projects/2/feedster/fn.svg">
                  <h3>Faheem Najm</h3>
                  <p>All I do is win</p>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="posts">
      <div class="container">
        
        <div class="post">
          <img class="avatar" src="http://s3.amazonaws.com/codecademy-content/projects/2/feedster/cbj.svg">
          <h3>Calvin Broadus, Jr.</h3>
          <p>How much for that dogg in the window?</p>
          <img src="http://s3.amazonaws.com/codecademy-content/projects/2/feedster/dog.jpg">
          <button class="btn">+1</button>
        </div>

        <div class="post">
          <img class="avatar" src="http://s3.amazonaws.com/codecademy-content/projects/2/feedster/mh.svg">
          <h3>Matthew Healy</h3>
          <p>I used to have a recurring dream when I was younger.</p>
          <button class="btn">+1</button>
        </div>
        
      </div>
    </div>
    <script src="http://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
}

.container {
  width: 700px;
  margin: 0 auto;
}

.header {
  background-color: #000;
}

.header h1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 32px;
  font-weight: 200;
  color: #fff;
  margin: 0;
  padding: 7px 0;
}

.notification {
  position: relative;
}

.notification img {
  padding: 10px 0;
}

.notification-menu {
  position: absolute;
  top: 50px;
  left: -200px;
  background-color: #e5e5e5;
  border: #989898;
  padding: 10px;
  list-style: none;
  width: 250px;
  display: none;
}

.notification-menu li {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

.notification-menu .avatar {
  padding: 2px 0;
}

.notification-menu h3 {
  font-size: 15px;
  margin: 0 0 5px 0;
  display: inline;
}

.notification-menu p {
  margin-bottom: 0;
  font-size: 14px;
}

.post {
  background-color: #fff;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

.post .avatar {
  padding-right: 10px;
  padding-bottom: 5px;
}

.post h3 {
  font-size: 16px;
  margin-top: 0;
  display: inline;
}

.post p {
  font-size: 14px;
}

.post p + img {
  width: 100%;
  margin-bottom: 15px;
}

.btn {
  color: #333;
  border-color: #ccc;
  background-color: transparent;
  font-weight: 600;
}

.btn-like {
  background-color: #CC0000;
  border-color: #B20000;
  color: #fff;
}

.btn-like:hover,
.btn-like:focus {
  color: #fff;
}
var main = function() {
  
}

$(document).ready(main);
Created from scratch
184 forks
99 views

Browse more Codebits