From affb1405915bb8bb3156d14e7d4ac85262027e8f Mon Sep 17 00:00:00 2001
From: hosead6168 <dominique11h@yahoo.com>
Date: Sun, 20 Mar 2022 13:36:30 -0500
Subject: [PATCH] fix(*): adjusted contact page and form

---
 src/Components/Footer/Footer.jsx    |   4 +
 src/Components/Form/Contact.css     |  28 ++--
 src/Components/Form/ContactForm.jsx |   6 +-
 src/Pages/Contact/Contact.css       | 196 ++++++++++++++++++++++++++++
 src/Pages/Contact/Contact.jsx       |  61 ++++++---
 5 files changed, 265 insertions(+), 30 deletions(-)
 create mode 100644 src/Pages/Contact/Contact.css
 mode change 100755 => 100644 src/Pages/Contact/Contact.jsx

diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
index 75582dc9..934ca1fe 100755
--- a/src/Components/Footer/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import "./Footer.css";
+import {StyledHr} from '../../Layout/Hr/styledHr';
 
 import SocialMediaTags from '../SocialMediaTags/SocialMediaTags';
 
@@ -8,6 +9,8 @@ const Footer = () => {
     const year = new Date().getFullYear()
 
     return (
+      <>
+        <StyledHr Primary/>
         <footer className="footer">
             <div className="container bottom_border">
                 <div className="row">
@@ -62,6 +65,7 @@ const Footer = () => {
                 <SocialMediaTags />
             </div>
         </footer>
+      </>
     )
 };
 
diff --git a/src/Components/Form/Contact.css b/src/Components/Form/Contact.css
index d0cd9871..93069c03 100755
--- a/src/Components/Form/Contact.css
+++ b/src/Components/Form/Contact.css
@@ -8,7 +8,7 @@
 .contact-container form {
   display: flex;
   flex-direction: column;
-  width: 40% !important;
+  width: 80% !important;
 }
 
 .contact-input,
@@ -16,20 +16,28 @@
   width: 100% !important;
 }
 
+.contact-input {
+  border: none;
+  border-bottom: 1px black solid;
+  margin-top: 4%;
+}
+
 .contact-input::placeholder,
