From 7e29e8c98e65d6634260e687ec1d37c13b2d641d Mon Sep 17 00:00:00 2001
From: Yurii Mosin <m.yuriy@icloud.com>
Date: Sun, 28 Jul 2024 14:07:33 +0300
Subject: [PATCH] add solution

---
 src/images/Group 74.png            | Bin 0 -> 447 bytes
 src/index.html                     |  35 ++++------
 src/styles/blocks.scss/footer.scss |  27 ++++----
 src/styles/blocks.scss/galery.scss |   6 +-
 src/styles/blocks.scss/header.scss | 100 +++++++++++++----------------
 src/styles/blocks.scss/mains.scss  |  79 ++++++++++++-----------
 src/styles/blocks.scss/menu.scss   |  53 ++++++++++++---
 src/styles/blocks.scss/slider.scss |   5 ++
 8 files changed, 164 insertions(+), 141 deletions(-)
 create mode 100644 src/images/Group 74.png

diff --git a/src/images/Group 74.png b/src/images/Group 74.png
new file mode 100644
index 0000000000000000000000000000000000000000..aea5573bd8462e6eefd920720d6a749c91515cfc
GIT binary patch
literal 447
zcmeAS@N?(olHy`uVBq!ia0y~yV3Yu|jX2nVWc#@z89<7&z$3Dlfq`2Xgc%uT%>k)k
zEDmyaVpw-h<|UBBlJ4m1$iT3%pZiZDD^M=P)5S5Qg7NL$jlRr=3~hnzshutX2brc!
zS+Y<;G_`93tMdlepnxD*R^OnYO$;FlM#m1idiZ>Z)~NH}HCg>f&gp43v-F<TGIB`p
z?_b}Z7t&DwaDv+3#Y_T91`a(37z~-1k8tn^C=<)MFyZ#;pXbYCvn0hAaHdb5ylKwg
zqp4eKwKBsDE_7_a>%Ox-=Kb;0k#nc^9B^=+7azaM%`IVpp{cU6!G#4;69pv}d|5dC
zA`6>TNoif+yS!<?KW5#Y`c<uXk&3~E8Bv9j96TmV(qh<{n0qbe%7pixKHwXdapd>A
z&)>i0#jENuH#WAdF^^q&QjD`hP(r~ip+TaNF^PqZSdOHx_~(5LEH%ug?e2dQZ!Yr%
PhBt$!tDnm{r-UW|yw{ig

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index 77a1333e2..613747373 100644
--- a/src/index.html
+++ b/src/index.html
@@ -54,7 +54,6 @@
 
     <header class="header">
       <div class="had">
-
         <div class="header__all">
           <div class="icon">
             <a
@@ -65,7 +64,6 @@
           <h1 class="header__all--title">Художній музей</h1>
         </div>
 
-
         <div class="header__pict">
           <div class="header__all--img">
             <div class="header__all--logo">
@@ -78,9 +76,6 @@ <h2 class="header__all--text">
           </div>
         </div>
 
-
-
-
         <div class="scale3">
           <div class="header__all--ticbox">
             <a href="#exhidition">
@@ -188,11 +183,9 @@ <h2 class="header__all--text">
           <div>Каса припиняє роботу за 1 годину до закриття музею</div>
         </div>
       </div>
-      </div>
     </aside>
 
     <main class="main">
-
       <section
         class="events"
         id="exhidition"
@@ -257,8 +250,7 @@ <h2 class="header__all--text">
           </div>
         </div>
       </section>
-      <div >
-
+      <div>
         <div class="events__collection">
           <img
             class="events__collection--cover"
@@ -345,15 +337,13 @@ <h2 class="header__all--text">
         </div>
       </section>
 
-
       <div>
         <section id="about">
           <div class="subscript">
-
             <img
-                class="events__collection--cover--down"
-                src="././images/Rectangle 22.png"
-                alt="collection"
+              class="events__collection--cover--down"
+              src="././images/Rectangle 22.png"
+              alt="collection"
             />
 
             <div class="events__collection--subscript">
@@ -368,14 +358,15 @@ <h2 class="header__all--text">
                     type="text"
                     action="#"
                     data-qa="hover"
-                    required placeholder="E-mail"
+                    required
+                    placeholder="E-mail"
                   />
                   <a href=" ">
                     <img
-                    class="search-form__button search-form__container"
-                    data-qa="hover"
-                    src="././images/Group 57.png"
-                    alt="email"
+                      class="search-form__button search-form__container"
+                      data-qa="hover"
+                      src="././images/Group 57.png"
+                      alt="email"
                     />
                   </a>
                 </div>
@@ -386,7 +377,6 @@ <h2 class="header__all--text">
       </div>
     </main>
 
-
     <div class="scale">
       <footer class="footer">
         <div class="container">
@@ -451,7 +441,10 @@ <h2 class="header__all--text">
                 </div>
                 <div class="menu__content--schedule2 footer__menu--schedule2">
                   <br />
-                  <div><span class="menu__content--bold">Вихідні:</span> понеділок, вівторок</div>
+                  <div>
+                    <span class="menu__content--bold">Вихідні:</span>
+                    понеділок, вівторок
+                  </div>
                   <div>Каса припиняє роботу за 1 годину</div>
                   <div>до закриття музею</div>
                 </div>
diff --git a/src/styles/blocks.scss/footer.scss b/src/styles/blocks.scss/footer.scss
index ab9637e28..549c53746 100644
--- a/src/styles/blocks.scss/footer.scss
+++ b/src/styles/blocks.scss/footer.scss
@@ -32,18 +32,18 @@
   }
 
   &__bottom {
+    margin-top: 0;
 
-    margin-top: -14px;
     @include on-tabl-desk {
       justify-content: left;
       position: absolute;
-      top: 380px;
-      left: 40px;
+      top: 390px;
+      left: 50px;
     }
 
     @include on-mob-tabl {
       position: relative;
-      top: 80px;
+      top: 60px;
       left: -110px;
     }
   }
@@ -56,7 +56,6 @@
     width: 170px;
     height: 72px;
 
-
     @include on-mob-tabl {
       position: absolute;
       top: -265px;
@@ -65,10 +64,10 @@
   }
 
   &__un {
+    width: 68px;
     position: relative;
     text-decoration: none;
 
-
     @include on-mob-tabl {
       position: relative;
       left: 280px;
@@ -81,6 +80,7 @@
   }
 
   &__menu {
+    box-sizing: border-box;
     display: flex;
     margin-left: 20px;
     margin-top: 15px;
@@ -93,9 +93,9 @@
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      position: relative;
-      top: -270px;
-      left: -95px;
+      position: absolute;
+      top: -250px;
+      left: 15px;
     }
 
     &--contact {
@@ -110,7 +110,7 @@
         height: 210px;
         position: relative;
         top: 106px;
-        left: 170px;
+        left: 150px;
       }
 
       font-size: 14px;
@@ -149,7 +149,7 @@
         width: 130px;
         position: absolute;
         top: 250px;
-        left: 0;
+        left: 30px;
       }
     }
   }
