<section class="container">
  <header class="header">
    <div class="left"><a href="#"><span class="icon"></span></a></div>
    <div class="right"><a href="#"><span class="icon"></span></a></div>
  </header>
  <nav class="main-nav">
    <ul>
      <li><a href="#"><span class="icon"></span><span class="text">Proofs</span></a></li>
      <li><a href="#"><span class="icon"></span><span class="text">Recent Events</span></a></li>
      <li><a href="#"><span class="icon"></span><span class="text">Care Team</span></a></li>
      <li><a href="#"><span class="icon"></span><span class="text">Body Map</span></a></li>
      <li><a href="#"><span class="icon"></span><span class="text">Profile</span></a></li>
      <li><a href="#"><span class="icon"></span><span class="text">Settings</span></a></li>
      <li><a href="#"><span class="icon"></span><span class="text">Log Out</span></a></li>
    </ul>
  </nav>
</section>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  width: 100%;
  height: 100%;
  background-color: #003040
}
a{
  text-decoration: none;
  outline: none;
}
.container{
  width: 400px;
  height: 463px;
  margin: 0 auto;
  margin-top: 4em;
  background-color: #cdd4d2;
  background-image: url('https://d13yacurqjgara.cloudfront.net/users/4859/screenshots/1129760/side_menu.png');
}
.header{
  background-color: #40bca7;
  padding: 15px;
}
.header div{
  display: inline-block;
  width: 49%;
}
.header div:nth-child(2){
  text-align: right;
}
.header div:nth-child(1) span:before{
  content: "\f00d";
  color: #fff;
}
.header div:nth-child(2) span:before{
  content: "\f030";
  color: #fff;
}
nav.main-nav ul{
  list-style: none;
  background-color: #535555;
  opacity: 0.95;
}
nav.main-nav ul li{
  color: #fff;
  border-top: 1px solid #1a1c1d;
}
nav.main-nav ul li a{
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 15px;
}
nav.main-nav ul li:hover a{
  color: #40bca7;
}
.icon{
  font-size: 23px;
}
.icon:before{
  font-family: FontAwesome;
}
.text{
  font-family: lato;
  font-weight: 300;
  font-size: 23px;
  margin-left: 15px;
}
li:nth-child(1) .icon:before{
  content:  "\f0ca";
}
li:nth-child(2) .icon:before{
  content:  "\f017";
}
li:nth-child(3) .icon:before{
  content:  "\f0f1";
}
li:nth-child(4) .icon:before{
  content:  "\f08a";
}
li:nth-child(5) .icon:before{
  content:  "\f007";
}
li:nth-child(6) .icon:before{
  content:  "\f013";
}
li:nth-child(7) .icon:before{
  content:  "\f011";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.