diff --git a/css/icons.css b/css/icons.css
diff --git a/css/icons.png b/css/icons.png
diff --git a/css/movos__componentts.css b/css/movos__componentts.css
diff --git a/css/styles.css b/css/styles.css
@@ -143,6 +143,7 @@ body{
 .fixed-footer .footer{
   margin-top: auto;
 }
+
 [href^="tel:"] {
   text-decoration: none;
   white-space: nowrap;
@@ -229,6 +230,57 @@ body:before{
 }
 
 
+.tabs__item.active{
+  display: block;
+
+}
+.tabs__item{
+  display: none;
+
+}
+.tabs__nav a.active {
+  color: red;
+
+}
+
+.menu-opener{
+  position: fixed;
+  top: 20px;
+  right: 10px;
+  z-index: 6;
+}
+.burger{
+  background: #3f4e86;
+  padding: 10px;
+  width: 70px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.burger span{
+  height: 5px;
+  margin: 5px;
+  background: #fff;
+}
+.menu-opener.active .burger span:nth-child(2){
+  display: none;
+}
+.menu-opener.active .burger span:nth-child(1){
+  position: absolute;
+  width: 4px;
+  height: 10px;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin: 0;
+}
+.menu-opener.active .burger span:nth-child(3){
+  background: none;
+  height: 38px;
+  border: 4px solid #fff;
+  border-radius: 50%;
+}
 
 .menu ul {
   list-style: none; 
@@ -340,39 +392,42 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#586799', end
 
 
 
-/*.text__title{
-  font-size: 24px; 
-  color: #626c97;  
-}
-.text__text{
-   font-size: 13px;
-}
-.text__text span {
-  color: #3f4e86;
-} 
-.text__title_black{
-  color: black;
-  font-size: 21px;
-}
-.text__subtitle{
-  font-size: 17px;
-  color: black;
-}*/
 
-.painted-block{
-  background: #3f4e86;
+
+.square-block{
+ background: #3f4e86;
   color: #cacfe2;
   font-size: 12px;
-  padding: 15px 10px;
-  min-height: 140px;
+  padding: 13px 10px;
+  height: 140px;  
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
-  text-align: center; 
-
+  text-align: center;  }
+.square-block:hover{
+  background: #f9a513;
+  color: #343434;
 }
+.square-block:hover > .sprite-standing-man_hower{
+  background-position: -198px -147px;
+} 
+.square-block:hover >  .sprite-clock_hower{
+  background-position: 54px 53px;
+} 
+.square-block:hover >  .sprite-person-half_hower {
+  background-position: -189px -51px;
+} 
+.square-block:hover >  .sprite-hat-_hower{
+  background-position: -141px -101px;
+} 
+.square-block:hover >  .sprite-bulb_hower{
+  background-position: -90px -5px;
+} 
+.square-block:hover >  .sprite-calendar_hower{
+  background-position: -139px -53px;
+} 
 .block__circle{
   border-radius: 100%;
   width: 60px; 
@@ -404,9 +459,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#586799', end
 
   text-align: left;
 }
-/*p{
-  margin: 10px 0;
-}*/
+
 .block_phrase .text__subtitle{
   text-align: center; 
 }

diff --git a/icons/bulb_hower.png b/icons/bulb_hower.png
diff --git a/icons/calendar_hower.png b/icons/calendar_hower.png
diff --git a/icons/clock_hower.png b/icons/clock_hower.png
diff --git a/icons/hat._hower.png b/icons/hat._hower.png
diff --git a/icons/person-half_hower.png b/icons/person-half_hower.png
diff --git a/icons/standing-man_hower.png b/icons/standing-man_hower.png
diff --git a/index.html b/index.html
diff --git a/js/src.js b/js/src.js
@@ -0,0 +1,32 @@
+console.log(document, ' file')
+var menu_opener = document.getElementById('menu-opener');
+console.log(menu_opener)
+var menu = document.getElementById('menu');
+console.log(menu)
+menu_opener.addEventListener('click', function(){
+  console.log('click work')
+  console.log(menu_opener.classList.contains('active'))
+  if(menu_opener.classList.contains('active')){
+    console.log('triggered true')
+    menu_opener.classList.remove("active");
+    menu.classList.remove("active");
+  }else{
+    console.log('triggered false')
+    menu_opener.classList.add("active");
+    menu.classList.add("active");
+  }
+})
+  var tabNavItems = document.querySelectorAll('.tabs__nav [data-tab]')
+console.log(tabNavItems)
+tabNavItems.forEach(
+  function(item, index, arr){
+    console.log(item === arr[index])
+    console.log(item,index,arr)
+    item.addEventListener('click', function(event){
+      event.preventDefault();
+      console.log(event)
+      console.log(this)
+      console.log(this.dataset.tab)
+    })
+  }
+)
diff --git a/services.html b/services.html
diff --git a/sprites/spritesheet.png b/sprites/spritesheet.png
diff --git a/sprites/spritesheetblocks.png b/sprites/spritesheetblocks.png
diff --git a/sprites/stylesheet.css b/sprites/stylesheet.css
@@ -1,23 +1,119 @@
 .sprite {
     background-image: url(spritesheet.png);
     background-repeat: no-repeat;
-
+    display: block;
+}
+
+.sprite-bookcase {
+    width: 26px;
+    height: 32px;
+    background-position: -5px -5px;
+}
+
+.sprite-bulb {
+    width: 39px;
+    height: 40px;
+    background-position: -41px -5px;
+}
+
+.sprite-bulb_hower {
+    width: 39px;
+    height: 40px;
+    background-position: -90px -5px;
+}
+
+.sprite-calendar {
+    width: 40px;
+    height: 38px;
+    background-position: -139px -5px;
+}
+
+.sprite-calendar_hower {
+    width: 40px;
+    height: 38px;
+    background-position: -139px -53px;
+}
+
+.sprite-clock {
+    width: 35px;
+    height: 40px;
+    background-position: -5px -101px;
+}
+
+.sprite-clock_hower {
+    width: 35px;
+    height: 40px;
+    background-position: -50px -101px;
+}
+
+.sprite-hat {
+    width: 36px;
+    height: 40px;
+    background-position: -95px -101px;
+}
+
+.sprite-hat-_hower {
+    width: 36px;
+    height: 40px;
+    background-position: -141px -101px;
+}
+
+.sprite-head {
+    width: 27px;
+    height: 32px;
+    background-position: -5px -151px;
+}
+
+.sprite-horn {
+    width: 29px;
+    height: 28px;
+    background-position: -42px -151px;
 }
 
 .sprite-icon-piople {
     width: 32px;
     height: 26px;
-    background-position: -5px -5px;
+    background-position: -81px -151px;
 }
 
 .sprite-icon-tie {
     width: 17px;
     height: 32px;
-    background-position: -47px -5px;
+    background-position: -5px -53px;
 }
 
 .sprite-icon-tv {
     width: 25px;
     height: 32px;
-    background-position: -5px -47px;
-}
+    background-position: -123px -151px;
+}
+
+.sprite-opinion {
+    width: 30px;
+    height: 32px;
+    background-position: -158px -151px;
+}
+
+.sprite-person-half- {
+    width: 40px;
+    height: 36px;
+    background-position: -189px -5px;
+}
+
+.sprite-person-half_hower {
+    width: 40px;
+    height: 36px;
+    background-position: -189px -51px;
+}
+
+.sprite-standing-man {
+    width: 26px;
+    height: 40px;
+    background-position: -189px -97px;
+}
+
+.sprite-standing-man_hower {
+    width: 26px;
+    height: 40px;
+    background-position: -198px -147px;
+}
diff --git a/sprites/stylesheetblocks.css b/sprites/stylesheetblocks.css