Login Form
How do I make an login form?
What is a login form? How do you make a login form? This script and codes were developed by Azizur Rahman on 09 January 2023, Monday.
Login Form - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="container"> <div class="options"> <span class="active">SIGN IN</span> <span>SIGN UP</span> </div> <div class="log"> <form> <label class="up">Username</label><br> <input type="text" name="username"><br><br> <label class="up">Password</label><br> <input type="password" name="password"><br><br> <input type="checkbox" name="box" value="signedin" id="check"><label id="keep">Keep me signed in</label><br> <button>SIGN IN</button> </div> <div id="footer"> <a href="#">Forgot Password?</a></div> </form>
</div>
</body>
</html>
Login Form - Script Codes CSS Codes
.container { width: 500px; background-color: #f8f9f9; margin: 0 auto; font-family: 'Roboto', sans-serif; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.log { position: relative; width: 400px; margin: 0 auto; padding: 40px 0px 40px 0px;
}
input { width: 400px; padding: 10px 0px; border: 1px solid #ebedef;
}
#check { position: absolute; right: 180px;
}
#keep { position: absolute; left: 30px;
}
span,
label { color: #b71c1c;
}
button { color: white; background-color: #b71c1c; border: 0; width: 400px; padding: 10px; margin: 10px 0px; font-family: 'roboto', san-serif;
}
#footer { width: 100%; background-color: #b71c1c; padding: 20px 0px; position: relative; text-align: center;
}
a { text-decoration: none; color: white; text-align: center;
}
.up { padding: 0px 5px; font-size: 1rem;
}
.options { padding-top: 20px; width: 300px; margin: 0 auto;
}
.options span { padding: 0px 40px;
}
.active { text-decoration: underline;
}
input:focus { border: 1px solid #b71c1c; box-shadow: 0 0 3px #b71c1c;
}
button:hover { box-shadow: 0 0 4px #b71c1c;
}
| Developer | Azizur Rahman |
| Username | azizurrahman |
| Uploaded | January 09, 2023 |
| Rating | 3 |
| Size | 2,010 Kb |
| Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Special Offer Card | 2,343 Kb |
| Simple Transition Buttons | 1,644 Kb |
| Working Timer | 2,454 Kb |
| Spinning Buttons | 1,634 Kb |
| Payment Form | 2,198 Kb |
| Gradient Background Animation | 1,634 Kb |
| Working Dial Pad | 2,457 Kb |
| One Page Site | 2,736 Kb |
| Web Audio Player | 2,514 Kb |
| Recipe Card | 2,056 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| BenU Maintenance Site | Ksherman | 4,893 Kb |
| Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
| Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
| Mostly Fluid | Mccreath | 3,308 Kb |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
| CSS Letter animations | Sladix | 2,116 Kb |
| Sample Profile Screen | OurDailyBread | 5,375 Kb |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| Jstam.com Home Page | Jstam | 10,558 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!