htmlacademy-adaptive · keksobot · Feb 8, 2026 · Feb 8, 2026
diff --git a/source/catalog.html b/source/catalog.html
@@ -36,6 +36,7 @@
       </picture>
     </a>
     <nav class="main-header__nav main-nav">
+      <!-- Если JS выключен - модификатор nojs к main-nav -->
       <input class="main-nav__input visually-hidden" type="checkbox" id="main-nav-input" name="main-nav-input">
       <label class="main-nav__toggle" for="main-nav-input"></label>
       <ul class="main-nav__list">
@@ -58,8 +59,8 @@
     </nav>
   </header>
 
-  <main class="page__main">
-    <section class="goods">
+  <main class="page__main main">
+    <section class="main__goods goods">
       <h1 class="goods__title">Каталог продукции</h1>
       <ul class="goods__list product-list">
         <li class="product-list__item product-card">
@@ -283,7 +284,7 @@ <h2 class="product-card__title product-card__title--special">Показать е
       </ul>
     </section>
 
-    <section class="extra-goods">
+    <section class="main__extra-goods extra-goods">
       <h2 class="extra-goods__title">Дополнительные товары</h2>
       <div class="extra-goods__wrapper">
         <ul class="extra-goods__list extra-product-list">
@@ -334,7 +335,7 @@ <h3 class="extra-product-card__title">Витамины</h3>
       </div>
     </section>
 
-    <section class="promos-and-new">
+    <section class="main__promos-and-new promos-and-new">
       <h2 class="promos-and-new__title">Акции и новинки</h2>
       <p class="promos-and-new__description">Подпишитесь на наши новости и не пропустите ни одного предложения!</p>
       <form class="promos-and-new__form form-block" action="https://echo.htmlacademy.ru/" method="post">

diff --git a/source/index.html b/source/index.html
@@ -36,6 +36,7 @@
       </picture>
     </a>
     <nav class="main-header__nav main-nav">
+      <!-- Если JS выключен - модификатор nojs к main-nav -->
       <input class="main-nav__input visually-hidden" type="checkbox" id="main-nav-input" name="main-nav-input">
       <label class="main-nav__toggle" for="main-nav-input"></label>
       <ul class="main-nav__list main-nav__list--bg">
@@ -58,8 +59,8 @@
     </nav>
   </header>
 
-  <main class="page__main">
-    <section class="nutrition-selector">
+  <main class="page__main main">
+    <section class="main__nutrition-selector nutrition-selector">
       <div class="nutrition-selector__wrapper">
         <div class="nutrition-selector__text">
           <h1 class="nutrition-selector__title">Функциональное
@@ -80,7 +81,7 @@ <h1 class="nutrition-selector__title">Функциональное
       </div>
     </section>
 
-    <section class="nutrition-programs">
+    <section class="main__nutrition-programs nutrition-programs">
       <h2 class="visually-hidden">Программы питания</h2>
       <ul class="nutrition-programs__list offer-list">
         <li class="offer-list__item program-card program-card--slim-cat-outline">
@@ -96,7 +97,7 @@ <h3 class="program-card__title">Набор массы</h3>
       </ul>
     </section>
 
-    <section class="advantages">
+    <section class="main__advantages advantages">
       <h2 class="advantages__title">Как это работает</h2>
       <ul class="advantages__list benefits">
         <li class="benefits__item benefits__item--useful">
@@ -120,7 +121,7 @@ <h2 class="advantages__title">Как это работает</h2>
       </ul>
     </section>
 
-    <section class="advertising-example">
+    <section class="main__advertising-example advertising-example">
       <div class="advertising-example__wrapper">
         <h2 class="advertising-example__title">Живой пример</h2>
         <p class="advertising-example__description">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
@@ -137,7 +138,7 @@ <h2 class="advertising-example__title">Живой пример</h2>
           </dl>
           <p class="advertising-example__subtitle">Затраты на питание: <span class="advertising-example__subtitle-value">15 000 РУБ.</span></p>
         </div>
