Update

img/ecology_fact2.svg

+<svg width="197" height="183" viewBox="0 0 197 183" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="197" height="183">
+<rect x="0" y="0" width="197" height="183" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<rect width="232.504" height="232.504" transform="matrix(0.675571 0.737295 -0.675571 0.737295 0 -212.539)" fill="#029745"/>
+</g>
+</svg>

index.html

@@ -289,7 +289,7 @@
                     </div>
                     <span class="press-content-news-item__date">04.12.2020</span>
                     <div class="press-content-news-item-img">
-                        <img src="img/news1.png" alt="news1 photo">
+                        <img class="press-content-news-item-img__photo" src="img/news1.png" alt="news1 photo">
                         <img class="press-content-news-item-img__arrow" src="img/news_arrow.svg" alt="news arrow">
                     </div>
                 </a>
@@ -300,7 +300,7 @@
                     </div>
                     <span class="press-content-news-item__date">04.12.2020</span>
                     <div class="press-content-news-item-img">
-                        <img src="img/news2.png" alt="news2 photo">
+                        <img class="press-content-news-item-img__photo" src="img/news2.png" alt="news2 photo">
                         <img class="press-content-news-item-img__arrow" src="img/news_arrow.svg" alt="news arrow">
                     </div>
                 </a>
@@ -311,7 +311,7 @@
                     </div>
                     <span class="press-content-news-item__date">04.12.2020</span>
                     <div class="press-content-news-item-img">
-                        <img src="img/news3.png" alt="news3 photo">
+                        <img class="press-content-news-item-img__photo" src="img/news3.png" alt="news3 photo">
                         <img class="press-content-news-item-img__arrow" src="img/news_arrow.svg" alt="news arrow">
                     </div>
                 </a>
@@ -362,15 +362,15 @@
         <div class="contacts-info">
             <div class="contacts-info-item">
                 <span class="contacts-info-item__title">Нижегородский офис АО «Волга»</span>
-                <span class="contacts-info-item__tel">+7 (83144) 9-33-16</span>
+                <a href="tel:+78314493316" class="contacts-info-item__tel">+7 (83144) 9-33-16</a>
                 <span class="contacts-info-item__addr">Балахна, ул. Горького, 1</span>
-                <a href="#" class="contacts-info-item__email">info@volga-paper.ru</a>
+                <a href="mailto:info@volga-paper.ru" class="contacts-info-item__email">info@volga-paper.ru</a>
             </div>
             <div class="contacts-info-item">
                 <span class="contacts-info-item__title">Московский офис АО «Волга»</span>
-                <span class="contacts-info-item__tel">+7 (83144) 9-33-16</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>
-                <a href="#" class="contacts-info-item__email">info@volga-paper.ru</a>
+                <a href="mailto:info@volga-paper.ru" class="contacts-info-item__email">info@volga-paper.ru</a>
             </div>
         </div>
     </section>

styles/style.css

