diff --git a/source/img/logo-black.svg b/source/img/logo-black.svg
new file mode 100644
index 0000000..4620778
--- /dev/null
+++ b/source/img/logo-black.svg
@@ -0,0 +1 @@
+<svg width="74" height="23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1.55A1.29 1.29 0 0 1 1.26.26h7.13c5.06 0 8.39 2.7 8.39 7.13v.06c0 4.85-4.04 7.36-8.8 7.36H2.53v6.8A1.28 1.28 0 0 1 1.27 23 1.27 1.27 0 0 1 0 21.61V1.55Zm8.07 10.97c3.7 0 6.14-2 6.14-4.99v-.06c0-3.2-2.4-4.87-5.96-4.87H2.6v9.88l5.48.04ZM21.6 1.39A1.28 1.28 0 0 1 22.85 0a1.27 1.27 0 0 1 1.27 1.39V21.6A1.28 1.28 0 0 1 22.86 23a1.27 1.27 0 0 1-1.27-1.39V1.4ZM30.67 1.42A1.28 1.28 0 0 1 31.93.17h.34a1.54 1.54 0 0 1 1.29.74l13.6 17.4V1.36A1.24 1.24 0 0 1 48.39.12a1.23 1.23 0 0 1 1.23 1.24v20.3a1.14 1.14 0 0 1-1.15 1.17h-.13a1.7 1.7 0 0 1-1.31-.78L33.12 4.25v17.4a1.26 1.26 0 0 1-1.2 1.25 1.23 1.23 0 0 1-1.2-1.25V1.42h-.05ZM55.94 1.39A1.28 1.28 0 0 1 57.2 0a1.27 1.27 0 0 1 1.26 1.39v12.3L71.23.54c.26-.27.62-.43 1-.45a1.27 1.27 0 0 1 1.21 1.26 1.29 1.29 0 0 1-.41.9l-7.95 7.9 8.57 10.52c.23.26.35.6.35.94a1.31 1.31 0 0 1-1.34 1.28 1.23 1.23 0 0 1-1-.58L63.3 11.86l-4.83 4.85v4.88a1.27 1.27 0 0 1-1.26 1.27 1.26 1.26 0 0 1-1.26-1.27V1.4h-.01Z" fill="#283645"/></svg>
\ No newline at end of file
diff --git a/source/img/quotes.svg b/source/img/quotes.svg
new file mode 100644
index 0000000..c29439b
--- /dev/null
+++ b/source/img/quotes.svg
@@ -0,0 +1,4 @@
+<svg width="79" height="63" viewBox="0 0 79 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.1468 6.97257L30.8388 0C28.3886 1.48142 0 12.0588 0 39.1293C0 46.2698 0.341426 63 18.9793 63C30.2162 63 32.9778 52.8473 32.9778 49.5783C32.9778 27.8508 11.5081 35.5838 11.5081 35.5838C11.5081 17.7771 31.3911 9.06631 35.1468 6.97257Z" fill="#EFEFEF"/>
+<path d="M79 6.97257L74.7322 0C72.302 1.48142 43.8833 12.0588 43.8833 39.1293C43.8833 46.2698 44.2247 63 62.8726 63C74.0995 63 76.8611 52.8473 76.8611 49.5783C76.8611 27.8508 55.3914 35.5838 55.3914 35.5838C55.3914 17.7771 75.3146 9.06631 79 6.97257Z" fill="#EFEFEF"/>
+</svg>
diff --git a/source/index.html b/source/index.html
index f487274..b52f97f 100644
--- a/source/index.html
+++ b/source/index.html
@@ -15,7 +15,7 @@
       <div class="main-header-container">
         <div class="header-header">
           <div class="wrapper">
-            <nav class="main-nav">
+            <nav class="main-nav main-nav--opened">
               <a class="main-nav__logo" href="index.html">
                 <img class="main-nav__pink-logo" src="img/logo.svg" width="74" height="23" alt="Логотип Pink">
               </a>
