htmlacademy-adaptive · DoberBober · Feb 1, 2025 · Jan 30, 2025 · Feb 1, 2025
diff --git a/source/catalog.html b/source/catalog.html
@@ -20,8 +20,8 @@
 
 <body class="page">
   <header class="main-header" data-test="header">
-    <nav class="navigation navigation--closed navigation--nojs container">
-      <div class="navigation__container">
+    <nav class="navigation  navigation--closed navigation--nojs container navigation--catalog">
+      <div class="navigation__container navigation__container--catalog">
         <a class="navigation__logo-image logo" href="index.html">
           <picture>
             <source media="(min-width: 1200px)" srcset="images/logodesktop.svg" width="70" height="59" type="image/svg+xml">

diff --git a/source/icons/slider.svg b/source/icons/slider.svg
diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss
@@ -20,7 +20,7 @@
   font-weight: 400;
   text-align: start;
   width: 280px;
-  margin-bottom: 40px;
+  margin-bottom: 38px;
 
   @media (min-width: $tablet-width) {
     line-height: 60px;

diff --git a/source/styles/blocks/copyright.scss b/source/styles/blocks/copyright.scss
@@ -35,6 +35,7 @@
 
 .copyright__logo svg {
   fill: #666666;
+  flex-shrink: 0;
 }
 
 .copyright__logo:hover svg {

diff --git a/source/styles/blocks/example-slider.scss b/source/styles/blocks/example-slider.scss
@@ -9,7 +9,7 @@
     content: "";
     position: absolute;
     top: 0;
-    height: calc(100% - 135px);
+    height: 100%;
     background-color: #eaeaea;
     width: 100vw;
     left: calc((100vw - 100%) / -2);
@@ -23,6 +23,7 @@
     @media (min-width: $desktop-width) {
       top: 135px;
       background-color: #f2f2f2;
+      height: calc(100% - 135px);
     }
   }
 

diff --git a/source/styles/blocks/hero.scss b/source/styles/blocks/hero.scss
@@ -128,6 +128,8 @@
   margin: 0 auto;
   border: none;
   text-decoration: none;
+  text-align: center;
+  padding: 10px;
 
 
   @media (min-width: $tablet-width) {
@@ -163,6 +165,6 @@
 
   @media (min-width: $desktop-width) {
     margin-top: -315px;
-    margin-right: 22px;
+    margin-right: 221px;
   }
 }
diff --git a/source/styles/blocks/navigation-catalog.scss b/source/styles/blocks/navigation-catalog.scss
@@ -0,0 +1,33 @@
+.navigation-catalog {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    height: 1px;
+    background-color: #ebebeb;
+    width: 100vw;
+    left: calc((100vw - 100%) / -2);
+
+    @media (min-width: $tablet-width) {
+      height: 0;
+    }
+  }
+
+  @media (min-width: $tablet-width) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 50px;
+    margin-top: 25px;
+  }
+
+  @media (min-width: $desktop-width) {
+    margin-top: 55px;
+    min-height: 59px;
+  }
+}
diff --git a/source/styles/blocks/navigation.scss b/source/styles/blocks/navigation.scss
@@ -120,7 +120,7 @@
   text-decoration: none;
 
   @media (min-width: $tablet-width) {
-    height: 33px;
+    min-height: 33px;
 
     &:hover {
       opacity: 0.6;
@@ -133,7 +133,7 @@
 
   @media (min-width: $desktop-width) {
     color: #ffffff;
-    height: 37px;
+    min-height: 37px;
 
     &:hover {
       opacity: 0.6;
@@ -260,3 +260,26 @@
     align-items: center;
   }
 }
+
+.navigation.navigation--catalog {
+  @media (min-width: $tablet-width) {
+    height: auto;
+    min-height: 50px;
+  }
+
+  @media (min-width: $desktop-width) {
+    height: auto;
+    min-height: 59px;
+  }
+}
+
+.navigation__container.navigation__container--catalog {
+  @media (min-width: $tablet-width) {
+    align-items: end;
+    margin-top: 16px;
+  }
+
+  @media (min-width: $desktop-width) {
+    margin-top: 25px;
+  }
+}
diff --git a/source/styles/blocks/other-products.scss b/source/styles/blocks/other-products.scss
@@ -72,6 +72,10 @@
   @media (min-width: $tablet-width) {
     top: 15px;
   }
+
+  @media (min-width: $desktop-width) {
+    top: 18px;
+  }
 }
 
 .other-products__title span {

diff --git a/source/styles/blocks/products-catalog.scss b/source/styles/blocks/products-catalog.scss
@@ -36,13 +36,13 @@
     width: 435px;
     font-size: 60px;
     line-height: 60px;
-    margin: 65px 0 84px;
+    margin: 48px 0 84px;
     margin-left: 0;
   }
 
   @media (min-width: $desktop-width) {
     margin-left: 0;
-    margin-top: 75px;
+    margin-top: 57px;
     margin-bottom: 83px;
   }
 }