@@ -205,6 +205,16 @@ a {
   padding: 21px 40px;
   background: #029745 url("../img/button_mask.svg") no-repeat;
   text-decoration: none;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.heading__button:hover {
+  background-color: #28be4a;
+}
+
+.heading__button:active {
+  background-color: #07803d;
 }
 
 .heading-other {
@@ -400,6 +410,18 @@ a {
   text-decoration: none;
   border-bottom: 1px #029745 solid;
   padding-bottom: 5px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.production__link:hover {
+  color: #28be4a;
+  border-color: #28be4a;
+}
+
+.production__link:active {
+  color: #07803d;
+  border-color: #07803d;
 }
 
 .production-list {
@@ -477,6 +499,20 @@ a {
   stroke: #ffffff;
 }
 
+.production-list-item:active {
+  background: #077f3d;
+  cursor: pointer;
+}
+
+.production-list-item:active .production-list-item__title,
+.production-list-item:active .production-list-item__descr {
+  color: #ffffff;
+}
+
+.production-list-item:active .production-list-item__arrow {
+  stroke: #ffffff;
+}
+
 .production-separator {
   margin-top: 56px;
   height: 3px;
@@ -631,6 +667,16 @@ a {
   background: #029745 url("../img/button_mask.svg") no-repeat;
   text-decoration: none;
   margin-right: 56px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.company-tour__button:hover {
+  background-color: #28be4a;
+}
+
+.company-tour__button:active {
+  background-color: #07803d;
 }
 
 .company-tour__link {
@@ -641,6 +687,18 @@ a {
   text-decoration: none;
   border-bottom: 1px #029745 solid;
   padding-bottom: 5px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.company-tour__link:hover {
+  color: #28be4a;
+  border-color: #28be4a;
+}
+
+.company-tour__link:active {
+  color: #07803d;
+  border-color: #07803d;
 }
 
 .company-top {
@@ -737,6 +795,8 @@ a {
   padding: 24px 56px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 .press-wrapper__button--disabled {
@@ -747,6 +807,16 @@ a {
   color: #8e9a93;
 }
 
+.press-wrapper__button:hover {
+  background-color: #28be4a;
+  color: #ffffff;
+}
+
+.press-wrapper__button:active {
+  background-color: #07803d;
+  color: #ffffff;
+}
+
 .press-wrapper__link {
   font-weight: bold;
   font-size: 16px;
@@ -755,6 +825,18 @@ a {
   border-bottom: 1px #029745 solid;
   padding-bottom: 3px;
   margin-left: 56px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.press-wrapper__link:hover {
+  color: #28be4a;
+  border-color: #28be4a;
+}
+
+.press-wrapper__link:active {
+  color: #07803d;
+  border-color: #07803d;
 }
 
 .press-content {
@@ -856,10 +938,22 @@ a {
   stroke: #fff;
 }
 
+.press-content-media-wrapper:active .press-content-media-wrapper__text {
+  color: #d0ffd2;
+}
+
+.press-content-media-wrapper:active .press-content-media-wrapper__icon {
+  stroke: #d0ffd2;
+}
+
 .press-content-media-wrapper__social:hover {
   fill: #28be4a;
 }
 
+.press-content-media-wrapper__social:active {
+  fill: #077f3d;
+}
+
 .press-content-news {
   margin-top: 48px;
   display: -webkit-box;
@@ -930,6 +1024,10 @@ a {
   position: relative;
 }
 
+.press-content-news-item-img__photo {
+  height: 100%;
+}
+
 .press-content-news-item-img__arrow {
   position: absolute;
   bottom: 0;
@@ -998,6 +1096,18 @@ a {
   color: #029745;
   border-bottom: 1px #029745 solid;
   padding-bottom: 3px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.ecology-text__link:hover {
+  color: #28be4a;
+  border-color: #28be4a;
+}
+
+.ecology-text__link:active {
+  color: #07803d;
+  border-color: #07803d;
 }
 
 .ecology-quote {
@@ -1079,7 +1189,7 @@ a {
           flex-direction: column;
 }
 
-.contacts-map {
+.contacts-map img {
   width: 100%;
 }
 
@@ -1118,6 +1228,8 @@ a {
   line-height: 130%;
   color: #029745;
   margin-bottom: 16px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 .contacts-info-item__addr {
@@ -1133,9 +1245,18 @@ a {
   font-weight: normal;
   font-size: 14px;
   line-height: 160%;
-  color: #16291f;
-  border-bottom: 1px solid rgba(22, 41, 31, 0.3);
+  color: #029745;
   margin-right: auto;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.contacts-info-item__tel:hover, .contacts-info-item__email:hover {
+  color: #28be4a;
+}
+
+.contacts-info-item__tel:active, .contacts-info-item__email:active {
+  color: #07803d;
 }
 
 .contacts-info-item:nth-child(2n + 2) {
@@ -1248,7 +1369,7 @@ a {
   position: relative;
   padding-left: 16px;
   font-weight: normal;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 160%;
   color: #ffffff;
   opacity: 0.8;
@@ -1529,7 +1650,7 @@ a {
   }
   .press-content-media {
     margin-top: 37px;
-    padding-left: 100px;
+    padding-left: 80px;
   }
   .press-content-media-wrapper__link {
     margin-right: 25px;
@@ -1541,5 +1662,135 @@ a {
   .press-content-media-wrapper__icon {
     width: 22px;
   }
+  .press-content-media-wrapper__text {
+    font-size: 12px;
+  }
+  .press-content-news {
+    margin-top: 37px;
+  }
+  .press-content-news-item {
+    width: 50%;
+  }
+  .press-content-news-item__text {
+    font-size: 13px;
+    margin-bottom: 12px;
+  }
+  .press-content-news-item__date {
+    font-size: 12px;
+  }
+  .press-content-news-item-img {
+    margin-top: 25px;
+    height: 76%;
+  }
+  .press-content-news-item:last-child {
+    display: none;
+  }
+  .ecology {
+    padding-top: 62px;
+  }
+  .ecology-text {
+    padding-left: 80px;
+  }
+  .ecology-text__title {
+    font-size: 38px;
+    margin-bottom: 43px;
+  }
+  .ecology-text__descr {
+    font-size: 18px;
+    max-width: 360px;
+  }
+  .ecology-text__link {
+    font-size: 12px;
+  }
+  .ecology-quote {
+    padding: 84px;
+  }
+  .ecology-quote__icon {
+    left: 84px;
+  }
+  .ecology-quote__text {
+    font-size: 31px;
+  }
+  .ecology-fact {
+    margin-top: 62px;
+    margin-bottom: 62px;
+  }
+  .ecology-fact-item {
+    padding: 74px 55px;
+    background: #fafbfc url("../img/ecology_fact2.svg") no-repeat top left;
+  }
+  .ecology-fact-item__num {
+    font-size: 31px;
+  }
+  .ecology-fact-item__text {
+    font-size: 14px;
+  }
+  .contacts {
+    padding: 0 100px;
+  }
+  .contacts-info-item {
+    padding: 57px 80px;
+  }
+  .contacts-info-item__title {
+    font-size: 15px;
+    margin-bottom: 12px;
+  }
+  .contacts-info-item__tel {
+    font-size: 20px;
+    margin-bottom: 12px;
+  }
+  .contacts-info-item__addr {
+    font-size: 12px;
+    margin-bottom: 12px;
+  }
+  .contacts-info-item__email {
+    font-size: 12px;
+  }
+  .form {
+    padding: 62px 100px;
+  }
+  .form-ui {
+    padding: 50px 97px;
+  }
+  .form-ui-inner-heading__title {
+    font-size: 38px;
+    margin-right: 27px;
+  }
+  .form-ui-inner-heading__text {
+    font-size: 14px;
+  }
+  .form-ui-inner-content__input {
+    height: 42px;
+    width: 135px;
+  }
+  .form-ui-inner-content__input::-webkit-input-placeholder {
+    font-size: 12px;
+  }
+  .form-ui-inner-content__button {
+    width: 165px;
+    height: 42px;
+    font-size: 12px;
+  }
+  .footer {
+    padding: 27px 100px 38px 100px;
+  }
+  .footer-navbar-logo img {
+    height: 64px;
+  }
+  .footer-menu-item {
+    font-size: 12px;
+  }
+  .footer-info {
+    height: 18px;
+  }
+  .footer-info-social__link {
+    height: 18px;
+  }
+  .footer-info__copy {
+    font-size: 12px;
+  }
+  .footer-info-dev__text {
+    font-size: 12px;
+  }
 }
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file

styles/style.scss

@@ -151,6 +151,13 @@ a {
     padding: 21px 40px;
     background: #029745 url('../img/button_mask.svg') no-repeat;
     text-decoration: none;
+    transition: 0.4s;
+  }
+  &__button:hover {
+    background-color: #28be4a;
+  }
+  &__button:active {
+    background-color: #07803d;
   }
 }
 
@@ -297,6 +304,15 @@ a {
     text-decoration: none;
     border-bottom: 1px #029745 solid;
     padding-bottom: 5px;
+    transition: 0.4s;
+  }
+  &__link:hover {
+    color: #28be4a;
+    border-color: #28be4a;
+  }
+  &__link:active {
+    color: #07803d;
+    border-color: #07803d;
   }
   &-list {
     display: flex;
@@ -353,6 +369,17 @@ a {
     &-item:hover &-item__arrow {
       stroke: #ffffff;
     }
+    &-item:active {
+      background: #077f3d;
+      cursor: pointer;
+    }
+    &-item:active &-item__title,
+    &-item:active &-item__descr {
+      color: #ffffff;
+    }
+    &-item:active &-item__arrow {
+      stroke: #ffffff;
+    }
   }
   &-separator {
     margin-top: 56px;
@@ -464,6 +491,13 @@ a {
       background: #029745 url('../img/button_mask.svg') no-repeat;
       text-decoration: none;
       margin-right: 56px;
+      transition: 0.4s;
+    }
+    &__button:hover {
+      background-color: #28be4a;
+    }
+    &__button:active {
+      background-color: #07803d;
     }
     &__link {
       font-weight: bold;
@@ -473,6 +507,15 @@ a {
       text-decoration: none;
       border-bottom: 1px #029745 solid;
       padding-bottom: 5px;
+      transition: 0.4s;
+    }
+    &__link:hover {
+      color: #28be4a;
+      border-color: #28be4a;
+    }
+    &__link:active {
+      color: #07803d;
+      border-color: #07803d;
     }
   }
   &-top {
@@ -543,6 +586,7 @@ a {
       text-align: center;
       padding: 24px 56px;
       box-sizing: border-box;
+      transition: 0.4s;
       &--disabled {
         border: 1px solid rgba(214, 217, 229, 0.5);
         box-sizing: border-box;
@@ -550,6 +594,14 @@ a {
         color: #8e9a93;
       }
     }
+    &__button:hover {
+      background-color: #28be4a;
+      color: #ffffff;
+    }
+    &__button:active {
+      background-color: #07803d;
+      color: #ffffff;
+    }
     &__link {
       font-weight: bold;
       font-size: 16px;
@@ -558,6 +610,15 @@ a {
       border-bottom: 1px #029745 solid;
       padding-bottom: 3px;
       margin-left: 56px;
+      transition: 0.4s;
+    }
+    &__link:hover {
+      color: #28be4a;
+      border-color: #28be4a;
+    }
+    &__link:active {
+      color: #07803d;
+      border-color: #07803d;
     }
   }
   &-content {
@@ -620,9 +681,18 @@ a {
       &-wrapper:hover &-wrapper__icon {
         stroke: #fff;
       }
+      &-wrapper:active &-wrapper__text {
+        color: #d0ffd2;
+      }
+      &-wrapper:active &-wrapper__icon {
+        stroke: #d0ffd2;
+      }
       &-wrapper__social:hover {
         fill: #28be4a;
       }
+      &-wrapper__social:active {
+        fill: #077f3d;
+      }
     }
     &-news {
       margin-top: 48px;
@@ -664,6 +734,9 @@ a {
           height: 66.6%;
           margin-top: 32px;
           position: relative;
+          &__photo {
+            height: 100%;
+          }
           &__arrow {
             position: absolute;
             bottom: 0;
@@ -722,6 +795,15 @@ a {
       color: #029745;
       border-bottom: 1px #029745 solid;
       padding-bottom: 3px;
+      transition: 0.4s;
+    }
+    &__link:hover {
+      color: #28be4a;
+      border-color: #28be4a;
+    }
+    &__link:active {
+      color: #07803d;
+      border-color: #07803d;
     }
   }
   &-quote {
@@ -783,7 +865,7 @@ a {
   background: #f6f8fa;
   display: flex;
   flex-direction: column;
-  &-map {
+  &-map img {
     width: 100%;
   }
   &-info {
@@ -808,6 +890,7 @@ a {
         line-height: 130%;
         color: #029745;
         margin-bottom: 16px;
+        transition: 0.4s;
       }
       &__addr {
         font-weight: normal;
@@ -821,9 +904,17 @@ a {
         font-weight: normal;
         font-size: 14px;
         line-height: 160%;
-        color: #16291f;
-        border-bottom: 1px solid rgba($color: #16291f, $alpha: 0.3);
+        color: #029745;
         margin-right: auto;
+        transition: 0.4s;
+      }
+      &__tel:hover,
+      &__email:hover {
+        color: #28be4a;
+      }
+      &__tel:active,
+      &__email:active {
+        color: #07803d;
       }
     }
     &-item:nth-child(2n + 2) {
@@ -905,7 +996,7 @@ a {
           position: relative;
           padding-left: 16px;
           font-weight: normal;
-          font-size: 12px;
+          font-size: 14px;
           line-height: 160%;
           color: #ffffff;
           opacity: 0.8;
@@ -1160,7 +1251,7 @@ a {
     &-content {
       &-media {
         margin-top: 37px;
-        padding-left: 100px;
+        padding-left: 80px;
         &-wrapper {
           &__link {
             margin-right: 25px;
@@ -1172,6 +1263,153 @@ a {
           &__icon {
             width: 22px;
           }
+          &__text {
+            font-size: 12px;
+          }
+        }
+      }
+      &-news {
+        margin-top: 37px;
+        &-item {
+          width: 50%;
+          &__text {
+            font-size: 13px;
+            margin-bottom: 12px;
+          }
+          &__date {
+            font-size: 12px;
+          }
+          &-img {
+            margin-top: 25px;
+            height: 76%;
+          }
+        }
+        &-item:last-child {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ecology {
+    padding-top: 62px;
+    &-text {
+      padding-left: 80px;
+      &__title {
+        font-size: 38px;
+        margin-bottom: 43px;
+      }
+      &__descr {
+        font-size: 18px;
+        max-width: 360px;
+      }
+      &__link {
+        font-size: 12px;
+      }
+    }
+    &-quote {
+      padding: 84px;
+      &__icon {
+        left: 84px;
+      }
+      &__text {
+        font-size: 31px;
+      }
+    }
+    &-fact {
+      margin-top: 62px;
+      margin-bottom: 62px;
+      &-item {
+        padding: 74px 55px;
+        background: #fafbfc url('../img/ecology_fact2.svg') no-repeat top left;
+        &__num {
+          font-size: 31px;
+        }
+        &__text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  .contacts {
+    padding: 0 100px;
+    &-info {
+      &-item {
+        padding: 57px 80px;
+        &__title {
+          font-size: 15px;
+          margin-bottom: 12px;
+        }
+        &__tel {
+          font-size: 20px;
+          margin-bottom: 12px;
+        }
+        &__addr {
+          font-size: 12px;
+          margin-bottom: 12px;
+        }
+        &__email {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  .form {
+    padding: 62px 100px;
+    &-ui {
+      padding: 50px 97px;
+      &-inner {
+        &-heading {
+          &__title {
+            font-size: 38px;
+            margin-right: 27px;
+          }
+          &__text {
+            font-size: 14px;
+          }
+        }
+        &-content {
+          &__input {
+            height: 42px;
+            width: 135px;
+          }
+          &__input::-webkit-input-placeholder {
+            font-size: 12px;
+          }
+          &__button {
+            width: 165px;
+            height: 42px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    padding: 27px 100px 38px 100px;
+    &-navbar {
+      &-logo img {
+        height: 64px;
+      }
+    }
+    &-menu {
+      &-item {
+        font-size: 12px;
+      }
+    }
+    &-info {
+      height: 18px;
+      &-social {
+        &__link {
+          height: 18px;
+        }
+      }
+      &__copy {
+        font-size: 12px;
+      }
+      &-dev {
+        &__text {
+          font-size: 12px;
         }
       }
     }