update

index.html

@@ -466,7 +466,8 @@
         <div class="company-video">
         </div>
         <a class="company-button" href="#">
-            <img src="img/video_button.png" alt="wacth video">
+            <img class="company-button__icon" src="img/video_button.png" alt="wacth video icon">
+            <img class="company-button__text" src="img/video_button_text.png" alt="wacth video text">
         </a>
         <div class="company-tour">
             <p class="company-tour__text">
@@ -633,7 +634,7 @@
         </div>
     </section>
     <section class="contacts">
-        <div class="contacts-map">
+        <div class="contacts-map" id="map">
             
         </div>
         <div class="contacts-info">
@@ -646,7 +647,7 @@
             <div class="contacts-info-item">
                 <span class="contacts-info-item__title">Московский офис АО «Волга»</span>
                 <a href="tel:+78314493316" class="contacts-info-item__tel">+7 (83144) 9-33-16</a>
-                <span class="contacts-info-item__addr">2-й Новокузнецкий переулок, д 25</span>
+                <span class="contacts-info-item__addr">ул. Неглинная, 15</span>
                 <a href="mailto:info@volga-paper.ru" class="contacts-info-item__email">info@volga-paper.ru</a>
             </div>
         </div>
@@ -721,15 +722,7 @@
     </footer>
     <script defer src="js/index.js"></script>
     <script defer src="js/menu.js"></script>
-    <script type="text/javascript">
-        var map;
-        function initMap() {
-            map = new google.maps.Map(document.querySelector('.contacts-map'), {
-                center: {lat: -34.397, lng: 150.644},
-                zoom: 8
-            });
-        }
-    </script>
-    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
+    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<6d05ea4e-5eb3-4409-88a3-d4f809c991d9>" type="text/javascript"></script>
+    <script defer src="js/map_icon.js"></script>
 </body>
 </html>
\ No newline at end of file

js/map_icon.js

+ymaps.ready(function () {
+    var myMap = new ymaps.Map('map', {
+        center: [56.151574, 41.073856],
+        zoom: 6
+    }, {
+        searchControlProvider: 'yandex#search'
+    }),
+        myPlacemark = new ymaps.Placemark([55.763001, 37.619737], {
+        }, {
+            iconLayout: 'default#image',
+            iconImageHref: '../img/map_icon.png',
+            iconImageSize: [50, 70],
+            iconImageOffset: [-25, -65]
+        }),
+        myPlacemark2 = new ymaps.Placemark([56.529327, 43.560287], {
+        }, {
+            iconLayout: 'default#image',
+            iconImageHref: '../img/map_icon.png',
+            iconImageSize: [50, 70],
+            iconImageOffset: [-25, -65]
+        });
+
+    myMap.geoObjects
+        .add(myPlacemark)
+        .add(myPlacemark2);
+});
\ No newline at end of file

styles/style.css

@@ -5,6 +5,11 @@
   margin: 0;
 }
 
+.ymaps-2-1-78-ground-pane {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
 a {
   text-decoration: none;
 }
@@ -1067,6 +1072,18 @@ body {
   bottom: 310px;
   -webkit-transform: translate(-50%, 50%);
           transform: translate(-50%, 50%);
+}
+
+.company-button__icon {
+  position: absolute;
+  left: 46%;
+  bottom: 0;
+}
+
+.company-button__text {
+  position: absolute;
+  left: 46%;
+  bottom: 0;
   -webkit-animation: 10s linear 0s normal none infinite running company-button;
           animation: 10s linear 0s normal none infinite running company-button;
 }
@@ -1700,7 +1717,7 @@ body {
 }
 
 .contacts-map {
-  width: 1640px;
+  width: 100%;
   height: 400px;
 }
 

styles/style.scss

@@ -4,6 +4,11 @@
   margin: 0;
 }
 
+.ymaps-2-1-78-ground-pane {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+}
+
 a {
   text-decoration: none;
 }
@@ -808,7 +813,18 @@ body {
     left: 46%;
     bottom: 310px;
     transform: translate(-50%, 50%);
-    animation: 10s linear 0s normal none infinite running company-button;
+
+    &__icon {
+      position: absolute;
+      left: 46%;
+      bottom: 0;
+    }
+    &__text {
+      position: absolute;
+      left: 46%;
+      bottom: 0;
+      animation: 10s linear 0s normal none infinite running company-button;
+    }
   }
   &-tour {
     display: flex;
@@ -1249,7 +1265,7 @@ body {
   display: flex;
   flex-direction: column;
   &-map {
-    width: 1640px;
+    width: 100%;
     height: 400px;
   }
   &-info {