add labels for contact form

3 files changed, 27 insertions, 13 deletions

diff --git a/assets/css/base.css b/assets/css/base.css
index 6c9c47e..a4a9ac0 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -61,7 +61,6 @@ input {
     border: none;
     color: var(--background);
     font-size: var(--text);
-    margin-top: 1.25rem;
     padding: 1.15rem 1.25rem;
 }
 
@@ -69,11 +68,6 @@ input:required {
     outline-color: var(--red);
 }
 
-label {
-    display: none;
-    visibility: hidden;
-}
-
 mark {
     background-color: var(--yellow);
 }
diff --git a/assets/css/media-queries.css b/assets/css/media-queries.css
index b5ce644..e6d37eb 100644
--- a/assets/css/media-queries.css
+++ b/assets/css/media-queries.css
@@ -24,11 +24,6 @@
         padding: 1.45rem 5%;
     }
 
-    /* CONTACT */
-    .contact__form__field > input {
-        max-width: 25rem;
-    }
-
     /* FOOTER */
     .contact-info__info {
         flex-direction: row;
diff --git a/assets/css/style.css b/assets/css/style.css
index 383bec8..004dfd7 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -117,7 +117,6 @@
     display: flex;
     flex-direction: column;
     min-height: 90vh;
-    text-align: center;
     justify-content: center;
 }
 
@@ -130,11 +129,37 @@
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: repeat(3, auto);
+    justify-items: center;
     width: 100%;
 }
 
+.contact__form__field {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, auto);
+    grid-template-areas: "label" "input";
+    margin: 0.75rem 0;
+    justify-content: center;
+    width: 21rem;
+}
+
+.contact__form__field > label {
+    grid-area: label;
+}
+
 .contact__form__field > input {
-    width: 85%;
+    grid-area: input;
+}
+
+input:focus~label,
+input:hover~label {
+    color: var(--pink);
+}
+
+.contact__form__field--submit {
+    align-items: center;
+    display: flex;
+    justify-content: center;
 }
 
 /* FOOTER */