Creating a Login Page with HTML and CSS
To begin, let’s start by understanding the basic structure of a login page using HTML and CSS. By incorporating simple code snippets, you can create a user-friendly login interface. Here’s a quick guide to help you get started with CSS And HTML code For the Login Page
- Utilize form elements such as input fields and buttons to capture user credentials.
- Apply CSS styling to enhance the visual appeal of the login form.
- Ensure responsive design for seamless user experience across devices.
The Best Login Page Design with Source Code
Looking for inspiration to elevate your login page design? Explore the best login page designs in HTML and CSS with available source code. You can achieve a unique and visually stunning login page by customizing existing templates or creating your own from scratch. More
HTML
- Create a Folder:
- You can create a new folder anywhere you’d like on your computer. Could you give it a name of your choice? For example, let’s call it “my website.”
- Inside the Folder:
- Open the newly created folder (“my-website” in our example).
- Inside this folder, create the following files:
- Create an
index.htmlFile:- Right-click inside the folder and choose New Text Document.
- Rename the newly created text document to “index.html” (make sure to remove the “.txt” extension).
- Open the “index.html” file using a text editor (such as Notepad or Visual Studio Code).
<html lang="en">
<!-- AC Zone By Animationcoding.com -->
<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">
<link rel="stylesheet" href="style.css">
<title>Next Level Login Form</title>
</head>
<body>
<div class="container">
<div class="login-box">
<h2>Login</h2>
<form action="#">
<div class="input-box">
<input type="email" required>
<label>Email</label>
</div>
<div class="input-box">
<input type="password" required>
<label>Password</label>
</div>
<div class="forgot-password">
<a href="#">Forgot Password?</a>
</div>
<button type="submit" class="btn">Login</button>
</form>
</div>
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
<span style="--i:21;"></span>
<span style="--i:22;"></span>
<span style="--i:23;"></span>
<span style="--i:24;"></span>
<span style="--i:25;"></span>
<span style="--i:26;"></span>
<span style="--i:27;"></span>
<span style="--i:28;"></span>
<span style="--i:29;"></span>
<span style="--i:30;"></span>
<span style="--i:31;"></span>
<span style="--i:32;"></span>
<span style="--i:33;"></span>
<span style="--i:34;"></span>
<span style="--i:35;"></span>
<span style="--i:36;"></span>
<span style="--i:37;"></span>
<span style="--i:38;"></span>
<span style="--i:39;"></span>
<span style="--i:40;"></span>
<span style="--i:41;"></span>
<span style="--i:42;"></span>
<span style="--i:43;"></span>
<span style="--i:44;"></span>
<span style="--i:45;"></span>
<span style="--i:46;"></span>
<span style="--i:47;"></span>
<span style="--i:48;"></span>
<span style="--i:49;"></span>
</div>
</body>
</html>
CSS
2. Create a style.css File:
- Right-click inside the folder again and choose New Text Document.
- Rename the newly created text document to
style.css(remove the “.txt” extension). - Open the
style.cssfile using a text editor.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins";
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #1d1d1d;
min-height: 100vh;
}
.container {
position: relative;
width: 256px;
height: 256px;
display: flex;
justify-content: center;
align-items: center;
}
.container span {
position: absolute;
left: 0;
width: 32px;
height: 6px;
background: #501e17;
border-radius: 8px;
transform-origin: 128px;
transform: scale(2.2) rotate(calc(var(--i) * (360deg / 50)));
animation: animateBlink 3s linear infinite;
animation-delay: calc(var(--i) * (3s / 50));
}
@keyframes animateBlink {
0% {
background: #ff4000;
box-shadow: 0px 0px 5px rgb(255, 64, 0);
}
25% {
background: #501e17;
box-shadow: 0px 0px 1px rgb(255, 64, 0);
}
}
.login-box {
position: absolute;
width: 400px;
}
.login-box form {
width: 100%;
padding: 0 50px;
}
h2 {
font-size: 2em;
color: #ff4000;
text-align: center;
}
.input-box {
position: relative;
margin: 25px 0;
}
.input-box input {
width: 100%;
height: 50px;
background: transparent;
border: 2px solid #501e17;
outline: none;
border-radius: 40px;
font-size: 1em;
color: #fff;
padding: 0 20px;
transition: .5s;
}
.input-box input:focus,
.input-box input:valid {
border-color: #ff4000;
}
.input-box label {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
font-size: 1em;
color: #fff;
pointer-events: none;
transition: .5s ease;
}
.input-box input:focus~label,
.input-box input:valid~label {
top: 1px;
font-size: .8em;
background-color: #1d1d1d;
padding: 0 6px;
color: #ff4000;
border-radius: 20px;
}
.forgot-password {
margin: -15px 0 10px;
text-align: center;
}
.forgot-password a {
font-size: .85em;
color: #fff;
text-decoration: none;
}
.forgot-password a:hover {
text-decoration: underline;
}
.btn {
width: 100%;
height: 45px;
border-radius: 45px;
background: #ff4000;
border: none;
outline: none;
cursor: pointer;
font-size: 1em;
color: #FFF;
font-weight: 600;
}
If you face any problem in the source link given above, then you people do not need to be afraid, what we have done is that I have created a download folder and packed it for you, so you do not have to do anything. Below you will be getting an option download link click on it and you can download this file to all files.
Have a Nice Day 💗