-        <div class=" advertising-example__slider slider">
+        <div class="advertising-example__slider slider">
           <picture class="slider__left-image">
             <source type="image/webp" media="(min-width: 1200px)" srcset="images/fat-cat-slider-tablet@1x.webp 1x, images/fat-cat-slider-tablet@2x.webp 2x">
             <source type="image/webp" media="(min-width: 768px)" srcset="images/fat-cat-slider-tablet@1x.webp 1x, images/fat-cat-slider-tablet@2x.webp 2x">

diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss
@@ -1,16 +1,12 @@
 .advantages {
   min-width: 280px;
   max-width: 280px;
-  margin: 0 auto;
-  padding: 20px 20px 49px;
 }
 
 @media (min-width: $tablet-width) {
   .advantages {
     min-width: 708px;
     max-width: 708px;
-    margin: 0 auto;
-    padding: 45px 30px 0;
     border-bottom: 1px solid #e6e6e6;
   }
 }
@@ -19,8 +15,6 @@
   .advantages {
     min-width: 1220px;
     max-width: 1220px;
-    margin: 0 auto;
-    padding: 71px 60px 0;
     border: none;
   }
 }
@@ -41,3 +35,15 @@
 .advantages__list {
   @include list();
 }
+
+@media (min-width: $tablet-width) {
+  .advantages__list {
+    margin-bottom: 47px;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .advantages__list {
+    margin-bottom: 0;
+  }
+}
diff --git a/source/styles/blocks/advertising-example.scss b/source/styles/blocks/advertising-example.scss
@@ -150,3 +150,27 @@
     margin-left: 63px;
   }
 }
+
+.advertising-example__list {
+  margin-bottom: 10px;
+}
+
+@media (min-width: $desktop-width) {
+  .advertising-example__list {
+    margin-bottom: 35px;
+  }
+}
+
+@media (min-width: $tablet-width) {
+  .advertising-example__slider {
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .advertising-example__slider {
+    margin: 0;
+    margin-bottom: 85px;
+    margin-right: 60px;
+  }
+}
diff --git a/source/styles/blocks/benefits.scss b/source/styles/blocks/benefits.scss
@@ -4,14 +4,12 @@
     flex-wrap: wrap;
     gap: 37px 137px;
     counter-reset: benefits__item 0;
-    margin-bottom: 47px;
   }
 }
 
 @media (min-width: $desktop-width) {
   .benefits {
     gap: 77px;
-    margin-bottom: 0;
   }
 }
 

diff --git a/source/styles/blocks/contacts.scss b/source/styles/blocks/contacts.scss
@@ -3,25 +3,19 @@
   justify-content: space-between;
   min-width: 280px;
   max-width: 280px;
-  margin: 0 auto;
-  padding: 26px 20px;
 }
 
 @media (min-width: $tablet-width) {
   .contacts {
     min-width: 628px;
     max-width: 628px;
-    margin: 0 auto;
-    padding: 60px 70px;
   }
 }
 
 @media (min-width: $desktop-width) {
   .contacts {
     min-width: 407px;
     max-width: 407px;
-    margin: 0;
-    padding: 60px 78px 60px 80px;
   }
 }
 

diff --git a/source/styles/blocks/definition-list.scss b/source/styles/blocks/definition-list.scss
@@ -4,7 +4,6 @@
   flex-wrap: wrap;
   gap: 32px;
   text-align: center;
-  margin-bottom: 10px;
 }
 
 @media (min-width: $tablet-width) {
@@ -13,12 +12,6 @@
   }
 }
 
