HTML AND CSS CODE:-

                 <html>
<head>
<title></title>
</head>
<body>
<style>
body
{
background:#9933FF;
}

#logo img
{

height:120px;
width:130px;
margin-left:200px;
}

#login
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#login h2
{
text-align:center;
color:white;
font-family:sans-serif;
font-size:35px;
}

#login input
{
display:block;
width:500px;
height:70px;
padding:10px;
font-size14px;
font-family:sans-serif;
color:white;
background:rgba(0,0,0,0.3);
outline:none;
border:1px solid rgba(0,0,0,0.3);
border-radius:5px;
box-shadow:inset 0px -5px 45px rgba(100,100,100,0.2),0px rgba(255,255,255,0.2);
margin-bottom:10px;
}
#login #login-btn
{
background#55acee;
font-size:18px;
text-align:center;
vertical-align:middle;
line-height:20px;
}







#new_login
{
text-align:center;
text-decoration:none;
}

</style>





<div id="login">
<div id="logo"><img src="HP_logo_630x630.png"></div>
<from>
<h2>Login From</h2>
<input type="text" id="username" placeholder="Enter Username"/>
<input type="password" id="password" placeholder="Enter password"/>
<input type="button" id="login-btn" value="Sing In"/>
</from>
<div id="new_login"><a href="file:///E|/webpage/importent coding store/LOGIN PAGE/registation.html">CREATE YOUR ACCOUNT</a></div>

</div>

</body>
</html>



OUT PUT:-