main.html

<!--
  <i class="fa fa-circle" aria-hidden="true"></i>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus malesuada ipsum, vitae mattis nunc pretium sit amet. Curabitur ut lobortis nulla, nec varius ligula. Donec in placerat dui. Proin cursus ipsum risus, eu scelerisque augue tincidunt sit amet. Nunc tincidunt quam sed congue suscipit. Nullam eget dignissim ante, id rhoncus eros. Sed dignissim sollicitudin mi.
-->

<head>
  <title>Mockup</title>
  <link rel="stylesheet" type="text/css" href="./main.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
  <div class="sidebar">
    <h1>
      Inbox
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
    </h1>

    <ul>
      <li> All Messages </li>
      <li class="active"> Unread </li>
      <li> Important </li>
      <li> Drafts </li>
    </ul>

    <ul>
      <li> Teams </li>
      <li> Groups </li>
      <li> Channels </li>
      <li> Locations </li>
      <li> Media </li>
    </ul>

    <ul>
      <li> Help </li>
      <li> Settings </li>
    </ul>
  </div>

  <div class="search-panel">
  </div>

  <div class="chat-panel">
  </div>

  <div class="profile-panel">
  </div>
</body>