-@media (min-width: $desktop-width) {
-  .definition-list {
-    margin-bottom: 35px;
-  }
-}
-
 .definition-list__description {
   @include font-text-secondary(24px, 24px, $color-text-dark);
   text-transform: uppercase;

diff --git a/source/styles/blocks/extra-goods.scss b/source/styles/blocks/extra-goods.scss
@@ -1,25 +1,19 @@
 .extra-goods {
   min-width: 280px;
   max-width: 280px;
-  margin: 0 auto;
-  padding: 25px 20px 0;
 }
 
 @media (min-width: $tablet-width) {
   .extra-goods {
     min-width: 708px;
     max-width: 708px;
-    margin: 0 auto;
-    padding: 0 30px;
   }
 }
 
 @media (min-width: $desktop-width) {
   .extra-goods {
     min-width: 1220px;
     max-width: 1220px;
-    margin: 0 auto;
-    padding: 0 60px;
   }
 }
 

diff --git a/source/styles/blocks/extra-product-card.scss b/source/styles/blocks/extra-product-card.scss
@@ -1,7 +1,7 @@
 .extra-product-card {
   display: grid;
   grid-template-columns: 140px 70px 70px;
-  grid-template-rows: 29px 29px 55px;
+  grid-template-rows: auto auto auto;
   padding-top: 0;
   padding-bottom: 14px;
   border-bottom: 1px solid #ebebeb;
@@ -11,7 +11,7 @@
 @media (min-width: $tablet-width) {
   .extra-product-card {
     grid-template-columns: 285px 254px 91px;
-    grid-template-rows: 10px 70px;
+    grid-template-rows: auto 70px;
     padding-top: 26px;
     border-left: 1px solid #ebebeb;
     border-right: 1px solid #ebebeb;
@@ -22,10 +22,11 @@
 @media (min-width: $desktop-width) {
   .extra-product-card {
     grid-template-columns: 325px 243px 82px 244px;
-    grid-template-rows: 69px;
+    grid-template-rows: auto;
     padding: 0;
     border-left: none;
     border-right: none;
+    min-height: 70px;
   }
 }
 
@@ -38,8 +39,9 @@
 
 @media (min-width: $tablet-width) {
   .extra-product-card__link {
-    grid-column: 1/-1;
+    grid-column: 1/2;
     grid-row: 1/2;
+    margin-top: 0;
   }
 }
 
@@ -83,22 +85,24 @@
   .extra-product-card__info {
     display: grid;
     grid-template-columns: 254px 91px;
-    grid-template-rows: 20px;
-    grid-column: 2/4;
+    grid-template-rows: auto;
+    grid-column: 2/auto;
     grid-row: 1/2;
     margin-top: auto;
     text-align: end;
+    align-items: start;
   }
 }
 
 @media (min-width: $desktop-width) {
   .extra-product-card__info {
     display: grid;
     grid-template-columns: 243px 82px;
-    grid-template-rows: 70px;
+    grid-template-rows: auto;
     grid-column: 2/4;
     grid-row: 1/-1;
     align-items: center;
+    height: 100%;
   }
 }
 
@@ -133,6 +137,7 @@
     @include font-text-primary(16px, 20px, $color-text-base);
     grid-column: 2/3;
     grid-row: 1/2;
+    word-break: break-word;
   }
 }
 

diff --git a/source/styles/blocks/extra-product-list.scss b/source/styles/blocks/extra-product-list.scss
@@ -2,14 +2,6 @@
   @include list();
 }
 
-/* --
-@media (min-width: $tablet-width) {
-  .extra-product-list {
-    border: none;
-  }
-}
-  -- */
-
 .extra-product-list__item {
   padding-top: 20px;
   padding-bottom: 25px;

diff --git a/source/styles/blocks/form-block.scss b/source/styles/blocks/form-block.scss
@@ -1,9 +1,3 @@
-/* --
-.form-block {
-  border: none;
-}
-  -- */
-
 .form-block__input {
   margin-bottom: 16px;
   padding: 13px;
@@ -14,6 +8,7 @@
 @media (min-width: $tablet-width) {
   .form-block__input {
     width: 376px;
+    margin-bottom: 0;
   }
 }
 
@@ -31,8 +26,8 @@
 
 @media (min-width: $tablet-width) {
   .form-block__button {
-    width: 256px;
-    height: 56px;
     flex-shrink: 0;
+    width: 256px;
+    min-height: 56px;
   }
 }
diff --git a/source/styles/blocks/goods.scss b/source/styles/blocks/goods.scss
@@ -1,25 +1,19 @@
 .goods {
   min-width: 280px;
   max-width: 280px;
-  margin: 0 auto;
-  padding: 27px 20px 0;
 }
 
 @media (min-width: $tablet-width) {
   .goods {
     min-width: 708px;
     max-width: 708px;
-    margin: 0 auto;
-    padding: 65px 30px 77px;
   }
 }
 
 @media (min-width: $desktop-width) {
   .goods {
     min-width: 1220px;
     max-width: 1220px;
-    margin: 0 auto;
-    padding: 188px 60px 71px;
   }
 }