I am struggling to replicate a specific login page design. The design I want can be found at this link: https://i.sstatic.net/smEWd.jpg
However, my current implementation looks like this: https://i.sstatic.net/DvpEL.jpg
import React, { useState } from "react";
import Header from "./Header";
// import { Button, FormGroup, input, label } from "react-bootstrap";
import "./Login.css";
export default function Login1(props) {
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");
const [user, setUser] = useState({email : "", password : ""})
function validateForm() {
return user.email.length > 0 && user.password.length > 0;
}
function handleSubmit(event) {
event.preventDefault();
}
return (
<div className="Login">
<Header person = {user}/>
<form className="modal-content animate" onSubmit={handleSubmit}>
<div><h3 align='center'>Login</h3>
</div>
<div className="Container">
<input type="text"
autoFocus
placeholder="Username"
value={user.email}
onChange={e => setUser({...user,email : e.target.value})}
/>
{/* {console.log(user)} */}
<br/>
<input type="password" placeholder="Password"
value={user.password}
onChange={e => setUser({...user,password : e.target.value})}
/>
<br/><button disabled={!validateForm()}type="submit">
Login
</button>
</div>
<div id="footer">
<button className="submit1" disabled="true" type="submit">
Sign up
</button>
<br/><button className ="submit1" disabled="true" type="submit">
Forgot Password?
</button>
</div>
</form>
</div>
);
}@media all and (min-width: 480px) {
.Login {
padding: 120px 0;
}
.Login form {
margin: 0 auto;
max-width: 480px;
}
// Rest of CSS code removed for brevity
form {
border: 3px solid #f0f0f0;
}
}I have experimented with adjusting the width and CSS properties in the code but haven't been able to achieve the desired login page design. Can someone provide assistance with this?
The provided code snippet was written using React. The HTML code is present in login.js along with the attached CSS file.