Updated Contact Page

Signed-off-by: Hemashree M S <hemashree21.msh@gmail.com>

Author: Hemashree21

src/pages/contact/index.tsx

@@ -6,7 +6,7 @@ import styles from './styles.module.css';
  * Contact Us Page
  */
 
-const Index = () => {
+const Contact = () => {
   return (
     <Layout>
       <h1 style={{marginLeft: '2rem', marginTop: '1rem'}}>Contact Us</h1>
@@ -26,4 +26,4 @@ const Index = () => {
   )
 }
 
-export default Index;
+export default Contact;

src/pages/contact/styles.module.css

@@ -1,88 +1,89 @@
 .myform {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    width: 50%;
-    margin-left: 2rem;
-    font-size: 16px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 1rem;
+  width: 90%;
+  margin-left: 2rem;
+  font-size: 16px;
+}
 
-    .myinput {
-      width: 100%;
-      height: 35px;
-      padding: 7px;
-      outline: none;
-      border-radius: 5px;
-      border: 1px solid rgb(220, 220, 220);
-      margin-bottom: 0.5rem;
+.myform .myinput {
+  width: 100%;
+  height: 35px;
+  padding: 7px;
+  outline: none;
+  border-radius: 5px;
+  border: 1px solid rgb(220, 220, 220);
+  margin-bottom: 0.5rem;
+}
 
-      &:focus {
-        border: 2px solid rgba(0, 206, 158, 1);
-      }
-    }
+.myform .myinput:focus {
+  border: 2px solid rgba(0, 206, 158, 1);
+}
 
-    .mytextarea {
-        max-width: 100%;
-        min-width: 100%;
-        width: 100%;
-        max-height: 100px;
-        min-height: 100px;
-        padding: 7px;
-        outline: none;
-        border-radius: 5px;
-        border: 1px solid rgb(220, 220, 220);
-  
-        &:focus {
-          border: 2px solid rgba(0, 206, 158, 1);
-        }
-      }
+.myform .mytextarea {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+  max-height: 100px;
+  min-height: 100px;
+  padding: 7px;
+  outline: none;
+  border-radius: 5px;
+  border: 1px solid rgb(220, 220, 220);
+}
 
-    .mylabel {
-        margin-top: 1rem;
-    }
+.myform .mytextarea:focus {
+  border: 2px solid rgba(0, 206, 158, 1);
+}
 
-    .inputsubmit {
-      margin-top: 2rem;
-      padding: 0.2rem;
-      width: 10rem;
-      height: 3rem;
-      font-size: larger;
-      border-radius: 10px;
-      cursor: pointer;
-      background: rgb(249, 105, 14);
-      color: white;
-      border: none;
-      margin-bottom: 2rem;
+.myform .mylabel {
+  margin-top: 1rem;
+}
 
-    &:hover {
-        background-color: rgb(229, 96, 14);
-        transition: transform 0.3s ease-in-out;
-        transform: scale(1.07);;
-    }
-  }
+.myform .inputsubmit {
+  margin-top: 2rem;
+  padding: 0.2rem;
+  width: 10rem;
+  height: 3rem;
+  font-size: larger;
+  border-radius: 10px;
+  cursor: pointer;
+  background: rgb(249, 105, 14);
+  color: white;
+  border: none;
+  margin-bottom: 2rem;
+}
+
+.myform .inputsubmit:hover {
+  background-color: rgb(229, 96, 14);
+  transition: transform 0.3s ease-in-out;
+  transform: scale(1.07);
 }
 
 .division {
-    display: flex;
-    gap: 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
 }
 
 .image {
-    display: block;
-    margin: auto;
+  display: block;
+  margin: auto;
 }
 
 @media (max-width: 760px) {
-    .division {
-      flex-direction: column;
+  .division {
+      grid-template-columns: 1fr;
       width: 90%;
       height: auto;
-    }
+  }
 
-    .myform, .myinput, .mytextarea {
-        width: 90%;
-    }
+  .myform, .myform .myinput, .myform .mytextarea {
+      width: 90%;
+  }
 
-    .image {
-        display: none;
-    }
-  }
+  .image {
+      display: none;
+  }
+}