Untitled

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SecondTask</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" media="screen" href="css/style.css" />
</head>

<body>

  <main>
    <header class="header">
      <div class="header__title">Smart Home Monitoring</div>
      <time class="header__time">Friday 2/23/2017</time>
    </header>
    <section>
      <div class="item">
        <h1> Temperature </h1>
        <br> <h2>75&deg;</h2>
        <br> <div class="item__positive"> + </div> &nbsp; &nbsp; &nbsp; &nbsp; <div class="item__positive"> - </div>
      </div>
      <div class="item">
        <h1> Electricity </h1>
        <br> <h2>84</h2>
        <br> <div class="item__valute"> kWh </div>
      </div>
      <div class="item">
        <h1> WiFi </h1>
        <br> <h2>21</h2>
        <br> <div class="item__valute"> Mb/s </div>
      </div>
      <div class="item">
        <h1>Security </h1>
        <br> <h2><i class="fa fa-unlock-alt" aria-hidden="true"></i></h2>
        <br> <div class="item__valute"> Unarmed </div>
      </div>

      <div class="item item--hidden"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
      <div class="item item--hidden"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
    </section>

    <section>

      <div class="item item-five-main">
        <div class="item-five"><i class="fa fa-th downicon" aria-hidden="true"></i></div>
        <div class="item-five"><i class="fa fa-cog downicon" aria-hidden="true"></i></div>
      </div>

      <div class="item item-six-main">
        <div class="item-six">
          Monday <br>
          <img src="img/1.png" alt="Monday weather" height="62" width="62"> <br>
          <div class="item__valute">52&deg;</div>
        </div>
        <div class="item-six">
          Tuesday <br>
          <img src="img/5.png" alt="Tuesday weather" height="62" width="62"> <br>
          <div class="item__valute">58&deg;</div>
        </div>
        <div class="item-six">
          Wednesday <br>
          <img src="img/3.png" alt="Wednesday weather" height="62" width="62"> <br>
          <div class="item__valute">63&deg;</div>
        </div>
        <div class="item-six">
          Thursday <br>
          <img src="img/4.png" alt="Thursday weather" height="62" width="62"> <br>
          <div class="item__valute">59&deg;</div>
        </div>
        <div class="item-six">
          Friday <br>
          <img src="img/5.png" alt="Friday weather" height="62" width="62"> <br>
          <div class="item__valute">50&deg;</div>
        </div>
        <div class="item-six">
          Saturday <br>
          <img src="img/6.png" alt="Saturday weather" height="62" width="62"> <br>
          <div class="item__valute">47&deg;</div>
        </div>
        <div class="item-six">
          Sunday <br>
          <img src="img/7.png" alt="Monday weather" height="62" width="62"> <br>
          <div class="item__valute">49&deg;</div>
        </div>
      </div>
    </section>
  </main>


  <script src="https://use.fontawesome.com/de6202bdee.js"></script>
</body>

</html>

$navcolor: #07f;
$white: #fff;
$maincolor: #e5f0f8;
$hoverover: #e5e5e5;

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: bold;
}

main {
  background-color: $maincolor;
  height: 100%;
  margin: 0 auto;
  max-width: 1000px;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.header {
  background-color: $navcolor;
  color: $white;
  padding: 20px;

  &__title {
    display: inline;
    text-transform: uppercase;
  }

  &__time {
    float: right;
  }
}

h2 {
  font-size: 50px;
  margin: 0;
}

.item {
  background-color: $white;
  margin: 10px;
  text-align: center;
  width: 230px;

  &__positive { display: inline; }

  &__valute { margin-bottom: 20px; }

  &--hidden { display: none; }

  &-five-main {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  &-five {
    background-color: $white;
    flex: 1;
    font-size: 40px;
    padding: 10px;
    padding-top: 25px;

    &:nth-child(2) {
      margin-top: 10px;
    }

  }

  &-six-main {
    display: flex;
    flex-grow: 5;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  &-six {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;

    img {
      padding-bottom: 20px;
      padding-top: 20px;
    }

    &:hover {
      background-color: $hoverover;
    }

  }
}

@media(max-width: 1015px) {
  body {
    background-color: rgb(182, 253, 255);
  }

  .item {
    &--hidden {
      display: block;
      font-size: 40px;
      padding-top: 80px;
    }

    &-five-main { display: none; }
  }

}

@media(max-width: 765px) {
  body {
    background-color: rgb(205, 255, 182);
  }

  .item {
    &--hidden {
      display: block;
      font-size: 40px;
      padding-bottom: 70px;
      padding-top: 70px;
    }
  }

}

@media(max-width: 515px) {
  body {
    background-color: rgb(255, 87, 227);
  }

  .item {
    margin-left: 15px;
    width: 390px;
  }

  .header {
    padding: 30px;

    &__title {
      float: left;
      font-size: 12px;
    }

    &__time {
      float: right;
      font-size: 12px;
    }
  }

}