CSS Challenge 2 - Navbar Creation

CSS Challenge 2 - Navbar Creation

by schrodingers

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>CSS Challenge 2 - Navbar Creation</title>
  </head>

  <body>
    <div class="navbar">
      <div class="title-container">
        <h1 class="title">Navbar</h1>
      </div>
      <div class="menu">
        <p><a href="#" class="menu-item">Home</a></p>
        <p><a href="#" class="menu-item">About Us</a></p>
        <p><a href="#" class="menu-item">Our Mission</a></p>
        <p><a href="#" class="menu-item">Services</a></p>
        <p><a href="#" class="menu-item">Contact Us</a></p>
      </div>
    </div>
  </body>

</html>

CSS

/* DON'T TOUCH THIS! */
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
.navbar {
  margin-top: 0;
  text-align: center;
  background-color: #1d3557;
  color: #fdfffc;
}
.menu {
  display: flex;
  justify-content: space-around;
}
a {
  color: #fdfffc;
  text-decoration: none;
}
a:hover {
  filter: blur(1px);
  color: 1px solid #a8dadc;
}


/* Your goal is to turn basic HTML into a responsive, functional navbar, which includes both arranging the items and styling them. The navbar must stretch across the whole page & have a background color set. The items must be arranged horizontally & be placed below the title, which is centered in the middle of the navbar. Good luck! */