fix form

mate-academy · Sep 29, 2023 · c4e17ac · c4e17ac
1 parent ca4785f
commit c4e17ac
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/src/images/socials/facebook-hover.png b/src/images/socials/facebook-hover.png
diff --git a/src/images/socials/instagram-hover.png b/src/images/socials/instagram-hover.png
diff --git a/src/index.html b/src/index.html
@@ -246,6 +246,7 @@ <h3 class="form__title">Send us a message</h3>
               <input
                 type="email"
                 placeholder="Your email"
+                pattern=".+@globex\.com" size="30"
                 class="form__field"
                 required
               >
@@ -261,12 +262,12 @@ <h3 class="form__title">Send us a message</h3>
             </label>
 
             <label for="for">
-              <textarea
+              <input
                   type="text"
-                  class="form__field"
+                  class="form__field form__field--message"
+                  placeholder="Your message"
                   required
-                >Your massage
-              </textarea>
+                >
             </label>
           </form>
 

diff --git a/src/styles/footer.scss b/src/styles/footer.scss
@@ -65,6 +65,7 @@
 
     &:hover {
       transform: scale(150%);
+      background-image: url(../images/socials/facebook-hover.png);
       transition: 0.3s;
     }
   }
@@ -88,6 +89,7 @@
 
     &:hover {
       transform: scale(150%);
+      background-image: url(../images/socials/instagram-hover.png);
       transition: 0.3s;
     }
   }

diff --git a/src/styles/form.scss b/src/styles/form.scss
@@ -40,6 +40,16 @@
 
     border-bottom: 1px solid $background-c-white;
     margin-bottom: 40px;
+
+    &:autofill {
+      outline: 5px solid $c-default-blue;
+      background-color: transparent;
+      color: $background-c-white;
+    }
+  }
+
+  &__field--message {
+    text-overflow: ellipsis;
   }
 
   &__field:hover {