Login and SignUp finalized

ao3 webpages/components/Login.jsx

@@ -237,7 +237,7 @@ export default function Login() {
             </form>
 
             <p style={{ textAlign: 'center', marginTop: '16px', fontSize: '14px', color: '#4b5563' }}>
-              Don't have an account? <a href="#" style={{ color: '#1e3a8a', textDecoration: 'none' }}>Signup</a>
+              Don't have an account? <a href="/signup" style={{ color: '#1e3a8a', textDecoration: 'none' }}>Signup</a>
             </p>
           </div>
         </div>

ao3 webpages/components/SignUp.jsx

@@ -51,6 +51,7 @@ export default function SignUp() {
   };
 
   return (
+    <div className="parent">
     <div className="signup-container">
       <div className="signup-image">
         <img src="../images/signup.png" alt="Signup background" />
@@ -115,5 +116,6 @@ export default function SignUp() {
         </div>
       </div>
     </div>
+    </div>
   );
 }

ao3 webpages/css/SignUp.css

@@ -1,32 +1,53 @@
+.parent{
+  overflow: hidden;
+}
 .signup-container {
   display: flex;
   min-height: 100vh;
-  background-color: #E5E5E5;
+  background-color: #E1DFDF;
   font-family: Arial, sans-serif;
+  overflow: hidden;
 }
 
 .signup-image {
   flex: 0 0 55%;
   background-color: #000;
+  overflow: hidden;
 }
 
 .signup-image img {
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
+  max-height: 100vh;
   object-fit: cover;
+  overflow: hidden;
 }
 
 .signup-form-wrapper {
-  flex: 0 0 45%;
+  /* flex: 0 0 45%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2rem;
+  position: relative; */
   position: relative;
+  top: 0;
+  bottom: 0;
+  left: -5%;
+  width: 110%;
+  background: #E1DFDF;
+
+/* box-shadow: 0px 0px 40px 16px rgba(255, 255, 255, 0.25); */
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
 .signup-form {
-  background-color: white;
+  /* background-color: white;
   padding: 2rem;
   border-radius: 0.5rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -36,7 +57,16 @@
   height: 60vh;
   min-height: 500px;
   position: relative;
-  z-index: 10;
+  z-index: 10; */
+  background-color: white;
+  padding: 40px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 30vw;
+  height: 75vh;
+  min-width: 350px;
+  min-height: 500px;
+
 }
 
 .signup-form h2 {
@@ -152,4 +182,9 @@ border: 2px solid #D1D0D0;
   .signup-form {
     max-width: 100%;
   }
+}
+@media (min-width: 1400px) {
+  .signup-form{
+    margin-left: 5vw;
+  }
 }