-.area::placeholder {
-  font-size: 1.5rem;
+.contact-form-area::placeholder {
+  font-size: 1.8rem;
 }
 
 .contact-input,
-.area {
-  width: 60vw;
+.contact-form-area {
   height: 3rem;
   padding: 10px;
   margin-bottom: 5px;
 }
-.area {
+.contact-form-area {
   height: 8rem;
+  margin-top: 4%;
+  border: none;
+  border-bottom: 1px black solid;
 }
 
 .contact-container {
@@ -37,14 +45,12 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: #1a1e23;
-  height: 40vh;
 }
 
-.contact-container p {
-  color: white;
-  font-size: 1.5rem;
+.contact-form-container .info {
+  font-size: 1.8rem;
   opacity: 0.6;
+  width: 80%;
 }
 
 @media only screen and (max-width: 768px) {
diff --git a/src/Components/Form/ContactForm.jsx b/src/Components/Form/ContactForm.jsx
index bbf724b1..504dc067 100755
--- a/src/Components/Form/ContactForm.jsx
+++ b/src/Components/Form/ContactForm.jsx
@@ -25,12 +25,12 @@ const ContactForm = () => {
   }
 
   return (<>
-        <div className='contact-container'>
-            <p>Have a question? I am available for hire and open to any ideas of cooperation.</p>
+        <div className='contact-form-container'>
+            <p className='info'>Have a question? I am available for hire and open to any ideas of cooperation.</p>
             <form ref={form} onSubmit={handleNotification} action="https://getform.io/f/7efda21f-ca67-48f6-8a1e-723776d4ae3b" method='POST'>
                 <input className='contact-input' type="text" name="name" placeholder="Name" />
                 <input className='contact-input' type="email" name="email" placeholder="Enter Email" />
-                <textarea className='area' name="message" placeholder='Your Message' />
+                <textarea className='contact-form-area' name="message" placeholder='Your Message' />
                 <StyledFormSubmit  onClick={handleNotification} type="submit" value="Submit"/>
             </form>
         </div>
diff --git a/src/Pages/Contact/Contact.css b/src/Pages/Contact/Contact.css
new file mode 100644
index 00000000..c44260b8
--- /dev/null
+++ b/src/Pages/Contact/Contact.css
@@ -0,0 +1,196 @@
+@font-face {
+  font-family: "NewYork";
+  src: url("../../Assets/Fonts/newyork/newyork.woff");
+}
+@font-face {
+  font-family: "Oregon";
+  src: url("../../Assets/Fonts/Oregon_LDO/Oregon_LDO.ttf");
+}
+@font-face {
+  font-family: "Monday";
+  src: url("../../Assets/Fonts/Monday/Monday_Routines.woff2") format("woff2"),
+    url("../../Assets/Fonts/Monday/MondayRoutines.woff") format("woff"),
+    url("../../Assets/Fonts/Monday/Monday_Routines.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Photograph";
+  src: url("../../Assets/Fonts/Photograph/Photograph\ Signature.ttf");
+  src: url("../../Assets/Fonts//Photograph/Photograph\ Signature.ttf")
+      format("truetype"),
+    url("../../Assets/Fonts//Photograph/Photograph\ Signature\ 2.eot")
+      format("embedded-opentype"),
+    url("../../Assets/Fonts/Photograph/Photograph\ Signature\ 2.woff2")
+      format("woff2"),
+    url("../../Assets/Fonts/Photograph/Photograph\ Signature.woff")
+      format("woff");
+}
+.contact-wrapper {
+  width: 100%;
+  background: white;
+}
+
+.contact-container {
+  padding: 10%;
+  padding-bottom: 5%;
+  text-transform: uppercase;
+  font-weight: 900;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 0;
+}
+
+.contact-title {
+  font-size: 15rem;
+  padding-top: 2%;
+  font-family: "NewYork";
+  max-width: 100rem;
+  width: 100%;
+}
+
+.contact-descp {
+  font-family: "Oregon" !important;
+  font-size: 5rem;
+  max-width: 100rem;
+  width: 100%;
+}
+.contact-subtitle {
+  font-family: "NewYork";
+  font-size: 13rem;
+  padding-left: 140px;
+  max-width: 100rem;
+  width: 100%;
+}
+.contact-style {
+  font-family: "Photograph" !important;
+  text-transform: capitalize !important;
+  margin-top: -60px;
+  padding-left: 420px;
+  font-size: 15rem;
+  color: rgb(235, 183, 65);
+  max-width: 100rem;
+  width: 100%;
+}
+.contact-items {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 5%;
+  max-width: 100rem;
+  font-family: "Oregon";
+  width: -webkit-fill-available;
+}
+
+.contact-item {
+  padding-right: 5%;
+}
+
+.contact-item h4 {
+  font-weight: 700;
+  letter-spacing: 0.2rem !important;
+  font-size: 1.5rem;
+  text-align: left !important;
+  padding-bottom: 10%;
+  margin: 0%;
+}
+
+.contact-item p {
+  letter-spacing: 0.2rem !important;
+  text-transform: capitalize;
+  text-align: left !important;
+}
+
+.contact-item a {
+  text-transform: lowercase;
+  color: black;
+}
+@media only screen and (max-width: 1200px) {
+  .contact-container {
+    padding: 15%;
+  }
+  .contact-title,
+  .contact-subtitle {
+    font-size: 120px;
+    text-align: center;
+  }
+  .contact-style {
+    text-align: end;
+    padding: 0;
+    font-size: 130px;
+    margin-top: -40px;
+  }
+}
+@media only screen and (max-width: 950px) {
+  .contact-container {
+    padding-top: 20%;
+    padding-bottom: 10%;
+  }
+  .contact-title,
+  .contact-subtitle {
+    font-size: 70px;
+  }
+  .contact-style {
+    font-size: 80px;
+    margin-top: -20px;
+  }
+  .contact-item h4 {
+    font-size: 1.3rem;
+  }
+  .contact-item p {
+    font-size: 1rem;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .contact-container {
+    padding-top: 30%;
+    padding-bottom: 10%;
+  }
+  .contact-descp {
+    font-size: 1.5rem;
+  }
+  .contact-title,
+  .contact-subtitle {
+    font-size: 4rem;
+    padding: 0;
+  }
+  .contact-style {
+    font-size: 4rem;
+    padding-top: 0;
+    text-align: center;
+  }
+  .contact-items {
+    padding-top: 50px;
+    flex-direction: column;
+    justify-content: flex-start;
+    max-width: 100rem;
+    width: 100%;
+  }
+  .contact-item h4 {
+    margin: 0;
+    text-align: left;
+  }
+}
+@media only screen and (max-width: 500px) {
+  .contact-container {
+    padding-top: 40%;
+    padding-bottom: 10%;
+  }
+  .contact-title {
+    padding-top: 40px;
+  }
+  .contact-title,
+  .contact-subtitle {
+    font-size: 3rem;
+  }
+  .contact-style {
+    font-size: 3.5rem;
+  }
+  .contact-item {
+    font-size: 0.7rem;
+  }
+  .contact-item h4 {
+    font-size: 1rem;
+    padding-top: 4%;
+    padding-bottom: 0%;
+  }
+}
diff --git a/src/Pages/Contact/Contact.jsx b/src/Pages/Contact/Contact.jsx
old mode 100755
new mode 100644
index d047612c..aefdb581
--- a/src/Pages/Contact/Contact.jsx
+++ b/src/Pages/Contact/Contact.jsx
@@ -1,25 +1,54 @@
 import React from 'react';
-import ContactForm from '../../Components/Form/ContactForm'
-import { StyledHr } from '../../Layout/Hr/styledHr';
-import { HeroContainer, HeroPositioning} from '../../Layout/Hero/styledHero';
-import { StyledH2 } from '../../Layout/Headers/styledH2';
-import { StyledContainer } from '../../Layout/Container/styledContainer';
+import Footer from '../../Components/Footer/Footer';
+import ContactForm from '../../Components/Form/ContactForm';
+import NavBar from '../../Components/NavBar/NavBar';
+import './Contact.css'
 
 const Contact = () => {
     return (
-      <>
-        <HeroContainer Contact>
-          <HeroPositioning/>
-        </HeroContainer>
-        <StyledHr Primary/>
-        <StyledContainer >
-          <StyledH2>Contact Me</StyledH2>
-          <ContactForm />
-        </StyledContainer >
-        <StyledHr Primary/>
+        <>
+            <NavBar />
+            <div className="contact-wrapper">
+                <div className="contact-container">
+                    <h2 className="contact-descp">Contact</h2>
+                    <h3 className="contact-title">Let's Work</h3>
+                    <h3 className="contact-subtitle">Together</h3>
+                    <h3 className="contact-style">Connect</h3>
+                    <div className="contact-items">
+                        <ContactForm/>
+                        <div className="contact-item">
+                            <h4>
+                                Address
+                            </h4>
+                            <p>
+                                Workplace
+                                <p>
+                                    Houston, TX
+                                </p>
+                            </p>
+                        </div>
+                        <div className="contact-item">
+                            <h4>
+                                Phone
+                            </h4>
+                            <p>
+                                +1 832-377-6772
+                            </p>
+                        </div>
+                        <div className="contact-item">
+                            <h4>
+                                Email
+                            </h4>
+                            <p className="contact-email">
+                                <a href="mailto:mr.dhosea@gmail.com">mr.dhosea@gmail.com</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Footer/>
         </>
     )
-
 }
 
 export default Contact;