<div class="container">
  <div class="grid_4">
  <section class="box widget locations">
  <div class="avatar">
  <img src="scrtpxls_location.png" />
  </div>
  <div class="details">
  <h2>De Westerkerk</h2>
  <p>Prinsengracht 281</p>
  <a href="#" class="btn btn-primary btn-block btn-large">найти на карте</a>
  </div>
  </section>
  <section class="box widget calendar">
  <header class="header">
  <h2>Суббота</h2>
  <p><span class="icon-arrow-left"></span>Январь<span class="icon-arrow-right"></span></p>
  </header>
  <article class="days">
  <ul>
  <li class="previous">30</li>
  <li class="previous">31</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li class="next">1</li>
  <li class="next">2</li>
  </ul>
  </article>
  </section>
  </div>
  <div class="grid_8">
  <nav class="box nav">
  <ul>
  <li>
  <a href="#">
  <span class="icon-home"></span>

  <span class="title">Главная</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-images"></span>

  <span class="title">Галерея</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-bubble"></span>

  <span class="title">Почта</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-music"></span>

  <span class="title">Музыка</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-search"></span>

  <span class="title">Поиск</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-cog"></span>

  <span class="title">Настройки</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-location"></span>

  <span class="title">Локации</span>
  </a>
  </li>
  </ul>
  </nav>
  <div class="inner_container">
  <div class="col_1of3">
  <section class="box widget video">
  <img src="scrtpxls_video.png" alt="" />
  </section>
  <section class="box widget weather">
  <header class="header">
  <div class="temp">10° <span class="icon-brightness-half"></span></div>
  <span class="icon-partlycloudy"></span>
  </header>
  <article>
  <h2>Суббота 16 Января</h2>
  </article>
  </section>
  </div>
  <div class="col_2of3">
  <article class="box post">
  <div class="image">
  <img src="scrtpxls_post.png" />
  </div>
  <div class="details">
  <h2>Амстердам</h2>
  <p>Название города произошло от двух слов: «Амстел» и «дамба». Амстел — название реки, на которой расположен город.</p>
  </div>
  </article>
  </div>
  <div class="col_2of3">
  <section class="box widget audio">
  <div class="image">
  <img src="scrtpxls_audio.png" />
  </div>
  <div class="details">
  <h2 class="album">Geef mij maar Amsterdam</h2>
  <p class="artist">Johnny Jordaan</p>
  <div class="player">
  <div class="bar">
  <div class="progress" data-time="1:45"></div>
  </div>
  <div class="actions">
  <a href="#" class="btn"><span class="icon-arrow-left"></span></a>
  <a href="#" class="btn btn-primary"><span class="icon-pause"></span></a>
  <a href="#" class="btn"><span class="icon-arrow-right"></span></a>
  </div>
  </div>
  </div>
  </section>
  </div>
  <div class="col_1of3">
  <section class="box widget find">
  <input type="text" name="find" placeholder="Введите запрос" />
  <label for="favorite" class="checkbox">
  <input type="checkbox" id="favorite" name="favorite" />
  Детальный поиск
  </label>
  <a href="#" class="btn btn-primary btn-large btn-block">Поиск</a>
  </section>
  </div>
  </div>
  <nav class="box nav">
  <ul>
  <li>
  <a href="#">
  <span class="icon-home"></span>

  <span class="title">Главная</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-images"></span>

  <span class="title">Галерея</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-bubble"></span>

  <span class="title">Почта</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-music"></span>

  <span class="title">Музыка</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-search"></span>

  <span class="title">Поиск</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-cog"></span>

  <span class="title">Настройки</span>
  </a>
  </li>
  <li>
  <a href="">
  <span class="icon-location"></span>

  <span class="title">Локации</span>
  </a>
  </li>
  </ul>
  </nav>
  </div>
</div>

