<div class="header">
  <div class="left-head">
  <img src="https://cdn0.iconfinder.com/data/icons/social-media-circle-long-shadow/1024/facebook-512.png" alt="logo" style="width: 50px;"/><h1>Friendbook</h1>
  </div>
  <div>
    <ul class="right-head">
      <li><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
    </ul>
  </div>
</div>
<hr/>
<div class="cont">
  <div class="form">
    <h2>Log In</h2>
    <input type="text" placeholder="Please enter your username." id="name" />

    <input type="password" placeholder="Please enter your password." id="pw" />
    
    <button id="submit" onclick="signIn()">Submit</button> 
  </div>
  </div>
  
</div>
<hr/>
<div class="main">
  <h2>News Feed</h2>
  <ul id="items">
  </ul>
</div>
html {
  overflow-x: hidden;
}

body {
 margin: 1em;
  color: #37528b;
}

hr {
  border-bottom: 1px solid 
#37528b;
  margin-left: -1em;
  width: 100vw;
  margin-bottom: 1em;
}

.header {
  margin-top: -1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-head {
  display: flex;
  align-items: center;
}

.left-head>img {
  margin-right: 1em;
}

.right-head {
  display: flex;
  list-style: none;
}

li {
  margin: 0 10px;
}

a {
  color: 
#37528b;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s linear;
  padding: 5px;
}

a:hover {
  background-color: 
#37528b;
  color: white;
  transform: scale(1.2);
}

.cont {
  text-align: center;
}

input {
  border: 1px ridge #37528b;
  padding: 5px;
}

button {
  outline: none;
  cursor: pointer;
  border: 2px ridge 
#37528b;
  padding: 5px;
  color: 
#37528b;
  font-weight: 700;
  transition: all .5s ease;
}

button:hover {
  border: 2px solid 
#37528b;
  background-color: 
#37528b;
  color: white;
}

.form {
  display: grid;
  justify-content: center;
  margin: 1em auto;
  width: 25vw;
  grid-gap: 5px;
}

.main {
  display: grid;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  padding: 0;
  margin: 1em 0;
}


var users = [
  {
    username: "Brittney",
    password: "supersecret"
  },
  {
    username: "Joe",
    password: "123"
  },
  {
    username: "Friend",
    password: "abc"
  }
]

var newsFeed = [
  {
    username: "Bobby",
    timeline: "So tired from all that learning!"
  },
  {
    username: "Sally",
    timeline: "JavaScript is soooooo cool!"
  },
  {
    username: "Mitch",
    timeline: "I love JavaScript!"
  },
]

let listItems = newsFeed.reduce((result, item) => {
    
    result += `<li style="list-style-type: none;">${item.username} - ${item.timeline}</li>`;
    
    return result;
  }, ''); 
  
let resultElement = document.getElementById('items');

function signIn() {
  let name = document.getElementById('name').value
  let pass = document.getElementById('pw').value
  const form = document.querySelectorAll('input')

  for (let i = 0; i < users.length; i++) {
    if (users[i].username === name && users[i].password === pass) {
      form.forEach(input => input.value = '')
      return resultElement.innerHTML = listItems
    } else {
      resultElement.innerHTML = "Wrong Username or Password."
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.