.jpeg)
<!DOCTYPE html>
<html lang="en">
<head>
<title>3d log in form</title>
</head>
<style>
body{
margin: 0;
padding: 0;
display:flex;
justify-content:center;
align-items: center;
min-height:100vh;
background:#079A77;
}
.avatar{
width:100px;
height:100px;
border-radius:50%;
position:absolute;
top:-50px;
left:calc(50% - 50px);
}
form{
margin-left: 8px;
padding-top: 20px;
background: #0084FF;
height: 300px;
width: 250px;
border-radius: 15px;
position:absolute;
top:50%;
left:50%; transform:translate(-50%,-50%)
}
b{
color:#fff;
font-style: bolder;
}
input[type=text]{
margin-bottom: 10px;
border: solid 1px #999;
box-sizing: border-box;
padding:12px 8px;
width:200px;
border-radius: 20px;
position:relative;
}
input[type=password]{
margin-bottom: 10px;
border: solid 1px #999;
box-sizing: border-box;
padding:12px 8px;
width:200px;
border-radius: 20px;
}
input[type=submit]{
background-color: #4267b2;
border:1px solid #365899;
color: white;
font-size: 14px;
height: 44px;
line-height: 44px;
padding: 0 19px;
width:200px;
border-radius: 20px;
}
</style>
<body>
<form>
<img src="img.jpg" class="avatar">
<center>
<br>
<br>
<b>Get Started</b>
<br>
<br>
<input type="text"required name="name" placeholder="username"><br>
<input type="password" name="password" required name="password"placeholder="password"><br>
<input type="submit" name="login" value="Log In">
</center>
</form>
</body>
</html>
You can easily change this option on the top i colored.
Red color must read hear you add a picture.