@@ -23,22 +23,22 @@
               <div class="main-nav__wrapper">
                 <ul class="main-nav__list site-list">
                   <li class="site-list__item site-list__item--active">
-                    <a>
+                    <a class="site-list__item-legend">
                       Главная
                     </a>
                   </li>
                   <li class="site-list__item">
-                    <a href="catalog.html">
+                    <a class="site-list__item-legend" href="catalog.html">
                       Фотографии
                     </a>
                   </li>
                   <li class="site-list__item">
-                    <a href="form.html">
+                    <a class="site-list__item-legend" href="form.html">
                       Конкурс
                     </a>
                   </li>
                   <li class="site-list__item">
-                    <a href="https://htmlacademy.ru/intensive/adaptive">
+                    <a class="site-list__item-legend" href="https://htmlacademy.ru/intensive/adaptive">
                       HTML Academy
                     </a>
                   </li>
@@ -55,18 +55,14 @@
               <div class="header-footer__download download">
                 <ul class="download__list">
                   <li class="download__item">
-                    <a class="download__link download__link--apple" href="https://www.apple.com/ru/app-store/">Загрузить
-                      на
-                      apple</a>
+                    <a class="download__link download__link--apple" href="https://www.apple.com/ru/app-store/"></a>
                   </li>
                   <li class="download__item">
                     <a class="download__link download__link--android"
-                      href="https://play.google.com/store/apps?hl=ru&gl=US">Загрузить на android</a>
+                      href="https://play.google.com/store/apps?hl=ru&gl=US"></a>
                   </li>
                   <li class="download__item">
-                    <a class="download__link download__link--windows" href="https://www.microsoft.com/store/">Загрузить
-                      на
-                      windows</a>
+                    <a class="download__link download__link--windows" href="https://www.microsoft.com/store/"></a>
                   </li>
                 </ul>
                 <p class="download__notes">Доступно для iPhone, iPad, Android, Windows Phone, OS X, Windows 8</p>
@@ -135,9 +131,9 @@ <h3 class="review__owner">Николай Петров</h3>
               </li>
             </ul>
             <p class="review__toggles slider__toggles">
-              <button class="slider__toggle slider-toggle-current" type="button">1</button>
-              <button class="slider__toggle" type="button">2</button>
-              <button class="slider__toggle" type="button">3</button>
+              <button class="slider__toggle slider__toggle-current" type="button"></button>
+              <button class="slider__toggle" type="button"></button>
+              <button class="slider__toggle" type="button"></button>
             </p>
           </div>
         </div>
@@ -254,9 +250,9 @@ <h2 class="visually-hidden">Перечень тарифов</h2>
               </tbody>
             </table>
             <p class="price__toggles slider__toggles">
-              <button class="slider__toggle" type="button">1</button>
-              <button class="slider__toggle slider__toggle-current" type="button">2</button>
-              <button class="slider__toggle" type="button">3</button>
+              <button class="slider__toggle slider__toggle-price" type="button"></button>
+              <button class="slider__toggle slider__toggle-price slider__toggle-current" type="button"></button>
+              <button class="slider__toggle slider__toggle-price" type="button"></button>
             </p>
           </div>
         </div>
@@ -281,32 +277,37 @@ <h2 class="visually-hidden">Наши контакты</h2>
             </li>
           </ul>
         </div>
+        <iframe class="contacts__iframe"
+          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7987.290429285352!2d30.3174089!3d59.968266!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f2ac55f567b2400!2sHTML%20Academy!5e0!3m2!1sru!2sru!4v1652284072304!5m2!1sru!2sru"
+          width="320" height="200" style="border:0;" allowfullscreen="" loading="lazy"
+          referrerpolicy="no-referrer-when-downgrade"></iframe>
         <div class="contacts__image"></div>
       </section>
     </main>
     <footer class="main-footer">
       <div class="wrapper">
         <div class="main-footer__container">
