feedster

In this example below you will see how to do a feedster with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0319AM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0319AM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>feedster</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="https://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-xs-2">
            <h1>feedster</h1>
          </div>
          <div class="col-xs-2 pull-right">

            <div class="notification">
              <img class src="https://s3.amazonaws.com/codecademy-content/projects/2/feedster/bell.svg">
              <ul class="notification-menu">
                <li>
                  <img class="avatar" src="https://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="https://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="https://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="https://s3.amazonaws.com/codecademy-content/projects/2/feedster/dog.jpg">
          <button class="btn">+1</button>
        </div>

        <div class="post">
          <img class="avatar" src="https://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="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/feedster-gxPdLJ */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
}

.container {
  max-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;
  text-align: right;
}

.notification img {
  padding: 10px 0;
}

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

.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;
}


/*Downloaded from https://www.codeseek.co/0319AM/feedster-gxPdLJ */
var main = function() {
  $(".notification img").click(function() {
    $(".notification-menu").toggle();
  });
  $(".post .btn").click(function() {
    $(this).toggleClass("btn-like");
  });
}

$(document).ready(main);

Comments