Subscribe Us

Login Form : Create an attractive Login Page using HTML and CSS

Anil Singhania November 24, 2020

Hello friends how are you, today in this blog i will teach you how you can create an attractive Login page using HTML and CSS. This tutorial will help you definitely if you wan to create or design a website. Now i am going to describe everything step by step so just go through this post to get complete knowledge.

Follow step by step  

1.First create a folder HtmlPage in your system in any drive .
2.Create a folder image inside folder HtmlPage.
3.I am using a single image in this page so store a single jpg or jpeg images inside image folder[user image size 1100x350 for better view].
4.Name of images should be login.jpg, i am telling you by keeping in my mind that you have no pre knowledge of HTML and CSS but if you know how to apply images in HTML then forget this step.
5.Now open Notepad and paste the below code in it.

<html>
<head>
<style>

a{
color:white;
background-color:#FF3399;
padding:5px 15px 5px 15px;
text-decoration:none;
border-radius:20px;
display: block;
width: 120px;
}
.login-dark
{
background-color:rgb(30,40,51);
text-align:center;
padding:20px;
width:300px;
height:300px;
border-radius:5px;
}

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

</style>
</head>
<body style="background-color:rgb(6,23,58)">
<table border="0" width="100%" height="10%" bgcolor="#000000" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;border-bottom:1px dotted white;">
<tr>

<td style="color:#ffffff;font-size:50px;text-shadow:2px 2px 2px red">Project Title</td>
<td width="10%" align="center"> <a href="index.html">Home</a></td>
<td width="10%" align="center"> <a href="about.html">About</a></td>
<td width="10%" align="center"> <a href="reg.html">Registration</a></td>
<td width="10%" align="center"> <a href="login.html">Login</a></td>
</tr>
</table><br><br><br><br><br><br><br>

<table border="0" style="box-shadow:1px 1px 10px white" width="70%" height="70%" align="center" background="image/login.jpg">
<tr style="background-color:black;color:white;height:25px">
<td colspan="2"><marquee behavior="alternate">
Welcome of You in my Project.
</marquee></td>
</tr>
<tr>
<td align="center"  width="50%">
</td>
<td style="background-position:center center" align="center">
 <div class="login-dark">
        <form method="post">
            <h2 class="sr-only" style="color:#0066FF">Login Form</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group" style="padding:10px">
			<input class="form-control" style="padding:5px" type="email" name="email" placeholder="Email">
			</div>
            <div class="form-group" style="padding:10px">
			<input class="form-control" style="padding:5px" type="password" name="password" placeholder="Password"></div>
            <div class="form-group" style="padding:10px">
			<button class="btn btn-primary btn-block" style="background-color:rgb(33,74,128);width:169px;border:none;color:white;padding:5px 10px 5px 10px;border-radius:2px;" type="submit">Log In</button></div>
			</form>
    </div>
</td>
</tr>
</table>
</body>
</html>


Now save the Notepad file with name login.html, here html is the extension of HTML file never forget to add .html after file name.
After doing these your directory will look like below



After that right click on login file go to open with Google Chrome [or you can choose any browser]

After click on Google Chrome or any browser you will get output of your HTML page that will look like below




I hope now you can create and run HTML file. If you have any doubt regarding this post  or you want something more in this post then let me know by comment below i will work on it definitely.

If you like my post then share it with your friends. Thanks😊


Tags

Post a Comment

1 Comments