Merge pull request #5 from Devexlein/master

Author: keksobot

source/catalog.html

@@ -322,11 +322,11 @@ <h3 class="additional-product__title">Витамины</h3>
     <section class="catalog__newsletter newsletter">
       <h2 class="newsletter__title section-subtitle">Акции и новинки</h2>
       <p class="newsletter__description">Подпишитесь на наши новости и не пропустите ни одного предложения!</p>
-      <form class="newsletter__form form" action="https://echo.htmlacademy.ru" method="post">
+      <form class="newsletter__form" action="https://echo.htmlacademy.ru" method="post">
         <label class="visually-hidden" for="newsletter-email">Укажите ваш email</label>
         <!-- Если поле заполнено неверно, добавить к field-input модификатор invalid -->
-        <input class="form__input field-input" id="newsletter-email" type="email" name="newsletter-email" placeholder="kuklachev@gmail.com" required>
-        <button class="form__button button" type="submit">Подписаться</button>
+        <input class="newsletter__input field-input" id="newsletter-email" type="email" name="newsletter-email" placeholder="kuklachev@gmail.com" required>
+        <button class="newsletter__button button" type="submit">Подписаться</button>
       </form>
     </section>
   </main>
@@ -357,7 +357,7 @@ <h2 class="visually-hidden">Как до нас добраться</h2>
     </section>
     <div class="main-footer__wrap">
       <a class="main-footer__logo logo" href="index.html">
-        <img class="logo__text" src="images/logo-text.svg" width="128" height="24" lang="en" alt="Cat Energy">
+        <img class="main-footer__logo-text logo__text" src="images/logo-text.svg" width="128" height="24" lang="en" alt="Cat Energy">
       </a>
       <ul class="main-footer__social social">
         <li class="social__item">

source/form.html

@@ -165,7 +165,7 @@ <h2 class="visually-hidden">Как до нас добраться</h2>
     </section>
     <div class="main-footer__wrap">
       <a class="main-footer__logo logo" href="index.html">
-        <img class="logo__text" src="images/logo-text.svg" width="128" height="24" lang="en" alt="Cat Energy">
+        <img class="main-footer__logo-text logo__text" src="images/logo-text.svg" width="128" height="24" lang="en" alt="Cat Energy">
       </a>
       <ul class="main-footer__social social">
         <li class="social__item">

source/index.html

@@ -173,7 +173,7 @@ <h2 class="visually-hidden">Как до нас добраться</h2>
     </section>
     <div class="main-footer__wrap">
       <a class="main-footer__logo logo" href="index.html" aria-current="page">
-        <img class="logo__text" src="images/logo-text.svg" width="128" height="24" lang="en" alt="Cat Energy">
+        <img class="main-footer__logo-text logo__text" src="images/logo-text.svg" width="128" height="24" lang="en" alt="Cat Energy">
       </a>
       <ul class="main-footer__social social">
         <li class="social__item">

source/styles/blocks/compare-slider.scss

@@ -56,7 +56,7 @@
   }
 
   @media (min-width: $desktop-width) {
-    background-image: linear-gradient(180deg, #ffffff 135px, #eaeaea 135px 100%);
+    background-image: linear-gradient(180deg, #ffffff 135px, #f2f2f2 135px 100%);
   }
 }
 

source/styles/blocks/example.scss

@@ -12,7 +12,7 @@
   @media (min-width: $desktop-width) {
     grid-template-columns: 1fr 660px minmax(calc(1280px - 720px), 1fr) 1fr;
     column-gap: 0;
-    background-image: linear-gradient(180deg, #ffffff 135px, #eaeaea 135px 100%);
+    background-image: linear-gradient(180deg, #ffffff 135px, #f2f2f2 135px 100%);
   }
 }
 
@@ -101,6 +101,10 @@
   position: relative;
   width: max-content;
 
+  @media (min-width: $tablet-width) {
+    margin-top: 80px;
+  }
+
   @media (min-width: $desktop-width) {
     margin: 0 0 10px;
   }

source/styles/blocks/infographic.scss

@@ -60,6 +60,6 @@
   }
 
   @media (min-width: $desktop-width) {
-    background-color: $bg-color-secondary-darken;
+    background-color: $bg-color-secondary;
   }
 }

source/styles/blocks/logo.scss

@@ -11,3 +11,13 @@
     opacity: 0.6;
   }
 }
+
+.logo__text {
+  @media (max-width: $mobile-width-only) {
+    transform: translate(50%);
+  }
+
+  @media (min-width: $desktop-width) {
+    width: 118px;
+  }
+}

source/styles/blocks/main-footer.scss

@@ -33,13 +33,23 @@
   margin-bottom: 18px;
   display: block;
 
+  @media (max-width: $mobile-width-only) {
+    transform: translateX(-64px);
+  }
+
   @media (min-width: $tablet-width) {
     margin-bottom: 0;
     padding-top: 5px;
     flex-shrink: 0;
   }
 }
 
+.main-footer__logo-text {
+  @media (min-width: $desktop-width) {
+    width: 128px;
+  }
+}
+
 .main-footer__social {
   @include list-reset;
   margin-bottom: 18px;

source/styles/blocks/main-header.scss

@@ -28,16 +28,6 @@
   }
 }
 
-.main-header__logo .logo__text {
-  @media (max-width: $mobile-width-only) {
-    transform: translate(50%);
-  }
-
-  @media (min-width: $desktop-width) {
-    width: 118px;
-  }
-}
-
 .main-header__nav {
   @media (max-width: $mobile-width-only) {
     width: 100%;

source/styles/blocks/newsletter.scss

@@ -37,7 +37,7 @@
   }
 }
 
-.newsletter__form .form__input {
+.newsletter__input {
   margin-bottom: 16px;
   width: 100%;
   padding: 12px;
@@ -51,7 +51,7 @@
   }
 }
 
-.newsletter__form .form__button {
+.newsletter__button {
   margin: 0;
   padding: 15px;
   width: 100%;