ui updates

src/App.js

@@ -31,7 +31,7 @@ function App() {
           
           <Route path="/about" exact element={<About />} />
          
-          <Route path="/contact" exact element={<Contact />} />
+          {/* <Route path="/contact" exact element={<Contact />} /> */}
   
         </Routes>
         <Discord />

src/components/Navbar.js

@@ -19,14 +19,14 @@ function Navbar() {
             <NavLink to="/"> Home </NavLink>
             <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
-            <NavLink to="/contact"> Contact </NavLink>
+           {/* <NavLink to="/contact"> Contact </NavLink> */}
             </div>
         </div>
         <div className='rightSide'>
             <NavLink to="/"> Home </NavLink>
             <NavLink to="/socials"> Socials </NavLink>
             <NavLink to="/about"> About </NavLink>
-            <NavLink to="/contact"> Contact </NavLink>
+           {/* <NavLink to="/contact"> Contact </NavLink> */}
           <button onClick={toggleNavbar}>
             <ReorderIcon />
           </button>

src/components/SocialItem.js

@@ -2,11 +2,13 @@ import React from "react";
 
 function SocialItem({ image, name, link, hiddenLink }) {
   return (
-    <div className="socialItem">
-      <div style={{ backgroundImage: `url(${image})` }}> </div>
+     <div className="socialItem"> 
+      <div style={{ backgroundImage: `url(${image})` }}></div>
       <h1> {name} </h1>
       <p>{link}</p>
     </div>
+ 
+    
   );
 }
 

src/styles/About.css

@@ -11,10 +11,11 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+    font-family: sans-serif, Arial;
   }
   
   .aboutBottom {
+    font-family: 'Comic Sans', monospace, sans-serif, Arial;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -41,7 +42,7 @@
   }
 
   .discordInvAbout, .discordInvAbout a {
-    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+    font-family: 'Comic Sans', monospace, sans-serif, Arial;
     background-color: #121619;
     display: flex;
     justify-content: center;
@@ -55,7 +56,6 @@
   }
   
   .discordInvAbout a:hover {
-    background-color: black;
     text-decoration: none;
     font-size: 28px;
     cursor: pointer;

src/styles/Contact.css

@@ -1,10 +1,12 @@
-.contact {
+.contact 
+{
     width: 100%;
     height: 90vh;
     display: flex;
   }
   
-  .contact .leftSide {
+  .contact .leftSide 
+  {
     height: 100%;
     flex: 50%;
     background-position: center;
@@ -12,7 +14,8 @@
     background-size: cover;
   }
   
-  .contact .rightSide {
+  .contact .rightSide 
+  {
     height: 100%;
     flex: 50%;
     display: flex;
@@ -20,7 +23,8 @@
     justify-content: center;
   }
   
-  .contact .rightSide h1 {
+  .contact .rightSide h1 
+  {
     font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
       "Lucida Sans", Arial, sans-serif;
     font-weight: 10;
@@ -28,7 +32,8 @@
     margin-left: 30px;
   }
   
-  form {
+  form 
+  {
     display: flex;
     flex-direction: column;
     width: auto;
@@ -36,7 +41,8 @@
     padding: 30px;
   }
   
-  form input {
+  form input 
+  {
     height: 40px;
     width: 80%;
     border: none;
@@ -44,7 +50,8 @@
     color: black;
   }
   
-  form textarea {
+  form textarea 
+  {
     margin-top: 15px;
     height: 70px;
     width: 80%;
@@ -52,29 +59,46 @@
     border-bottom: 1px solid #121619;
     color: black;
   }
+  
   input::placeholder,
-  textarea::placeholder {
+  textarea::placeholder 
+  {
     font-weight: bold;
     color: black;
     font-family: Arial, Helvetica, sans-serif;
   }
+
   form input:focus,
-  textarea:focus {
+  textarea:focus 
+  {
     outline: none;
   }
   
-  form label {
+  form label 
+  {
     margin-top: 15px;
     color: grey;
   }
   
-  form button {
-    margin-top: 40px;
+  form button 
+  {
+    margin-top: 10px;
     width: 140px;
-    height: 40px;
+    border-radius: 20px;
+    padding: 10px;
     border: none;
     background-color: #121619;
     color: whitesmoke;
     font-size: 15px;
     cursor: pointer;
+  }
+
+  form button:hover 
+  {
+    text-decoration: none;
+    width: 160px;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 20px;
+    transition: 0.3s ease-in;
   }

src/styles/Navbar.css

@@ -61,6 +61,7 @@
   .navbar #open {
     padding-left: 0px;
   }
+
   .navbar #open img {
     display: none;
   }

src/styles/Socials.css

@@ -8,7 +8,7 @@
   }
 
   .social .socialTitle {
-    font-family: cursive;
+    font-family: sans-serif, Arial;
     font-size: 60px;
   }