-          <div class="main-footer__logo main-footer__logo-glasses">
-            <img src="img/logo.svg" width="74" height="23" alt="Логотип Pink">
-          </div>
+          <a class="main-footer__logo main-footer__logo-glasses">
+            <img class="main-footer__pink-logo" src="img/logo-black.svg" width="74" height="23" alt="Логотип Pink">
+          </a>
           <div class="main-footer__social social">
             <ul class="social__list">
               <li class="social__item">
-                <a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
+                <a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy"></a>
               </li>
               <li class="social__item">
-                <a class="social__link social__link--telegram" href="https://t.me/htmlacademy">Мы в Телеграме</a>
+                <a class="social__link social__link--telegram" href="https://t.me/htmlacademy"></a>
               </li>
               <li class="social__item">
-                <a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru">Мы в
-                  Ютубе</a>
+                <a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru"></a>
               </li>
             </ul>
           </div>
           <div class="main-footer__copyright copyright">
             <p class="copyright__text">Разработано:</p>
-            <a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
+            <a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">
+              <img class="copyright__img" src="img/htmlacademy.svg" alt="Логотип htmlacademy" width="27"
+                height="34"></a>
           </div>
         </div>
       </div>
diff --git a/source/sass/blocks/index/contacts.scss b/source/sass/blocks/index/contacts.scss
index 94c968b..9f95a77 100644
--- a/source/sass/blocks/index/contacts.scss
+++ b/source/sass/blocks/index/contacts.scss
@@ -8,6 +8,7 @@
 }
 
 .contacts__telephone {
+  text-decoration: none;
   display: block;
   font-weight: 300;
   font-size: 24px;
@@ -17,6 +18,7 @@
 }
 
 .contacts__email {
+  text-decoration: none;
   display: block;
   font-weight: 300;
   font-size: 24px;
@@ -46,15 +48,25 @@
 
 }
 
