fix hover effects

mate-academy · Sep 28, 2023 · 813c5f9 · 813c5f9
1 parent a6788fa
commit 813c5f9
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 18 deletions.
diff --git a/src/index.html b/src/index.html
@@ -4,14 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dia</title>
+    <link rel="icon" href="./images/logo/dia-logo.svg">
     <link rel="stylesheet" href="./styles/main.scss">
   </head>
   <body>
     <header class="header">
       <nav class="nav">
         <div class="nav__list">
           <div class="nav__icons">
-            <a href="/" class="nav__icon--logo"></a>
+            <a href="#" class="nav__icon--logo"></a>
 
             <a href="#menu" class="nav__icon--menu"></a>
           </div>
@@ -240,7 +241,7 @@ <h2 class="cta__title">Vision, Passion, Results</h2>
         <div class="form" id="form">
           <h3 class="form__title">Send us a message</h3>
 
-          <form action="submit" method="post">
+          <form onsubmit="this.reset(); return false;">
             <label for="for">
               <input
                 type="email"
@@ -296,7 +297,7 @@ <h2 class="footer__contacts__title">Contact us</h2>
       </div>
 
       <nav class="footer__navigation">
-        <a href="/">
+        <a href="#">
           <img src="./images/logo/dia-logo.svg" alt="dia logo" class="footer__logo">
         </a>
 

diff --git a/src/styles/form.scss b/src/styles/form.scss
@@ -33,6 +33,7 @@
     font-size: 15px;
     opacity: 0.7;
     padding-bottom: 16px;
+    resize: none;
 
     width: 100%;
     max-width: 362px;

diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -11,6 +11,10 @@
       justify-content: space-between;
       align-items: center;
     }
+
+    @include onMediumDisplay {
+      padding-left: 227px;
+    }
   }
 
   &__left {

diff --git a/src/styles/nav.scss b/src/styles/nav.scss
@@ -8,6 +8,10 @@
   //   // display: flex;
   //   // justify-content: center;
   // }
+  @include onMediumDisplay {
+    padding-left: 227px;
+
+  }
 
   &__icons {
     display: flex;

diff --git a/src/styles/services.scss b/src/styles/services.scss
@@ -1,7 +1,6 @@
 .services {
   @include contentPaddingInline;
 
-
   &__container {
     box-sizing: border-box;
 
@@ -80,14 +79,9 @@
     padding: 32px 0 32px 32px;
     box-shadow: 0 18px 9px 0 rgba(37, 41, 49, 0.03);
 
-    &:hover {
-      transform: scale(110%);
-      cursor: pointer;
-    }
-
     @for $number from 1 through 4 {
       &:nth-of-type(#{$number})::before {
-        content: "#{$number}";
+        content: "00#{$number}";
         @include forSiteHeaders;
         color: $c-default-blue;
         font-size: 13px;
@@ -105,6 +99,12 @@
       &:nth-child(2n) {
         transform: translateY(-50%);
       }
+
+      &:hover {
+        border-radius: 50px;
+        background-color: aliceblue;
+        cursor: pointer;
+      }
     }
   }
 
@@ -142,5 +142,10 @@
     font-size: 15px;
     padding-left: 56px;
     line-height: 40px;
+
+    &:hover {
+      color: $c-default-blue;
+      cursor: pointer;
+     }
   }
 }
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
@@ -16,8 +16,7 @@
 
   @include onDesctop {
     height: 680px;
-    width: 100%;
-    max-width: 502px;
+    width: 502px;
     margin-top: 38px;
 
     border-radius: 60px 0 60px 0;
@@ -28,6 +27,13 @@
     padding-bottom: 48px;
   }
 
+  @include onMediumDisplay {
+    width: 687px;
+    height: 100vh;
+    background-position: center right;
+    background-repeat: no-repeat;
+  }
+
   &__arrows {
     display: flex;
     @include contentPaddingInline;

diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -5,12 +5,6 @@
   }
 }
 
-@mixin onMobile {
-  @media (min-width: 320px) {
-    @content;
-  }
-}
-
 @mixin onTablet {
   @media (min-width: 640px) {
     @content;
@@ -29,6 +23,7 @@
   }
 }
 
+
 @mixin contentPaddingInline() {
   padding-inline: 20px;