Merge pull request #6 from MadinaSatem/module9-task1

DoberBober · web-flow · commit 49d39d88faf3 · 2025-02-01T17:45:33.000+03:00
Последняя защита
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
@@ -1 +1 @@
-<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="38" height="38" rx="19" fill="#fff"/><rect x="1" y="1" width="38" height="38" rx="19" stroke="#666" stroke-width="2"/><path d="m16 11-8 9 8 9v-18Zm16 9-8-9v18l8-9Z" fill="#666"/></svg>
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m16 11-8 9 8 9v-18Zm16 9-8-9v18l8-9Z" fill="#666"/></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;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@`
`35`	`35`
`36`	`36`	`.copyright__logo svg {`
`37`	`37`	`fill: #666666;`
	`38`	`+ flex-shrink: 0;`
`38`	`39`	`}`
`39`	`40`
`40`	`41`	`.copyright__logo:hover svg {`
Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,8 @@`
`128`	`128`	`margin: 0 auto;`
`129`	`129`	`border: none;`
`130`	`130`	`text-decoration: none;`
	`131`	`+ text-align: center;`
	`132`	`+ padding: 10px;`
`131`	`133`
`132`	`134`
`133`	`135`	`@media (min-width: $tablet-width) {`
`@@ -163,6 +165,6 @@`
`163`	`165`
`164`	`166`	`@media (min-width: $desktop-width) {`
`165`	`167`	`margin-top: -315px;`
`166`		`- margin-right: 22px;`
	`168`	`+ margin-right: 221px;`
`167`	`169`	`}`
`168`	`170`	`}`
Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,10 @@`
`72`	`72`	`@media (min-width: $tablet-width) {`
`73`	`73`	`top: 15px;`
`74`	`74`	`}`
	`75`	`+`
	`76`	`+ @media (min-width: $desktop-width) {`
	`77`	`+ top: 18px;`
	`78`	`+ }`
`75`	`79`	`}`
`76`	`80`
`77`	`81`	`.other-products__title span {`
Original file line number	Diff line number	Diff line change
`@@ -36,13 +36,13 @@`
`36`	`36`	`width: 435px;`
`37`	`37`	`font-size: 60px;`
`38`	`38`	`line-height: 60px;`
`39`		`- margin: 65px 0 84px;`
	`39`	`+ margin: 48px 0 84px;`
`40`	`40`	`margin-left: 0;`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`@media (min-width: $desktop-width) {`
`44`	`44`	`margin-left: 0;`
`45`		`- margin-top: 75px;`
	`45`	`+ margin-top: 57px;`
`46`	`46`	`margin-bottom: 83px;`
`47`	`47`	`}`
`48`	`48`	`}`