-.contacts__image {
-  height: 200px;
-  background-image: url("../img/map.png");
-  background-size: 100% auto;
-  background-repeat: no-repeat;
-  background-position: center;
+
+
+.contacts__iframe {
+  display: block;
+  border: none;
+  margin: 0 auto;
+
+  @media (min-width: $tablet-width) {
+    width: 660px;
+    height: 374px;
+  }
+
+  @media (min-width: $desktop-width) {
+    width: 1200px;
+    height: 502px;
+  }
 }
 
-.contacts__deskription {
+.contacts__description {
   display: block;
   font-weight: 700;
   font-size: 18px;
diff --git a/source/sass/blocks/index/copyright.scss b/source/sass/blocks/index/copyright.scss
index 24bf027..a7b48ab 100644
--- a/source/sass/blocks/index/copyright.scss
+++ b/source/sass/blocks/index/copyright.scss
@@ -1,6 +1,6 @@
 .copyright {
   display: flex;
-  margin: 0 100px 40px 100px;
+  margin: 0 75px 40px 75px;
 
   @media (min-width: $tablet-width) {
     margin: 0;
@@ -11,6 +11,7 @@
 .copyright__text {
   font-size: 14px;
   line-height: 18px;
+  margin: auto 15px auto 0px;
 
   @media (min-width: $desktop-width) {
     font-size: 18px;
@@ -19,4 +20,11 @@
 
 .copyright__link {
   display: block;
+  width: 27px;
+  height: 34px;
+  margin: auto 0;
+}
+
+.copyright__img {
+  align-self: center;
 }
diff --git a/source/sass/blocks/index/download.scss b/source/sass/blocks/index/download.scss
index 0430b84..a8820c5 100644
--- a/source/sass/blocks/index/download.scss
+++ b/source/sass/blocks/index/download.scss
@@ -19,9 +19,46 @@
 }
 
 .download__list {
-  display: flex;
+  display: grid;
+  grid-template-columns: 47px 43px 41px;
+  column-gap: 35px;
   list-style-type: none;
+  margin-top: 32px;
+  margin-right: 38px;
+  margin-bottom: 28px;
+  margin-left: 38px;
+  align-items: center;
   padding: 0;
   //margin: 30 auto;
   //@media (min-width: $tablet-width) {margin: 46 auto 38 auto;}
 }
+
+.download__link {
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.download__link--apple {
+  background-image: url("../img/apple-logo.svg");
+  width: 47px;
+  height: 56px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.download__link--android {
+  background-image: url("../img/android-logo.svg");
+  width: 43px;
+  height: 47px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.download__link--windows {
+  background-image: url("../img/microsoft-logo.svg");
+  width: 44px;
+  height: 41px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
diff --git a/source/sass/blocks/index/header-header.scss b/source/sass/blocks/index/header-header.scss
index 735d91c..20a7792 100644
--- a/source/sass/blocks/index/header-header.scss
+++ b/source/sass/blocks/index/header-header.scss
@@ -1,6 +1,8 @@
 .header-header {
   margin: 0 auto;
-  background-color: #00000030;
+  //background-color: #00000030;
+  background-color: #283645;
+
   //margin-bottom: 110px;
 
   @media (min-width: $tablet-width) {
@@ -8,6 +10,6 @@
   }
 
   @media (min-width: $desktop-width) {
-    //margin-bottom: 98px;
+    background-color: #00000030;
   }
 }
diff --git a/source/sass/blocks/index/main-footer.scss b/source/sass/blocks/index/main-footer.scss
index a0e2b76..4b40014 100644
--- a/source/sass/blocks/index/main-footer.scss
+++ b/source/sass/blocks/index/main-footer.scss
@@ -1,12 +1,16 @@
 .main-footer__container {
-  padding-top: 57px;
-  display: flex;
-  flex-direction: column;
+  padding-top: 40px;
+  display: grid;
+  grid-template-columns: 280px;
+  //width: 100px;
+  row-gap: 38px;
 
   @media (min-width: $tablet-width) {
+    width: auto;
+    display: flex;
     padding-top: 36px;
     padding-bottom: 37px;
-    margin: 0 20px;
+    margin: 0;
     flex-direction: row;
     justify-content: space-between;
   }
@@ -18,12 +22,32 @@
   }
 }
 
-.main-footer__logo {
-  margin: 0 87px 37px 159px;
+.main-footer__pink-logo {
+  margin: 0 0 0 71px;
+  padding-top: 17px;
+
 
   @media (min-width: $tablet-width) {
-    margin: 0;
+    display: block;
   }
 
   @media (min-width: $desktop-width) {}
 }
+
+.main-footer__logo {
+  display: block;
+  text-align: center;
+  //width: 145px;
+  //margin-left: 68px;
+  top: 0px;
+  left: 0px;
+  background-image: url("../img/glasses.svg");
+  width: 59px;
+  height: 40px;
+  background-repeat: no-repeat;
+
+  @media (min-width: $tablet-width) {
+    margin: 0;
+    margin-right: 74px;
+  }
+}
diff --git a/source/sass/blocks/index/main-nav.scss b/source/sass/blocks/index/main-nav.scss
index 03fd6f0..4c223c3 100644
--- a/source/sass/blocks/index/main-nav.scss
+++ b/source/sass/blocks/index/main-nav.scss
@@ -12,6 +12,7 @@
 
 
   @media (min-width: $tablet-width) {
+    padding-top: 27px;
     margin-bottom: 0;
     width: 620px;
   }
@@ -23,22 +24,38 @@
 
 .main-nav__list {
   list-style-type: none;
-  padding: 0;
+  display: grid;
+  grid-template-columns: 320px;
+  width: 320px;
   margin: 0;
-  left: 10px;
-  top: 26px;
+  padding: 0;
 
 
-  @media (min-width: $tablet-width) {}
+  @media (min-width: $tablet-width) {
+    grid-template-columns: 660px;
+    width: 660px;
+  }
 
   @media (min-width: $desktop-width) {
     display: flex;
     line-height: 18px;
     font-weight: 400;
-    margin: 48px 0;
+    margin: 21px 0 48px 0;
   }
 }
 
+.main-nav__logo {
+  @media (min-width: $tablet-width) {
+    width: 145px;
+    //top: 0px;
+    //left: 0px;
+    background-image: url("../img/glasses.svg");
+    width: 59px;
+    height: 40px;
+    background-repeat: no-repeat;
+  }
+
+}
 
 .main-nav__pink-logo {
   //width: 74px;
@@ -46,7 +63,9 @@
   margin: 22px auto 21px 0;
 
   @media (min-width: $tablet-width) {
-    margin: 43px auto;
+    margin: 0 auto 42px auto;
+    padding-top: 17px;
+    padding-left: 71px;
   }
 
   @media (min-width: $desktop-width) {}
@@ -55,10 +74,19 @@
 .main-nav__toggle {
   height: 24px;
   width: 50px;
-  margin: 21px 0 21px auto;
+  //margin: 21px 0 21px auto;
+  position: absolute;
+  top: 21px;
+  right: 20px;
+  z-index: 2;
+  border: none;
+  cursor: pointer;
+  background-color: #00000000;
+  padding: 0;
 
   @media (min-width: $tablet-width) {
-    margin: 43px 0 43px auto;
+    margin: 16px 0 43px auto;
+    position: inherit;
   }
 
   @media (min-width: $desktop-width) {
@@ -66,10 +94,32 @@
   }
 }
 
+.main-nav--opened .main-nav__toggle {
+  top: 23px;
+  right: 20px;
+  left: auto;
+  background-image: url("../img/close-menu-btn.svg");
+  width: 23px;
+  height: 23px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-color: none;
+}
+
 .main-nav__wrapper {
-  background-color: #1d2631;
+  background-color: #283645;
+  position: absolute;
+  left: 0px;
+  top: 69px;
+  z-index: 3;
+
+
+  @media (min-width: $tablet-width) {
+    top: 109px;
+  }
 
   @media (min-width: $desktop-width) {
+    position: static;
     background-color: #00000000;
     margin-left: auto;
   }
diff --git a/source/sass/blocks/index/price.scss b/source/sass/blocks/index/price.scss
index 9001ae4..1a2a910 100644
--- a/source/sass/blocks/index/price.scss
+++ b/source/sass/blocks/index/price.scss
@@ -5,7 +5,9 @@
 }
 
 .price__toggles {
-  margin: 0 auto;
+  @media (min-width: $tablet-width) {
+    display: none;
+  }
 }
 
 .price__table {
diff --git a/source/sass/blocks/index/rewiew.scss b/source/sass/blocks/index/rewiew.scss
index e17ddad..917d078 100644
--- a/source/sass/blocks/index/rewiew.scss
+++ b/source/sass/blocks/index/rewiew.scss
@@ -1,4 +1,10 @@
-.review__deskription {
+.review {
+  @media (min-width: $desktop-width) {
+    padding-top: 72px;
+  }
+}
+
+.review__description {
   font-size: 14px;
   margin: 0 20px;
   margin-bottom: 40px;
@@ -15,6 +21,7 @@
 
 .review__list {
   padding: 0;
+  margin: 0;
   list-style-type: none;
   line-height: 30px;
 }
@@ -32,7 +39,9 @@
   }
 
   @media (min-width: $desktop-width) {
-    margin-top: 72px;
+    background-image: url("../img/quotes.svg");
+    background-repeat: no-repeat;
+    background-position: center top;
   }
 }
 
@@ -41,6 +50,7 @@
     display: flex;
     flex-direction: column;
     order: 2;
+    padding-bottom: 36px;
   }
 }
 
diff --git a/source/sass/blocks/index/site-list.scss b/source/sass/blocks/index/site-list.scss
index 6384def..4a8e0a5 100644
--- a/source/sass/blocks/index/site-list.scss
+++ b/source/sass/blocks/index/site-list.scss
@@ -1,5 +1,5 @@
 .site-list__item {
-  padding: 25px auto;
+  text-decoration: none;
   text-align: center;
 
   @media (min-width: $tablet-width) {}
@@ -10,6 +10,17 @@
   }
 }
 
+.site-list__item-legend {
+  display: block;
+  text-decoration: none;
+  padding-top: 15px;
+  padding-bottom: 15px;
+
+  @media (min-width: $desktop-width) {
+    padding: 0;
+  }
+}
+
 .site-list__item:last-child {
   @media (min-width: $desktop-width) {
     margin-right: 0;
diff --git a/source/sass/blocks/index/slider.scss b/source/sass/blocks/index/slider.scss
new file mode 100644
index 0000000..eadfbd9
--- /dev/null
+++ b/source/sass/blocks/index/slider.scss
@@ -0,0 +1,48 @@
+.slider__toggles {
+  //display: grid;
+  //grid-template-columns: 12px 12px 12px;
+  //column-gap: 13px;
+  display: flex;
+  border: none;
+  align-items: baseline;
+  padding-left: 100px;
+  padding-right: 100px;
+
+
+  @media (min-width: $tablet-width) {
+    padding-left: 274px;
+    padding-right: 274px;
+  }
+
+  @media (min-width: $desktop-width) {
+    display: none;
+  }
+}
+
+.slider__toggle {
+  display: block;
+  padding: 0;
+  border: none;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  background: #28364530;
+  border: 3px solid #ffffff;
+  border-radius: 50%;
+  margin-right: 12px;
+}
+
+.slider__toggle-price {
+  border: 3px solid #f2f2f2;
+}
+
+.slider__toggle-current {
+  width: 12px;
+  height: 12px;
+  background: #ffffff;
+  border-radius: 50%;
+  border: 3px solid #283645;
+}
diff --git a/source/sass/blocks/index/social.scss b/source/sass/blocks/index/social.scss
index 68669d5..a9f6947 100644
--- a/source/sass/blocks/index/social.scss
+++ b/source/sass/blocks/index/social.scss
@@ -1,17 +1,45 @@
 .social {
-  padding-bottom: 40px;
 
-  @media (min-width: $tablet-width) {
-    display: flex;
-    padding-bottom: 0;
-  }
+  @media (min-width: $tablet-width) {}
 
   @media (min-width: $desktop-width) {}
 }
 
 .social__list {
   padding: 0;
-  display: flex;
+  display: grid;
+  grid-template-columns: 54px 54px 54px;
+  column-gap: 9px;
   list-style-type: none;
-  margin: 0 auto;
+  margin: 0 50px 0 50px;
+
+  @media (min-width: $tablet-width) {
+    margin: 0;
+  }
+}
+
+.social__link {
+  display: block;
+  width: 48px;
+  height: 48px;
+  border: 3px solid #28364510;
+  border-radius: 50%;
+}
+
+.social__link--vkontakte {
+  background-image: url(../img/vk-logo.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.social__link--youtube {
+  background-image: url(../img/youtube-logo.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.social__link--telegram {
+  background-image: url(../img/telegram-logo.svg);
+  background-repeat: no-repeat;
+  background-position: center;
 }
diff --git a/source/sass/style.scss b/source/sass/style.scss
index e1303d5..f373164 100644
--- a/source/sass/style.scss
+++ b/source/sass/style.scss
@@ -10,7 +10,7 @@
 @import "./blocks/index/header.scss";
 @import "./blocks/index/main-footer.scss";
 @import "./blocks/index/header-header.scss";
-
+@import "./blocks/index/slider.scss";
 //@import "./blocks/index/header-telephone.scss";
 @import "./blocks/index/main-nav.scss";
 @import "./blocks/index/header-wrapper.scss";