<div class="calendar-todo">
  <div class="container">
    
    <div class="background">
      <header>
        <div class="menu">
          <i class="fa fa-bars fa-2x fa-inverse"></i>
        </div>
        <div class="search">
          <i class="fa fa-search fa-2x fa-inverse"></i>
        </div>
      </header>
      <br /><br />
      <h1>Good Morning!</h1>
      <div class="avatar"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/avatar-calendar.png" alt="avatar" />
      <div class="notification-badge">3</div>
      </div>
      <div class="month-block">
        <div class="left"><i class="fa fa-angle-left fa-2x fa-inverse"></i></div>
        
        <div class="right"><i class="fa fa-angle-right fa-2x fa-inverse"></i></div>
        <div class="month">February</div>
      </div> <!--end month-block-->
    </div> <!--end background-->
    
    
    <ul class="calendar">
      <li>
        <span class="day">Sun</span>
        <span class="number">7</span>
      </li>
      <li>
        <span class="day">Mon</span>
        <span class="number selected">8</span>
        <div class="dot"> </div>
        
      </li>
      <li>
        <span class="day">Tue</span>
        <span class="number">9</span>
      </li>
      <li>
        <span class="day">Wed</span>
        <span class="number">10</span>
      </li>
      
      <li>
        <span class="day">Thu</span>
        <span class="number">11</span>
      </li>
      <li>
        <span class="day">Fri</span>
        <span class="number">12</span>
        <div class="dot"> </div>
      </li>
      <li>
        <span class="day">Sat</span>
        <span class="number">13</span>
      </li>
      
    </ul> <!--end calendar-->
    
    
    
    <ul class="todo">
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/calendar-avatar1.png" alt="avatar" />

        <div class="todo-description">New subpage for Janet</div>
        <div class="todo-details">8 - 10am <span class="location"></span></div>

      </li>
      
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/calendar-avatar2.png" alt="avatar2" />
        <div class="todo-description">Catch up with Tom</div>
        <div class="todo-details">11 - 12am <span class="location">Hangouts</span></div>
      </li>
      
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/calendar-avatar3.png" alt="avatar3" />
        <div class="todo-description">Lunch with Diane</div>
        <div class="todo-details">12pm <span class="location">Restaurant</span></div>
      </li>
    </ul> <!--end todo-->
    
    <div class="add-button">
      +
    </div>
    
  </div> <!-- end container -->
</div> <!-- end calendar-todo -->

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);


*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #314555;
}

.calendar-todo {  
  font: 16px/25px "Lato", Arial, sans-serif;
  padding: 40px 0;
}

.container {
  margin: 0 auto;
  width: 445px;
  height: 830px;
  background: white;
  position: relative
}

.background {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/calender-bg.jpg");
  width: 445px;
  height: 415px;
}

.fa {
  color: #BAB7B8;
}



header {
  dispaly: block;
  float: none;
  padding: 20px;
}

.menu {
  float: left;
  cursor: pointer;
}

.search {
  float: right;
  cursor: pointer;
}

h1 {
  color: white;
  font-size: 36px;
  letter-spacing: 4px;
  font-weight: 300;
  text-align: center;
}

.avatar {
  margin: 60px 0 45px;
  text-align: center;
  
  .notification-badge {
    position: absolute;
    right: 155px;
    top: 175px;
    color: white;    
    background: #50D2C2;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding-top: 7px;
    
  }
}

.month-block {
  //text-align: center;
  //margin: auto;
  padding: 0 20px;
  //display:inline-block;
  
  .left {
    float: left;
    cursor: pointer;
  }
  
  .right {
    float: right;
    cursor: pointer;
  }
  
  .month {
    color: #D7D7D9;
    text-transform: uppercase;
    margin:auto;
    padding-top: 5px;
    letter-spacing: 2px;
    font-weight: 300;
    font-size: 14px;
    width: 85px;
  }
  
}

.calendar {
  padding: 20px;
  text-align: center;

  li {
    display: inline-block;
    margin: 0 5px;    
    
    span {
      display: block;
    }
  }
  
  .day {
    font-size: 14px;
    text-transform: uppercase;
    color: #A4A4A8;
    margin-bottom: 15px;
  }
  
  .number {
    padding: 6px 0; 
    height: 40px;
    width: 40px;

    
  }
  
  .selected {
    background: #F4F4F4;
    border-radius: 50%;   
  }
  
  .dot:after {
    position: absolute;
    margin-left: -3px;
    margin-top: -9px;
    content: ' ';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FC3768;
  }
  
  
}



ul.todo {
  
  li {
    padding: 20px;
    border-top: 1px solid #EFEFF1;
    
  }

  img {
    float: left;
  }
  

  
  .todo-description {
    margin-left: 70px;
    font-size: 16px;
    font-weight: bold;
  }
  
  .todo-details {
    margin-left: 70px;
    color: #9D9D9F;
    
    .location {
      margin-left: 5px;
    }
  }
  
}

.add-button {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: #FC3768;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  text-align: center;
  padding-top: 17px;
  color: white;
  font-size: 50px;
  font-weight: 300;
  cursor: pointer;
}