Add files via upload

App.js

@@ -1,10 +1,10 @@
-import Login from "./Login";
-
-function App(){
-    return(
-        <Login/>
-    )
-}
-export default App;
-
-
+import Login from "./Login";
+
+function App(){
+    return(
+        <Login/>
+    )
+}
+export default App;
+
+

Left.js

@@ -1,19 +1,23 @@
-import eye from "./images/eye.png";
-import user from "./images/user.png";
-const Left = () => {
-
-    return(
-        <div className="left">
-        <p id="titl">Login</p>
-        <h5 id="sig">Sign in to your Account</h5>
-        <div className="mail2"><img src={user} alt="hui" id="user"/><input  className="mail" type ="email" placeholder="Username"></input></div>
-        <div className="password2"><img src={eye} alt="hui" id="eye"/><input className="password" type="password" placeholder="Password"></input></div>
-        <button id="log">Login</button>
-        <a href="google.com" id="forgot">Forgot password</a>
-        <button id="crt">Create New Account</button>
-        {/* <img src={eye} alt="hui"></img> */}
-
-    </div>
-    );
-}
+// import eye from "./images/eye.png";
+import mail from "./images/mail.png";
+import user from "./images/user.png";
+import lock from "./images/lock.png";
+const Left = () => {
+
+    return(
+        <div className="left">
+        <p id="titl">Sign Up</p>
+        <h5 id="sig">Create New Account Here</h5>
+        <div className="mail2"><img src={user} alt="hui" id="user"/><input  className="mail" type ="text" placeholder="Name"></input></div>
+        <div className="password2"><img src={mail} alt="hui" id="eye"/><input className="password" type="email" placeholder="College Mail"></input></div>
+        <div className="password2"><img src={lock} alt="hui" id="eye"/><input className="password" type="text" placeholder="Password"></input></div>
+        <div className="password2"><img src={lock} alt="hui" id="eye"/><input className="password" type="text" placeholder="Confirm Password"></input></div>
+        <button id="log">Login</button>
+        <p id="forgot">Already have an Account</p>
+        <button id="crt">Create New Account</button>
+        {/* <img src={eye} alt="hui"></img> */}
+
+    </div>
+    );
+}
 export default Left;

Login.js

@@ -1,22 +1,22 @@
-import Left from "./Left";
-import Right from "./Right";
-
-
-const Login = () => {
-
-    return(
-        <div className = "main">
-             <div className="left">
-             <Left/>
-             </div>
-
-             <div className="right">
-             <Right/>
-             </div>
-
-
-        </div>
-
-    );
-}
+import Left from "./Left";
+// import Right from "./Right";
+
+
+const Login = () => {
+      
+    return(
+        <div className = "main">
+             <div className="left">
+             <Left/>
+             </div>
+            
+             {/* <div className="right">
+             <Right/>
+             </div> */}
+            
+           
+        </div>
+
+    );
+}
 export default Login;

Right.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import SignUPButton from './SignUPButton';
+const Boxstyle={
+    padding: "70px 40px",
+    position: "absolute",
+    left: "800px",
+    top: "80px",
+    width: "550px",
+    height: "650px",
+
+    background: "#90E0DB",
+    borderRadius: "106px",
+
+}
+const TxtStyle={
+
+    // position: "absolute",
+    // width: "462px",
+    // height: "402px",
+    // left: "821px",
+    // top: "211px",
+
+    fontFamily: "Sahitya",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: "30px",
+    // lineHeight: "78px",
+
+    color: "#ffffff"
+}
+
+
+
+function Right() {
+    return(
+        <>
+        <div className="rightBox" style={Boxstyle}> 
+        <div className="textHeading" style={{fontSize:"25px",color: "#ffffff",fontFamily: "Sahitya",fontStyle: "normal",fontWeight: "bold"}}><h1>HOLA!! FRIENDS,</h1></div>
+        <div className="introTxt"><p>Join the exclusive community of  
+ABV -IIITM and share your opinion ,you can also answer to some questions and peek into the weired journey of an engineer.</p></div>
+{<SignUPButton/>}
+</div>
+        </>
+
+    );
+}
+
+export default Right;

SignUPButton.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const btnStyling={
+
+    color: "white",
+    height: "75px",
+    width: "333px",
+    borderRadius: "25px",
+    backgroundColor: "#90E0DB",
+    border: "5px solid #FFFFFF",
+    position: "absolute",
+    left: "100px",
+    top: "400px",
+
+    // text inside button
+
+    // width: "230px",
+    // height: "32px",
+    // left: "975px",
+    // top: "568px",
+
+    fontFamily: "Sahitya",
+    fontStyle: "normal",
+    fontWeight: "bold",
+    fontSize: "30px",
+    // lineHeight: "47px",
+
+
+
+
+
+
+}
+
+
+
+function SignUPButton() {
+    return (
+        <button id="sign" ><b>SIGNUP</b></button>
+
+
+    );
+  }
+ export default SignUPButton;

index.css

@@ -135,41 +135,22 @@ flex-direction: row;
   margin-top: 20px;
 }
 #sig{
+  margin-top: 10px;
   margin-left: 30px;
 }
 .main{
   display: flex;
   flex-direction: row;
+  justify-content: end;
 
 }
-#sign{
-
-
-    color:"white";
-    height: "75px";
-    width:"333px";
-    border-Radius: "25px";
-    background-Color: "#90E0DB";
-    border: "5px solid #FFFFFF";
-    position: "absolute";
-    left: "100px";
-    top: "400px";
-    font-Family: "Sahitya";
-    font-Style: "normal";
-    font-Weight: "bold";
-    font-Size: "30px";
-
-  }
-  .introTxt{
-    font-Family: "Sahitya";
-    font-Style: "normal";
-    font-Weight: "bold";
-    font-Size: "30px";
-
-    color: "#ffffff"
+.left{
+  margin-right: 180px;
 }
 
 
+
+