Hello wizards, Welcome to Tips and Tricks Series. Today in this blog you’ll learn simple trick to create Simple Login Form using HTML & CSS only.
In the above video, you’ve seen the preview of the "Simple Login Form" project and I hope now you are able to create this type of project. If not, I have provided all the HTML & CSS source code below.
SOURCE CODE
To create the Simple Login Form. First, you need to create one file for HTML code and CSS code is internally added in HTML file. After creating the file just paste the following codes in your file. Remember, you’ve to create a file with .html extension.
You can also download source code file from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<!-- Tips & Tricks ( @developer_pani) -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 100px 150px;
}
.login-form {
width: 250px;
padding: 10px;
border: 2px solid black;
border-radius: 5px;
}
input {
width: 100%;
padding: 0 10px;
height: 40px;
margin: 10px 0;
border: 2px solid black;
border-radius: 5px;
}
button {
width: 100%;
height: 40px;
color: white;
background-color: black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-form">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password">
<button>Login</button>
</div>
</body>
</html>
Generating Download Link...