fixed overlapping, button text style, made footer information as corr…

…esponding links
mate-academy · Mar 4, 2024 · b264f86 · b264f86
1 parent ed2e916
commit b264f86
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 18 deletions.
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,6 @@
     <link rel="stylesheet" href="./styles/main.scss" />
 
     <script src="./scripts/showPhoneNumber.js" defer></script>
-    <script src="./scripts/preventReload.js" defer></script>
     <script src="./scripts/hidingOverflow.js" defer></script>
 
   </head>
@@ -319,7 +318,7 @@ <h2 class="section-title contact-us__title">
 
               <button
                 id="send-button"
-                type="submit"
+                type="reset"
                 class="
                 button
                 button__primary
@@ -332,25 +331,35 @@ <h2 class="section-title contact-us__title">
             <div class="contact-us__info info">
               <div class="info__field">
                 <label class="info__label">Phone</label>
-                <p class="info__information">
+                <a
+                  class="info__information"
+                  href="tel: +1 234 5555-55-55"
+                  >
                   +1 234 5555-55-55
-                </p>
+                </a>
               </div>
               <div class="info__field">
                 <label class="info__label">Email</label>
-                <p class="info__information">
+                <a
+                  class="info__information"
+                  href="mailto:hello@bang&olufsen.com"
+                >
                   hello@bang&olufsen.com
-                </p>
+                </a>
               </div>
               <div class="info__field">
                 <p class="info__label">Adress</p>
-                <p class="info__information">
-                  400 first ave.
-                  <br>
-                  suite 700
-                  <br>
-                  Minneapolis, MN 55401
-                </p>
+                <a
+                  class="info__information"
+                  href="https://maps.app.goo.gl/N918GZqXPwQ5tH4CA"
+                  >
+                  <p
+                    class="info__information-paragraph">
+                    <span>400 first ave.</span>
+                    <span>suite 700</span>
+                    <span>Minneapolis, MN 55401</span>
+                  </p>
+                </a>
               </div>
             </div>
           </div>

diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss
@@ -17,9 +17,9 @@
   border-radius: 8px;
   padding: 14.5px;
   justify-content: center;
-  font-style: 16px;
+  font-size: 16px;
   font-weight: 700;
-
+  font-family: Manrope;
 
   &__link {
     text-decoration: none;
@@ -31,5 +31,9 @@
 
     @include hover(background-color, $primary-button-bg--hovered);
     @include focus(background-color, $primary-button-bg--focused);
+
+    &:focus {
+      background-color: $primary-button-bg--focused;
+    }
   }
 }
diff --git a/src/styles/blocks/_categories.scss b/src/styles/blocks/_categories.scss
@@ -17,7 +17,7 @@
   }
 
   &__link {
-    @include hover (transform, scale(1.2));
+    @include hover (transform, scale(1.05));
 
     position: relative;
     height: 0;

diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss
@@ -37,6 +37,7 @@
 
   &__button {
     border: none;
+    cursor: pointer;
     margin-top: calc($form-button-margin - $form-gap);
   }
 }
diff --git a/src/styles/blocks/_info.scss b/src/styles/blocks/_info.scss
@@ -10,5 +10,13 @@
 
   &__information {
     margin-top: 8px;
+    text-decoration: none;
+    display: block;
+    color: inherit;
+  }
+
+  &__information-paragraph {
+    display: grid;
+    max-width: max-content;
   }
 }
diff --git a/src/styles/blocks/_product.scss b/src/styles/blocks/_product.scss
@@ -4,8 +4,9 @@
   justify-content: center;
   max-width: 600px;
   background-color: white;
-
-  @include hover(transform, scale(1.2));
+  cursor: pointer;
+
+  @include hover(transform, scale(1.05));
 
   &__photo {
     width: 100%;