diff --git a/source/styles/blocks/programm.scss b/source/styles/blocks/programm.scss
@@ -43,8 +43,9 @@
 }
 
 .programm__title-slim {
-  margin-left: 9px;
+  margin-left: 25px;
   padding-left: 65px;
+  text-align: start;
 
   @media (min-width: $tablet-width) {
     margin-left: 52px;
@@ -53,15 +54,16 @@
   }
 
   @media (min-width: $desktop-width) {
-    margin-left: 26px;
+    margin-left: 65px;
     padding-left: 150px;
     max-width: 500px;
   }
 }
 
 .programm__title-pro {
   margin-left: 38px;
-  padding-left: 42px;
+  padding-left: 53px;
+  text-align: start;
 
   @media (min-width: $tablet-width) {
     margin-left: 53px;
@@ -70,7 +72,7 @@
   }
 
   @media (min-width: $desktop-width) {
-    margin-left: 25px;
+    margin-left: 65px;
     padding-left: 150px;
     max-width: 500px;
     text-align: left;
@@ -85,22 +87,22 @@
   color: #444444;
   width: 240px;
   min-height: 113px;
-  margin-bottom: 13px;
+  margin-bottom: 14px;
   margin-left: 20px;
   border-bottom: 1px solid #d9d9d9;
 
   @media (min-width: $tablet-width) {
     font-size: 16px;
     line-height: 24px;
     margin-left: 51px;
-    margin-bottom: 28px;
+    margin-bottom: 35px;
     width: 340px;
     border-bottom: none;
   }
 
   @media (min-width: $desktop-width) {
     width: 457px;
-    margin-bottom: 23px;
+    margin-bottom: 28px;
     min-height: 72px;
     margin-left: 53px;
   }
@@ -117,7 +119,7 @@
   width: 144px;
   text-align: start;
   margin-top: 5px;
-  margin-left: 15px;
+  margin-left: 20px;
   border-top: 1px solid #d9d9d9;
   border: none;
   text-decoration: none;
@@ -152,7 +154,7 @@
   width: 24px;
   height: 12px;
   top: 5px;
-  left: 104px;
+  left: 101px;
 
   @media (min-width: $tablet-width) {
     left: 130px;
@@ -190,7 +192,7 @@
 .programm__item {
   background-color: #f2f2f2;
   min-height: 256px;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
 
   @media (min-width: $tablet-width) {
     min-height: 372px;
@@ -212,15 +214,15 @@
 
   @media (min-width: $tablet-width) {
     width: 200px;
-    min-height: 211px;
+    min-height: 210px;
     top: 80px;
     left: 445px;
   }
 
   @media (min-width: $desktop-width) {
     width: 100px;
     height: 106px;
-    top: -13px;
+    top: -12px;
     left: 52px;
   }
 }
@@ -235,14 +237,14 @@
   background-image: url("../../icons/stack.svg#procat");
   width: 67px;
   min-height: 50px;
-  top: 25px;
+  top: 23px;
   left: 12px;
 
   @media (min-width: $tablet-width) {
     width: 268px;
     min-height: 200px;
     top: 90px;
-    left: 415px;
+    left: 414px;
   }
 
   @media (min-width: $desktop-width) {

diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss
@@ -90,7 +90,7 @@
   flex-wrap: wrap;
 
   @media (min-width: $tablet-width) {
-    margin-top: 0;
+    margin-top: -2px;
     margin-left: 20px;
   }
 }