Here’s a concise, beginner-friendly blog post on creating a login page using HTML and CSS:

By /

How to Create a Simple Login Page Using HTML and CSS

Creating a login page is a fundamental skill for any web developer. With just HTML and CSS, you can build a clean, functional login form. Here’s how:

1. HTML Structure

Start with a basic HTML file. The form will include fields for the username and password, and a login button.

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <input type="text" placeholder="Username" required>
            <input type="password" placeholder="Password" required>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

2. CSS Styling

Next, create a style.css file to style the login form.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-container {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 300px;
    text-align: center;
}

.login-container h2 {
    margin-bottom: 20px;
    color: #333;
}

.login-container input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #0056b3;
}

3. How It Works

  • HTML creates the form structure with input fields and a button.
  • CSS styles the form to center it on the page and make it visually appealing.
  • You can enhance this page by adding links for “Forgot Password?” or “Sign Up” and using JavaScript for form validation.

4. Result

You now have a simple, responsive login page ready to use!

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

RETURNING FOR ANOTHER TRIP?

GET 20% OFF
💬