add styles for contact form and fix Font Awesome

2 files changed, 61 insertions, 9 deletions

diff --git a/assets/css/base.css b/assets/css/base.css
index dfd934d..99473be 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -8,7 +8,7 @@ a:hover {
 
 body {
     background-color: var(--background);
-    color: var(--base);
+    color: var(--text);
     font-size: var(--base);
 }
 
@@ -43,14 +43,21 @@ header {
     z-index: 999;
 }
 
-textarea {
-    resize: none;
-}
-
-p {
-    color: var(--text);
+label {
+    display: none;
 }
 
 main {
     min-height: 100vh;
+}
+
+input {
+    color: var(--background);
+    font-size: var(--p);
+    margin-top: 1.25rem;
+    padding: 0.5rem 0.45rem;
+}
+
+input:required {
+    outline-color: var(--red);
 }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 63a32ff..4825b3c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,6 +1,7 @@
 /* HERO */
 .hero {
     align-items: center;
+    box-shadow: 0 1px 2.25px var(--green);
     color: var(--foreground);
     display: flex;
     flex-direction: column;
@@ -17,6 +18,10 @@
     text-align: center;
 }
 
+.hero > p {
+    font-size: var(--p);
+}
+
 .cta {
     background-color: var(--green);
     border: 1px solid var(--green);
@@ -27,7 +32,7 @@
     padding: 0.75rem 1.45rem;
     text-align: center;
     transition: all 0.25s;
-    width: 80%;
+    width: 15rem;
 }
 
 .cta:hover {
@@ -35,4 +40,44 @@
     color: var(--green);
 }
 
-/* CONTACT */
\ No newline at end of file
+/* CONTACT */
+.contact {
+    align-items: center;
+    box-shadow: 0 1px 2.25px var(--green);
+    display: flex;
+    flex-direction: column;
+    min-height: 90vh;
+    text-align: center;
+    justify-content: center;
+}
+
+.contact__title {
+    font-size: var(--h3);
+    margin-bottom: 1.45rem;
+}
+
+.contact__form {
+    display: grid;
+    grid-template-areas: "name" "email" "submit";
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(3, auto);
+    width: 100%;
+}
+
+.submit {
+    background-color: var(--green);
+    border: 1px solid var(--green);
+    border-radius: 15px;
+    color: var(--foreground);
+    font-size: var(--p);
+    margin-top: 3.45rem;
+    padding: 0.75rem 1.45rem;
+    transition: all 0.25s;
+    width: 15rem;
+}
+
+.submit:hover,
+.submit:active {
+    background-color: var(--background);
+    color: var(--green);
+}
\ No newline at end of file