.btn {
  display: inline-block;
  padding: 6px 14px;
  background: #f2f2f2;
  border-radius: 3px;
  color: #7a7a7a;
  font-size: (13/16) + em;
  transition: background .3s ease, color .3s ease;
  text-decoration: none;
  &:hover {
  background: darken(#f2f2f2, 5%);
  color: darken(#b9bcbc, 15%);
  }
  &.btn-primary {
  background: $primary;
  color: rgba(255,255,255,.9);
  &:hover, &.active {
  background: darken($primary, 5%);
  }
  }
  &.btn-large {
  padding: 12px 28px;
  }
  &.btn-caps {
  text-transform: uppercase;
  }
  &.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  }
}
input[type="text"] {
  width: 100%;
  border: 1px solid #cfcfcf;
  background: #ebebeb;
  height: 28px;
  font-size: (12/16) + em;
  padding: 5px;
  outline: none;
  border-radius: 3px;
  margin-bottom: 7px;
  transition: background .3s ease;
}
input[type="text"]:focus {
  background: lighten(#ebebeb, 2%);
}
.checkbox {
  color: #ccc;
  text-shadow: 1px 1px 1px rgba(255,255,255,.4);
  font-size: (11/16) + em;
  margin-bottom: 7px;
  display: inline-block;
}
.box {
  background: #f9f9f9;
  box-shadow: 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.1);
  border-radius: 5px;
  margin-bottom: 20px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.1);
  h2 {
  color: $primary;
  font-size: (14/16) + em;
  }
  p {
  font-size: (12/16) + em;
  color: #7d7d7d;
  }
}
.locations {
  padding: 30px;
  text-align: center;
  .avatar {
  border-radius: 50%;
  img {
  border-radius: 50%;
  }
  }
  .details {
  margin-top: 30px;
  }
  .btn {
  margin-top: 30px;
  }
}
.calendar {
  text-align: center;
  .header {
  padding: 10px 0;
  }
  [class*="icon-"]{
  color: $primary;
  position: relative;
  top: 2px;
  margin: 0 5px;
  display: inline-block;
  cursor: pointer;
  }
  .days {
  background: $primary;
  padding: 20px;
  border-radius: 0 0 5px 5px;
  ul {
  margin: 0;
  padding: 0;
  }
  li {
  display: inline-block;
  color: #fff;
  padding: 5px 0;
  width: 30px; height: 30px;
  text-align: center;
  cursor: pointer;
  @media (max-width: 767px) {
  width: 20px; height: 20px;
  }
  &.next, &.previous {
  color: rgba(0,0,0,.2);
  }
  }
  }
}
.nav {
  a {
  text-decoration: none;
  color: #cccccc;
  text-shadow: 1px 1px 1px rgba(255,255,255,.5);
  font-size: (12/16) + em;
  &:hover {
  color: $primary;
  }
  }
  [class*="icon-"] {
  font-size: (24/12) + em;
  margin-bottom: 5px;
  display: inline-block;
  }
  ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  }
  li {
  display: inline-block;
  a {
  display: block;
  padding: 20px 18px;
  }
  }
}
.weather {
  .header {
  border-radius: 5px 5px 0 0;
  padding: 20px 0;
  background: $primary;
  text-align: center;
  color: #fff;
  font-size: (50/16) + em;
  }
  [class*="icon-"] {
  position: relative;
  top: 2px;
  }
  article {
  text-align: center;
  padding: 5px 0;
  }
}
.video {
  position: relative;
  cursor: pointer;
  &:before {
  content: '';
  border: 2px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.1);
  width: 50px; height: 50px;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  margin: -20px 0 0 -20px;
  transition: background .3s ease;
  }
  &:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  margin: -5px 0 0 2px;
  border: 10px solid transparent;
  border-left: 10px solid rgba(255,255,255,.8);
  }
  &:hover {
  &:before {
  background: rgba(255,255,255,.3);
  }
  }
  img {
  border-radius: 5px;
  }
}
.post {
  img {
  border-radius: 5px 5px 0 0;
  }
  .details {
  padding: 10px 20px;
  p {
  line-height: 1.5em;
  }
  }
}
.audio {
  position: relative;
  height: 120px;
  .image {
  position: absolute;
  top: 0;
  left: 0;
  img {
  border-radius: 5px 0 0 5px;
  }
  }
  .details {
  padding: 10px 0;
  margin-left: 140px;
  }
  .actions {
  position: absolute;
  right: 10px;
  bottom: 20px;
  .btn {
  width: 25px; height: 25px;
  display: block;
  float: left;
  margin-left: 5px;
  padding: 5px 6px;
  color: #FFF;
  }
  }
  .player {
  .bar {
  margin: 30px 0 0;
  height: 4px;
  background: #cccccc;
  width: 60%;
  border-radius: 2px;
  .progress {
  width: 45%;
  background: $primary;
  border-radius: 2px;
  height: 4px;
  position: relative;
  &:before {
  content: attr(data-time);
  background: $primary;
  display: inline;
  position: absolute;
  font-size: (11/16) + em;
  color: #fff;
  padding: 4px 6px;
  border-radius: 3px;
  right: -14px;
  bottom: 9px;
  }
  &:after {
  content: '';
  border: 5px solid transparent;
  border-top: 5px solid $primary;
  position: absolute;
  right: -3px;
  bottom: 0px;
  }
  }
  }
  }
}
.find {
  padding: 10px;
}