Merge pull request #67 from s0ham075/master

Signup Page

Author: JeetJani-11

src/LoginM.js

@@ -1,11 +1,9 @@
 import React from 'react'
 import { Login } from './main-page/Login'
-
 export default function LoginM() {
   return (
     <div>
-
-        <Login/>
+      <Login/>
     </div>
   )
 }

src/main-page/Login.js

@@ -16,23 +16,22 @@ export const Login = () => {
         }
       return (
     <>
-    <div className="containerr">
+    <div className="container">
 
-    
     <form action="" onSubmit={submitform} className="form">
 <div>
     <label htmlFor="email">Email </label>
     <input type="text" name="email" id="email"  autoComplete='off' value={email}
     onChange={(e)=>setEmail(e.target.value)}
     />
-   
+
 </div>
 <div>
     <label htmlFor="password">password </label>
     <input type="text" name="password" id="password"  autoComplete='off' value={password}
     onChange={(e)=>setPassword(e.target.value)}
     />
-   
+
 </div>
 <button type='submit'>Login</button>
 

src/main-page/Signup.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useState } from 'react';
+import "./login.css"
+
+export const Signup = () => {
+  const [username, setUsername] = useState("");
+  const [email,setEmail]=useState("");
+  const [password,setPassword]=useState("");
+
+
+  const submitform=()=>{
+    // handle submit logic here
+  }
+
+  return (
+    <>
+    <div className="container">
+    <form action="" onSubmit={submitform} className="form">
+      <div>
+        <label htmlFor="email">Username</label>
+        <input type="text" name="username" id="username"  autoComplete='off' value={username}
+         onChange={(e)=>setUsername(e.target.value)}/>
+      </div>
+      <div>
+        <label htmlFor="email">Email </label>
+        <input type="text" name="email" id="email"  autoComplete='off' value={email}
+         onChange={(e)=>setEmail(e.target.value)}/>
+      </div>
+     <div>
+        <label htmlFor="password">password </label>
+        <input type="text" name="password" id="password"  autoComplete='off' value={password}
+           onChange={(e)=>setPassword(e.target.value)}/>
+      </div>
+     <button type='submit'>Login</button>
+    </form>
+    </div>
+    </>
+  )
+}

src/main-page/login.css

@@ -1,32 +1,31 @@
-.containerr{
+.container{
     display:flex;
     justify-content: center;
-    
 }
 
 .form{
     background-color: white;
-    height: 60vh;
+    height: fit-content;
     width:34vw;
     display:flex;
     flex-direction: column;
     align-items: center;
-    padding: 4rem;
+    padding: 1rem 4rem;
     border-radius: 1rem;
-   
+    margin-left: 15vw;
 }
 
 .form input{
     color:blue;
     margin: 2rem 2rem;
     border-radius: 1rem;
     border: 2px solid aquamarine;
-    padding: 10px;
+    padding: 5px 10px;
 }
 .form button{
     width:10vw;
     padding: 0.8rem;
-    margin: 1rem;
+    margin: 0.5rem 1rem;
     border-radius: 1rem;
     color:blue;
     border: 2px solid aquamarine;