add changes

mate-academy · Nov 4, 2024 · 48a47d4 · 48a47d4
1 parent 57afd0e
commit 48a47d4
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 21 deletions.
diff --git a/src/images/logo.svg b/src/images/logo.svg
diff --git a/src/index.html b/src/index.html
@@ -56,7 +56,7 @@
           href="#"
         >
           <img
-            src="images/logo.png"
+            src="images/logo.svg"
             alt="NAMU logo"
           />
         </a>
@@ -78,7 +78,7 @@ <h1 class="header__title">Мистецтво ХІХ - ХХ ст.</h1>
         <p class="header__text">
           Внесок українських митців у світову культуру 19-20 ст.
         </p>
-        <button class="button">Купити квиток</button>
+        <button class="button button--with">Купити квиток</button>
         <div class="header__date">10.08 - 10.10</div>
       </div>
       <div class="header__botton"></div>
@@ -94,7 +94,7 @@ <h1 class="header__title">Мистецтво ХІХ - ХХ ст.</h1>
           href="#"
         >
           <img
-            src="images/logo.png"
+            src="images/logo.svg"
             alt="NAMU logo"
           />
         </a>
@@ -113,7 +113,13 @@ <h1 class="header__title">Мистецтво ХІХ - ХХ ст.</h1>
       <div class="menu__content">
         <div class="menu__schedule">
           <p class="menu__date">12:00 - 19:00:</p>
-          <p class="menu__address">Київ, вул. М. Грушевського, 6</p>
+          <a
+            class="menu__address"
+            target="_blank"
+            href="https://www.google.com/maps/place/%D0%B2%D1%83%D0%BB%D0%B8%D1%86%D1%8F+%D0%9C%D0%B8%D1%85%D0%B0%D0%B9%D0%BB%D0%B0+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D1%8C%D0%BA%D0%BE%D0%B3%D0%BE,+6,+%D0%9A%D0%B8%D1%97%D0%B2,+02000/data=!4m2!3m1!1s0x40d4ce52445a8315:0x5e30ef474eddac89?sa=X&ved=1t:242&ictx=111"
+          >
+            Київ, вул. М. Грушевського, 6
+          </a>
         </div>
         <nav class="nav menu__nav">
           <ul class="nav__list">
@@ -193,7 +199,8 @@ <h3 class="main__title main__title--exibition">
             та інших митців.
           </p>
           <button class="button">Купити квиток</button>
-          <button class="button button--bottom-section">Архів виставок
+          <button class="button button--bottom-section">
+            Архів виставок
             <div class="button__icon"></div>
           </button>
         </article>
@@ -205,7 +212,8 @@ <h3 class="main__title main__title--exibition">
       >
         <div class="section__name">
           <h2 class="section__title">Найближчі події</h2>
-          <button class="button button--top-section">Календар подій
+          <button class="button button--top-section">
+            Календар подій
             <div class="button__icon"></div>
           </button>
         </div>
@@ -271,7 +279,8 @@ <h2 class="plan__title">Сплануйте візит до музею</h2>
       >
         <div class="section__name">
           <h2 class="section__title">Новини</h2>
-          <button class="button button--top-section">Усі новини
+          <button class="button button--top-section">
+            Усі новини
             <div class="button__icon"></div>
           </button>
         </div>
@@ -301,7 +310,8 @@ <h3 class="main__title main__title--news">Міжнародний день кот
             Музей з левами не може просто так взяти і пропустити Міжнародний
             день котів!
           </p>
-          <button class="button button--bottom-section">Архів виставок
+          <button class="button button--bottom-section">
+            Архів виставок
             <div class="button__icon"></div>
           </button>
         </article>
@@ -338,13 +348,12 @@ <h2 class="section__title section__title--subscription">
         <div class="contact">
           <h2 class="footer__title">Контакти</h2>
           <a
