Login Form

Introduction:

In this web page, you will learn how to design a sign-in page using HTML and CSS. Typically, login pages use within the websites and inside web applications Login form or page is used in websites and in web applications to access the registered page of the website or web application.

On this page, you will learn to make a responsive login page in HTML with CSS code. Interesting right? This is very cool; I hope you will like it. If you want a more interesting program learning video then subscribe to my YouTube channel Codes Gallery.

Program Info:

Project Name	Login form (how to design login page using HTML and CSS)
Details	This project is very easy and simple for beginners. This login page has very simple HTML and CSS code. This login page includes some awesome effects on text fields and button. This project is pretty much helpful for all beginner people who are interested to learn HTML and CSS.
Type	HTML and CSS
Published by	Codes Gallery
Developer	Chetan Bedakihale

Watch The Full Tutorial:

Steps to run this login form code-
First, open any HTML and CSS code editor on your android mobile or on the computer.
Now, create an HTML file named Sign In form with the extension(.html) like this Singinform.html
Now, create a CSS file named Sign In style with the extension(.CSS) like this Signinstyle.css
Now, copy and paste the following HTML code into the Signinform.html file.
After that copy and paste the following CSS code into the Signinstyle.css file.

<!DOCTYPE html>
<html lang="en">
<head>
		<title>Sign In Form</title>
		<meta name="viewport" content="width=device-width" initial-scale="1">
		<link rel="stylesheet" href="Signinstyle.css">
</head>
<body>
		<p class="signin">Sign In</p><br><br>
		<center>
			<div class="container1">
				<input class="box" type="text" placeholder="Username"><br>
           			<input class="box" type="password" placeholder="Password"><br>
				<button class="loginbtn" href="#">Login</button>
			</div>
			<div class="container2">
				<input class="check" type="checkbox">
				<label for="check" class="p1">Remember Me</label>
				<a href="#" class="p2"><p>Forgot Password?</p></a>
				<p>Not created account? | <a href="#" class="p3">Create Account</a></p><hr class="bar">
				<p class="p4">OR sign in with</p>
			</div>
		        <div class="container3">
				<img class="pic1" src="facebook.png">
				<label class="t1" for="pic1">Facebook</label>
			</div>
			<div class="container4">
				<img class="pic2" src="search.png">
				<label class="t2" for="pic2">Google</label>
			</div>
		</center>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Urbanist:wght@300&display=swap');

*{
		margin:0;
		padding:0;
		box-sizing:border-box;
}

body{
		background-image:url("bg.jpg");
		background-size:cover;
		background-repeat:no-repeat;
}

.signin{
		position:absolute;
		top:10%;
		left:43.5%;
		color:#3a3c4b;
		font-weight:10px;
		font-size:40px;
		font-family: 'Lobster', cursive;
}

center{
		font-family: 'Urbanist', sans-serif;
}

.container1{
		box-sizing:border-box;
		position:relative;
		top:80px;
		width:240px;
		height:160px;
		border:1px dotted #1f212348;
		border-radius:10px;
		padding:10px;
		font-size:13px;
		transition-property:background;
		transition-duration:0.5s;
		transition-timing-function:ease-in-out;
}

.container1:hover{
		background:#383a3e27;
		border:none;
		border-radius:10px;
		box-shadow:0 7px 7px 0 #1f212348, 0 10px 10px 0 #1f212348;
}

.box{
		outline:none;
		border:1px solid #383a3e;
		border-radius:10px;
		margin:10px 5px;
		padding:6px;
}
.box:hover{
			border:1.2px solid #0075ff;
			box-shadow:0 7px 7px 0 #1f212348, 0 10px 10px 0 #1f212348;
}

.box:focus{
		bordertop:none;
		border-left:none;
		border-bottom:3px solid #0075ff;
		border-right:none;
		border-radius:5px;
		transition-duration:0.2s;
		transition-timing-function:ease-out;
}

.loginbtn{
		width:100px;
		height:30px;
		background:white;
		border:1px solid #383a3e;
		border-radius:10px;
		outline:none;
		margin:10px 5px;
				
}

.loginbtn:hover{
		background:#0075ff;
		border:1.2px solid #0075ff;
		color:white;
		font-weight:bold;
		box-shadow:0 5px 5px 0 #1f212348, 0 7px 7px 0 #1f212348;
}

.container2{
		position:relative;
		top:80px;
		width:250px;
		height:20px;
		padding:5px 5px;
		font-size:10px;
}

.check{
		position:relative;
		right:60px;
}

.p1{
		position:relative;
		 bottom:4.5px;
		right:58px;
}

.p2{
		position:relative;
		bottom:15px;
		left:58px;
		text-decoration:none;
		 color:black;
}

.p2:hover{
		color:#0075ff;
}

.p3{
		font-weight:bold;
		text-decoration:none;
		color:black;
}

.p3:hover{
		color:#0075ff;
}

.bar{
		position:relative;
		top:3px;
		width:240px;
}

.p4{
		position:relative;
		top:7px;
}

.container3{
		position:relative;
		top:130px;
		right:60px;
		width:95px;
		height:23px;
		background:#0075ff;
		border-radius:5px;
}

.t1{
		color:white;
		font-size:11px;
		position:relative;
		bottom:7.5px;
}

.pic1{
		position:relative;
		right:7px;
		width:23px;
}

.container3:hover{
		color:white;
		font-weight:bold;
		box-shadow:0 5px 5px 0 #1f212348, 0 7px 7px 0 #1f212348;
}

.container4{
		position:relative;
		top:106.2px;
		right:-63px;
		width:95px;
		height:23px;
		background:white;
		border-radius:5px;
}

.t2{
		color:black;
		font-size:11px;
		position:relative;
		bottom:3px;
}

.pic2{
		position:relative;
		right:7px;
		top:2.5px;
		width:18px;
}

.container4:hover{
		color:white;
		font-weight:bold;
		box-shadow:0 5px 5px 0 #1f212348, 0 7px 7px 0 #1f212348;
}

Login Form

Introduction:

Program Info:

Watch The Full Tutorial:

Post a Comment

Post a Comment

Contact Form

How to design login page using html and css | login form

Login Form

Introduction:

Program Info:

Watch The Full Tutorial:

Post a Comment

Post a Comment

Contact Form