Techgokul/login form.html

## login form.html
<html>
    <head>
        <title>Login form</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <body>
            <div class="loginbox">
            <img src="avatar.jpg">
                <h1>Login Here</h1>
                <form>
                <p>Username</p>
                    <input type="text" name="" placeholder="Enter username">
                <p>Password</p>
                    <input type="password" name="" placeholder="Enter the password">
                    <input type="submit" name="" value="Login">
                <a href="#">Forget Your password?</a><br>
                <a href="#">Don't Have account?</a><br>
                </form>
            </div>
        </body>
    </head>
</html>

## style.css
body{
    margin: 0 auto;
    background: url("pic1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}

.loginbox{
    width: 500px;
    height: 400px;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 150px;
}

.loginbox img{
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-right: 0px;
    border-radius: 50%;
}

h1
{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
}

.loginbox p{
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.loginbox input{
    width: 100%;
    margin-bottom: 20px;
}

.loginbox input[type="text"],input[type="password"]
{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 50px;
    color: #fff;
    font-size: 16px;
}

.loginbox input[type="submit"]
{
    border: none;
    outline: none;
    height: 40px;
    background: #01a6fd;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}

.loginbox input[type="submit"]:hover
{
    cursor: pointer;
    background: #fff107;
    color: #000;
}

.loginbox a{
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: darkgray;
}

.loginbox a:hover
{
    color: darkorchid;
}
	<html>
	<head>
	<title>Login form</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<body>
	<div class="loginbox">
	<img src="avatar.jpg">
	<h1>Login Here</h1>
	<form>
	<p>Username</p>
	<input type="text" name="" placeholder="Enter username">
	<p>Password</p>
	<input type="password" name="" placeholder="Enter the password">
	<input type="submit" name="" value="Login">
	<a href="#">Forget Your password?</a><br>
	<a href="#">Don't Have account?</a><br>
	</form>
	</div>
	</body>
	</head>
	</html>
	body{
	margin: 0 auto;
	background: url("pic1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	font-family: sans-serif;
	}

	.loginbox{
	width: 500px;
	height: 400px;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
	border-radius: 4px;
	margin: 0 auto;
	margin-top: 150px;
	}

	.loginbox img{
	width: 120px;
	height: 120px;
	margin-top: -60px;
	margin-right: 0px;
	border-radius: 50%;
	}

	h1
	{
	margin: 0;
	padding: 0 0 20px;
	text-align: center;
	font-size: 22px;
	}

	.loginbox p{
	margin: 0;
	padding: 0;
	font-weight: bold;
	}

	.loginbox input{
	width: 100%;
	margin-bottom: 20px;
	}

	.loginbox input[type="text"],input[type="password"]
	{
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline: none;
	height: 50px;
	color: #fff;
	font-size: 16px;
	}

	.loginbox input[type="submit"]
	{
	border: none;
	outline: none;
	height: 40px;
	background: #01a6fd;
	color: #fff;
	font-size: 18px;
	border-radius: 20px;
	}

	.loginbox input[type="submit"]:hover
	{
	cursor: pointer;
	background: #fff107;
	color: #000;
	}

	.loginbox a{
	text-decoration: none;
	font-size: 12px;
	line-height: 20px;
	color: darkgray;
	}

	.loginbox a:hover
	{
	color: darkorchid;
	}