@@ -171,9 +171,10 @@
 
     @include on-mob-tabl {
       transform: rotate(-90deg);
-      left: -55px;
+      left: -90px;
       top: 200px;
       height: 280px;
+      margin-bottom: 40px;
     }
   }
 }
@@ -217,6 +218,6 @@
     display: flex;
     flex-direction: column-reverse;
     text-align: center;
-    top: -100px;
+    top: 500px;
   }
 }
diff --git a/src/styles/blocks.scss/galery.scss b/src/styles/blocks.scss/galery.scss
index cfe43db20..02f7d251d 100644
--- a/src/styles/blocks.scss/galery.scss
+++ b/src/styles/blocks.scss/galery.scss
@@ -1,9 +1,7 @@
 .galery {
-
   margin: 0 auto;
-padding: 0 55px;
-max-width: 1280px;
-
+  padding: 0 55px;
+  max-width: 1280px;
 
   text-align: center;
 
diff --git a/src/styles/blocks.scss/header.scss b/src/styles/blocks.scss/header.scss
index d1769d9e8..1cbd42760 100644
--- a/src/styles/blocks.scss/header.scss
+++ b/src/styles/blocks.scss/header.scss
@@ -1,59 +1,52 @@
-.scale{
-  @include on-desktop{
-  margin: 0 auto;
-padding: 0 55px;
-max-width: 1280px;
-}
+.scale {
+  @include on-desktop {
+    margin: 0 auto;
+    padding: 0 55px;
+    max-width: 1280px;
+  }
 }
 
-.scale1{
+.scale1 {
   margin: 0 auto;
   max-width: 1280px;
 }
 
-.scale2{
-@include on-desktop{
-  //margin-left: auto;
-  //margin-right: auto;
-  max-width: 1280px;
-
-}
+.scale2 {
+  @include on-desktop {
+    // margin-left: auto;
+    // margin-right: auto;
+    max-width: 1280px;
+  }
 }
 
-.scale3{
-  @include on-desktop{
-
-  }
+// .scale3{
+// @include on-desktop{
+// }
+// }
+
+.had {
+  // width: 100vh;
+  // height: 100vh;
+  @include on-desktop {
+    margin: 0 auto;
+    max-width: 1280px;
+    position: relative;
+    display: grid;
+    column-gap: 30px;
+    grid-template-columns: repeat(12, 1fr);
   }
 
-.had{
- // width: 100vh;
- // height: 100vh;
- @include on-desktop{
- margin: 0 auto;
- max-width: 1280px;
- position: relative;
- display: grid;
-  column-gap: 30px;
-  grid-template-columns: repeat(12, 1fr);
- }
- @include on-tabl-desk{
-  margin: 0 auto;
-
-
- }
-
+  @include on-tabl-desk {
+    margin: 0 auto;
+  }
 }
 
 .header {
-
   box-sizing: border-box;
   padding-left: 55px;
 
-
   @include on-tabl-desk {
     padding-left: 34px;
-
   }
 
   @include on-mob-tabl {
@@ -87,9 +80,8 @@ max-width: 1280px;
 }
 
 .header__all {
-  margin-bottom: 200px;
-  height: 100vh;
-
+  margin-bottom: 200;
+  height: 655px;
 
   @include on-tabl-desk {
     margin-bottom: 0;
@@ -171,7 +163,7 @@ max-width: 1280px;
     @include on-tabl-desk {
       position: absolute;
       left: 74px;
-      top: 0px;
+      top: 0;
       grid-column: 1/3;
     }
 
@@ -192,9 +184,10 @@ max-width: 1280px;
     }
 
     @include on-mob-tabl {
-      width: 280px;
-      height: 67px;
-      position: absolute;
+      width: 100vh;
+      height: 50px;
+      position: relative;
+      left: 0%;
     }
   }
 
@@ -223,12 +216,11 @@ max-width: 1280px;
   @include on-tabl-desk {
     display: none;
   }
-position: absolute;
 
+  position: absolute;
 
   top: 575px;
-  left:-55px;
-
+  left: -55px;
 
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 14px;
@@ -240,16 +232,13 @@ position: absolute;
   display: flex;
   gap: 20px;
 
-
   &__border {
     border-left: 70px solid #687480;
     margin-top: 13px;
     height: 1px;
-
   }
 
   transform: rotate(-90deg);
-
 }
 
 .icon {
@@ -269,10 +258,9 @@ position: absolute;
       left: 20px;
     }
 
-    @include on-mob-tabl{
+    @include on-mob-tabl {
       z-index: 1;
-      margin-top: 0px;
-
+      margin-top: 0;
     }
 
     &:hover {
@@ -283,8 +271,12 @@ position: absolute;
   &--close {
     @include on-mob-tabl {
       position: absolute;
+      width: 24px;
+      height: 24px;
       left: 20px;
       top: 27px;
+      display: block;
+      z-index: 1;
     }
 
     position: relative;
diff --git a/src/styles/blocks.scss/mains.scss b/src/styles/blocks.scss/mains.scss
index 93155922b..c474ec303 100644
--- a/src/styles/blocks.scss/mains.scss
+++ b/src/styles/blocks.scss/mains.scss
@@ -1,4 +1,6 @@
 .main {
+  box-sizing: border-box;
+
   @include on-mob-tabl {
     position: relative;
     top: -160px;
@@ -7,8 +9,8 @@
 
 .events {
   margin: 0 auto;
-padding: 0 55px;
-max-width: 1280px;
+  padding: 0 55px;
+  max-width: 1280px;
 
   @include on-tabl-desk {
     padding-left: 34px;
@@ -40,29 +42,38 @@ max-width: 1280px;
 }
 
 .events__one {
-  @include on-desktop{
+  @include on-desktop {
     position: relative;
     top: -10vh;
   }
+
   @include on-tabl-desk {
     width: 460px;
     height: 177px;
   }
+
+  @include on-mob-tabl {
+    margin-bottom: 60px;
+  }
 }
 
 .events__two {
-  @include on-desktop{
+  @include on-desktop {
     position: relative;
     top: -10vh;
   }
+
   @include on-tabl-desk {
     width: 460px;
     height: 177px;
   }
+
+  @include on-mob-tabl {
+    margin-bottom: 60px;
+  }
 }
 
 .events__collection {
-
   display: flex;
   align-items: center;
   justify-content: left;
@@ -95,11 +106,11 @@ max-width: 1280px;
     &--about--up {
       width: 570px;
       height: 204px;
+
       @include on-mob-tabl {
         width: 280px;
         height: 140px;
       }
-
     }
   }
 
@@ -228,8 +239,6 @@ max-width: 1280px;
   }
 
   &--subscript {
-
-
     top: 163px;
 
     @include on-tabl-desk {
@@ -256,6 +265,7 @@ max-width: 1280px;
 
   &--subscript1 {
     margin: 0;
+
     @include on-tabl-desk {
       margin: 0;
     }
@@ -285,13 +295,12 @@ max-width: 1280px;
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 18px;
     font-weight: 400;
-    line-height: 0px;
     line-height: 18px;
     margin-bottom: 46px;
 
     @include on-tabl-desk {
       line-height: 18px;
- margin-bottom: 46px;
+      margin-bottom: 46px;
     }
 
     @include on-mob-tabl {
@@ -304,7 +313,6 @@ max-width: 1280px;
   width: 100%;
   justify-content: center;
 
-
   @include on-tabl-desk {
     padding-right: 34px;
     padding-left: 34px;
@@ -320,7 +328,7 @@ max-width: 1280px;
 }
 
 .events__collection--cover--down {
-width: 100%;
+  width: 100%;
   height: 550px;
   position: absolute;
 
@@ -353,19 +361,11 @@ width: 100%;
   }
 }
 
-
-
-
-
-
-
 .search-form__container {
-
   font-family: Montserrat, sans-serif;
-font-size: 14px;
-line-height: 14px;
-text-align: left;
-
+  font-size: 14px;
+  line-height: 14px;
+  text-align: left;
 }
 
 .search-form__container::before {
@@ -376,7 +376,6 @@ text-align: left;
 }
 
 .search-form__field {
-
   padding-left: 32px;
   width: 470px;
   height: 70px;
@@ -412,21 +411,23 @@ text-align: left;
   outline: none;
 }
 
-.search-form{
-display: flex;
-gap: 30px;
-justify-content: center;
-@include on-mob-tabl{
-  gap: 0;
-}
-@include on-tabl-desk{
-  gap: 16px;
-}
-}
+.search-form {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
 
-.search-form__button{
-  @include on-mob-tabl{
-width: 50px;
-height: 50px;
+  @include on-mob-tabl {
+    gap: 0;
+  }
+
+  @include on-tabl-desk {
+    gap: 16px;
+  }
 }
+
+.search-form__button {
+  @include on-mob-tabl {
+    width: 50px;
+    height: 50px;
+  }
 }
diff --git a/src/styles/blocks.scss/menu.scss b/src/styles/blocks.scss/menu.scss
index f4c29038d..b09e6381b 100644
--- a/src/styles/blocks.scss/menu.scss
+++ b/src/styles/blocks.scss/menu.scss
@@ -7,6 +7,12 @@
   color: #fff;
   text-decoration: none;
 
+  @include on-mob-tabl {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
   @include on-tabl-desk {
     font-size: 16px;
     line-height: 16px;
@@ -15,10 +21,15 @@
 
 .nav__list {
   list-style: none;
+  margin: 0;
 }
 
 .nav__item {
   margin-bottom: 30px;
+
+  @include on-mob-tabl {
+    margin-bottom: 20px;
+  }
 }
 
 .menu2 {
@@ -44,6 +55,7 @@
   @include on-tabl-desk {
     padding-left: 34px;
   }
+
   box-sizing: border-box;
   padding-left: 55px;
   width: 100%;
@@ -64,12 +76,16 @@
     flex-direction: column;
     justify-content: space-between;
     height: 399px;
+    align-items: flex-start;
   }
 
   &__content {
-    margin-bottom: 10px;
-   width: 1280px;
+    margin-top: 27px;
+
     @include on-mob-tabl {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 16px;
       position: relative;
       left: -15vh;
     }
@@ -98,6 +114,11 @@
         left: 170px;
         top: 35px;
       }
+
+      @include on-mob-tabl {
+        position: relative;
+        left: -70px;
+      }
     }
 
     justify-content: center;
@@ -111,6 +132,10 @@
       height: 72px;
     }
 
+    @include on-mob-tabl {
+      margin-left: 72px;
+    }
+
     &--bold {
       font-weight: 600;
     }
@@ -121,6 +146,7 @@
 
     @include on-mob-tabl {
       margin-bottom: 0;
+      justify-content: start;
     }
 
     &--c1 {
@@ -175,8 +201,13 @@
     }
 
     @include on-mob-tabl {
-      position: relative;
-      left: -22vh;
+      width: 280px;
+      height: 145px;
+      margin-left: -30px;
+
+      margin-bottom: 16px;
+
+      left: -20vh;
       top: -1vh;
     }
   }
@@ -201,11 +232,12 @@
     }
 
     @include on-mob-tabl {
-      position: relative;
-      left: -5vh;
+      left: 2vh;
       top: 0;
       width: 280px;
       height: 63px;
+      margin-left: -30px;
+      margin-bottom: 27px;
     }
   }
 }
@@ -230,6 +262,7 @@
       opacity: 1;
       transform: translateY(0);
       pointer-events: all;
+      z-index: 1;
     }
   }
 }
@@ -237,7 +270,7 @@
 .menu__hr {
   position: relative;
   left: 48px;
-  border: 1px solid #fff;
+
   width: 145px;
   transform: rotate(-90deg);
 
@@ -248,8 +281,8 @@
 
   @include on-mob-tabl {
     transform: rotate(0deg);
-    width: 50vh;
-    position: relative;
-    left: -10vh;
+    width: 100%;
+
+    left: -4vh;
   }
 }
diff --git a/src/styles/blocks.scss/slider.scss b/src/styles/blocks.scss/slider.scss
index b15f131da..53c6118f2 100644
--- a/src/styles/blocks.scss/slider.scss
+++ b/src/styles/blocks.scss/slider.scss
@@ -6,6 +6,7 @@
 }
 
 .gallery {
+  box-sizing: border-box;
   padding-left: 34px;
   margin-top: 88px;
   margin-bottom: 133px;
@@ -13,6 +14,10 @@
   @include on-desktop {
     display: none;
   }
+
+  @include on-mob-tabl {
+    margin-top: 40px;
+  }
 }
 
 .gallery-cell {