create two files named:

  • index.html
  • style.css

Html code:(index.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile</title>
<script src="https://kit.fontawesome.com/f8d1b1ce75.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<div class="box">
    <i class="fas fa-user"></i>
<p class="text">Welcome User</p>
<div class="label">
<form>
<label>Username</label><br>
<input type="text" name="Username" /><br><br>
<label>Password</label><br>
<input type="password" name="Password" />
<div class="forgot">
<p>Forgot your Password?</p>
</div>
</div>
<div class="login">
<input type="submit" name="Login" value="Login">
</form>
</div>
<a href="signup form(3).html" target="_self" id="account">Create an account</a>
</div>
</center>
</body>
</html>

Css code:(style.css)

*{

    box-sizing: border-box;
}
body{
margin:0;
padding:0;
height:100vh;
width:100%;
font-family:’Times New Roman’;
background-color:pink;
}
.box i{
font-size: 50px;
margin:40px 0;
border:2px solid black;
padding: 25px;
border-radius: 50%;
background-color: blue;
color: red;
}
.text{
text-align: center;
font-size: 25px;
margin-top:2px;
}
.box{
margin:50px auto;
height:600px;
width:380px;
background: white;
font-family: ‘Times New Roman’;
border-radius:15px;
box-shadow: 0px 4px 18px 8px rgba(117, 116, 116, 0.664);
}
.label{
margin-left:20px;
margin-top: -15px;
font-size: 20px;
margin-bottom: -10px;
}
.label input{
width:330px;
height:45px;
margin-top:8px;
border:5px solid black;
color: black;
border-radius:20px;
font-size:15px;
padding-left:10px;
outline:none;
}
.label input:hover{
cursor: pointer;
padding-left: 10px;
}
.forgot{
font-size:20px;
margin-left:0;
margin-top: -8px;
color:rgb(50, 195, 195);
}
.forgot p:hover{
cursor: pointer;
color: grey;
}
.login input{
width: 200px;
height:55px;
border-radius: 40px;
margin-left:0;
font-size: 18px;
font-weight:600;
border: 2px solid black;
margin-top:6px;
}
.login input:hover{
cursor: pointer;
background: black;
color:rgb(255, 239, 214);
font-size:15px;
}
#account{
text-decoration:none;
display:block;
font-size:20px;
color:black;
margin-top:15px;
}
@media screen and (max-width:400px){
.box{
margin-top:10px;
height:600px;
width:280px;
}
.label input{
width:200px;
}
}