Scribd
Upload
81 views3 pages

Simple HTML Login Page Design

This document is an HTML template for a login page. It includes a styled form with fields for username and password, as well as a submit button. The design features a centered login container with a simple aesthetic using CSS for layout and styling.

Uploaded by

bangayanms30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
81 views3 pages

Simple HTML Login Page Design

This document is an HTML template for a login page. It includes a styled form with fields for username and password, as well as a submit button. The design features a centered login container with a simple aesthetic using CSS for layout and styling.

Uploaded by

bangayanms30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>Login Page</title>

<style>

Body {

Font-family: Arial, sans-serif;

Background-color: #f2f2f2;

.login-container {

Width: 300px;

Margin: 50px auto;

Background-color: white;

Padding: 20px;

Border: 1px solid #ddd;

Border-radius: 10px;

Box-shadow: 0 0 10px rgba(0,0,0,0.1);

.login-container h2 {

Text-align: center;

Margin-bottom: 20px;

.form-group {

Margin-bottom: 15px;
}

.form-group label {

Display: block;

Margin-bottom: 5px;

.form-group input {

Width: 100%;

Height: 40px;

Padding: 10px;

Border: 1px solid #ccc;

Border-radius: 5px;

.form-group input[type=”submit”] {

Background-color: #007bff;

Color: white;

Cursor: pointer;

.form-group input[type=”submit”]:hover {

Background-color: #0056b3;

</style>

</head>

<body>

<div class=”login-container”>

<h2>Login</h2>

<form action=”” method=”post”>

<div class=”form-group”>
<label for=”username”>Username:</label>

<input type=”text” id=”username” name=”username” required>

</div>

<div class=”form-group”>

<label for=”password”>Password:</label>

<input type=”password” id=”password” name=”password”


required>

</div>

<div class=”form-group”>

<input type=”submit” value=”Login”>

</div>

</form>

</div>

</body>

</html>

You might also like