Web Design

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Батарейка, Соц-сети, Индикатор выполнения</title>
  <style>
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /*             Батарейки                 */

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

   .b {
     width: 150px;
     height: 50px;
     border: 4px solid #000;
     margin-bottom: 10px;
     position: relative;
   }

   .b::before,
   .b::after {
     content: '';
     position: absolute;
   }

   .b::after {
     width: 10px;
     height: 20px;
     background: #000;
     right: -10px;
     top: 15px;
   }

   .b::before {
     height: 100%;
   }

   .low::before {
     width: 100%;
     background: #00A055;
   }

   .medium::before {
     width: 65%;
     background: #FFC60B;
   }

   .high::before {
     width: 30%;
     background: #ED1C24;
   }

   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

   /*             Социальные сети                 */

   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

  * {
  margin: 0;
  padding: 0;
}

.pers1 {
  background: url(http://htmlbook.ru/files/person1.jpg) no-repeat;
}
.pers2{
  background: url(http://htmlbook.ru/files/person2.jpg) no-repeat;
}
.pers3 {
  background: url(http://htmlbook.ru/files/person3.jpg) no-repeat;
}
.pers1, .pers2, .pers3  {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 20px 20px;
  border-radius: 50%;
  border: 3px solid lightgrey;
  position: relative;
  background-size: contain;
}
.vk, .tw, .faceb, .mess {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url(http://htmlbook.ru/files/social_icons.png) no-repeat;
  position: absolute;

}
.vk {
  left: 10px;
  top: 0;
  background-position: -60px -30px;

}
.tw {
  left: -10px;
  top: 30px;
  background-position: -30px -30px;
}
.faceb {
  left: -15px;
  top: 65px;
  background-position: 0px -30px;
}
.mess {
  left: calc(50% - 15px);
  bottom: -15px;
  background-position: -90px -30px;
}
.pers2 .tw, .pers2 .faceb {
  display: none;
}
.pers3 .tw {
  display: none;
}
.vk:hover {
  background-position: -60px 0px;
}
.tw:hover {
  background-position: -30px 0px;
}
.faceb:hover {
  background-position: 0px 0px;
}
.mess:hover {
  background-position: -90px 0px;
}

   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

   /*             Индикатор выполнения                  */

   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

   #indicator {
  width: 250px;
  border: 1px solid #333;
  position: relative;
  background: #fff;
}

#indicator .half {
  background: #f2f0e3;
  position: absolute;
  height: 100%;
  width: 50%;
}

#indicator .begin,
#indicator .end {
  position: absolute;
  font-size: 0.9em;
  top: 1px;
}

#indicator .begin {
  padding-left: 3px;
}

#indicator .end {
  right: 0;
  padding-right: 3px;
}

#indicator .current {
  position: relative;
  text-align: center;
}

  </style>
</head>

<body>
  <div class="b low"></div>
  <div class="b medium"></div>
  <div class="b high"></div>

  <div class="pers1">
  <a href="http://www.vk.com/" target="_blank" title="ВКонтакте" class="vk"></a>
  <a href="http://www.twitter.com/" target="_blank" title="Твиттер" class="tw"></a>
  <a href="http://www.facebook.com/" target="_blank" title="Фейсбук" class="faceb"></a>
  <a href="http://www.gmail.com/" target="_blank" title="Сообщения" class="mess"></a>
</div>
<div class="pers2">
  <a href="http://www.vk.com/" target="_blank" title="ВКонтакте" class="vk"></a>
  <a href="http://www.twitter.com/" target="_blank" title="Твиттер" class="tw"></a>
  <a href="http://www.facebook.com/" target="_blank" title="Фейсбук" class="faceb"></a>
  <a href="http://www.gmail.com/" target="_blank" title="Сообщения" class="mess"></a>
</div>
<div class="pers3">
  <a href="http://www.vk.com/" target="_blank" title="ВКонтакте" class="vk"></a>
  <a href="http://www.twitter.com/" target="_blank" title="Твитер" class="tw"></a>
  <a href="http://www.facebook.com/" target="_blank" title="Фейсбук" class="faceb"></a>
  <a href="http://www.gmail.com/" target="_blank" title="Сообщения"  class="mess"></a>
</div>

  <div id="indicator">
  <div class="half"></div>
  <span class="begin">0</span>
  <span class="end">100</span>
  <div class="current">50%</div>
</body>
</html>