Login page is very not unusual amongst any kind of secured applications and its extensively used on the net for authenticating the consumer before providing the secured pages of the net packages. As an instance to use Facebook you need to get authenticated via the Facebook earlier than they come up with get right of entry to to their platform. The consumer authentication is accomplished through a unique net web page called login web page. The login web page asks you to enter your credentials that is then established via the application and after successful validation you are provided with the secured a part of the utility.
Below is the video tutorials. watch and practices.
HTML forms are required to collect different kinds of user data inputs, such as contact information like name, email address, phone numbers and credit card information, etc.
Forms contain unique factors known as controls like inputbox, checkboxes, radio-buttons, submit buttons, and so on. Customers normally complete a form through enhancing its controls e.g. Entering textual content, choosing gadgets, and so forth. and submitting this form to a web server for further processing.
Image Source:
You may like this:
- Sign Up and Login form with HTML and CSS
- Create Login form page with HTML and CSS
- Animated Search Bar with HTML and CSS
Source Code:
If you like this Mobile Login App design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form | By Code Info</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="login">
<form>
<h1>Login In</h1>
<hr />
<p>Explore the World!</p>
<label>Email</label>
<input type="text" placeholder="Email" />
<label>Password</label>
<input type="password" placeholder="Password" />
<button><span>Submit</span></button>
<p><a href="#">Forgot Password?</a></p>
</form>
</div>
<div class="pic">
<img src="/pic/Meeting.png" />
</div>
</div>
</body>
</html>
body {
background: rgb(214, 214, 214);
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
.container {
width: 1000px;
height: 550px;
margin: 30px auto;
display: flex;
background: rgb(214, 214, 214);
border-radius: 10px;
box-shadow: 5px 5px 7px gray, -5px -5px 7px gray;
}
.login {
width: 500px;
}
form {
width: 230px;
margin: 100px auto;
}
form h1 {
text-align: center;
text-transform: uppercase;
font-weight: bolder;
}
p {
text-align: center;
}
form label {
display: block;
font-size: 16px;
font-weight: 600;
padding: 8px;
}
input {
width: 100%;
padding: 8px;
margin: 8px;
outline: none;
border: none;
border: 1px solid gray;
border-radius: 5px;
}
button {
width: 250px;
margin: 8px;
padding: 8px;
background: purple;
outline: none;
border: none;
border-radius: 20px;
color: white;
font-size: 17px;
cursor: pointer;
transition: 0.5s;
}
button span {
display: inline-block;
position: relative;
transition: 0.5s;
}
button span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
button:hover span {
padding-right: 30px;
}
button:hover span:after {
opacity: 1;
right: 0;
}
p a {
text-decoration: none;
color: black;
}
hr {
border-top: 2px solid purple;
}
.pic {
width: 75%;
background: violet;
}
.pic img {
width: 400px;
margin: 70px 0 0 100px;
}
img:hover {
padding: 3px;
cursor: pointer;
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
Very nice login form
Thank you bro 🙂
A big one messy THANK YOU for your time, coding for us & learning new staff…