-            class="contact__item"
+            class="contact__item contact__address"
             href="https://www.google.com/maps/place/%D1%83%D0%BB.+%D0%9C%D0%B8%D1%85%D0%B0%D0%B8%D0%BB%D0%B0+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D0%BA%D0%BE%D0%B3%D0%BE,+6,+%D0%9A%D0%B8%D0%B5%D0%B2,+02000/@50.449395,30.5307834,17z/data=!3m1!4b1!4m6!3m5!1s0x40d4ce52445a8315:0x5e30ef474eddac89!8m2!3d50.449395!4d30.5307834!16s%2Fg%2F11l76wtstx?entry=ttu&g_ep=EgoyMDI0MTAyOS4wIKXMDSoASAFQAw%3D%3D"
             target="_blank"
           >
-            Київ,
-            <br />
-            вул. М. Грушевського, 6
+            <div class="contact__item contact__address-place">Київ,</div>
+            <div class="contact__address">вул. М. Грушевського, 6</div>
           </a>
           <a
             class="contact__item"
@@ -361,20 +370,24 @@ <h2 class="footer__title">Контакти</h2>
         </div>
         <div class="contact__networks">
           <a
-            href="https://www.facebook.com/"
             class="contact__icon contact__icon--facebook"
+            target="_blank"
+            href="https://www.facebook.com/"
           ></a>
           <a
-            href="https://x.com/"
             class="contact__icon contact__icon--twitter"
+            target="_blank"
+            href="https://x.com/"
           ></a>
           <a
-            href="https://web.telegram.app/"
             class="contact__icon contact__icon--telegram"
+            target="_blank"
+            href="https://web.telegram.app/"
           ></a>
           <a
-            href="https://www.instagram.com/"
             class="contact__icon contact__icon--instagram"
+            target="_blank"
+            href="https://www.instagram.com/"
           ></a>
         </div>
       </section>

diff --git a/src/styles/block/button.scss b/src/styles/block/button.scss
@@ -1,4 +1,5 @@
 .button {
+  border: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,7 +15,6 @@
   background-color: #cd4d31;
   width: 100%;
   height: 60px;
-  max-width: 280px;
 
   @include on-tablet {
     width: 330px;
@@ -32,6 +32,14 @@
     background-color: #ea340d;
   }
 
+  &--with{
+    width: 330px;
+
+    @include on-desctop {
+      width: 270px;
+    }
+  }
+
   &--menu {
     grid-column: 1/-1;
     margin-bottom: 20px;

diff --git a/src/styles/block/contact.scss b/src/styles/block/contact.scss
@@ -9,8 +9,14 @@
     font-weight: 400;
     line-height: 24px;
     text-align: left;
-
     text-decoration: none;
+    box-sizing: border-box;
+    border-bottom: 1px solid #3f5252;
+
+    &:hover {
+      width: fit-content;
+      border-bottom: 1px solid #f1f5f4;
+    }
   }
 
   &__networks {
@@ -57,4 +63,11 @@
       }
     }
   }
+
+  &__address {
+    &:hover .contact__address-place {
+      width: fit-content;
+      border-bottom: 1px solid #f1f5f4;
+    }
+  }
 }
diff --git a/src/styles/block/main.scss b/src/styles/block/main.scss
@@ -1,7 +1,8 @@
 .main {
+  background-color: #f1f5f4;
   display: flex;
   flex-direction: column;
-  margin-block: 90px 80px;
+  padding-block: 90px 80px;
   row-gap: 120px;
 
   &__title {

diff --git a/src/styles/block/menu.scss b/src/styles/block/menu.scss
@@ -8,6 +8,7 @@
     @include on-tablet {
       grid-column: 1/-1;
       display: flex;
+      align-items: center;
       gap: 120px;
     }
 
@@ -46,6 +47,7 @@
     line-height: 24px;
     text-align: left;
 
+    text-decoration: none;
     display: flex;
     flex-direction: column;
     color: #f1f5f4;