HOW TO CREATE A MODERN LOGIN AND SIGNUP FORM PAGE| HTML CSS TUTORIAL

5 min readMay 9, 2024

Introduction

Welcome to the exciting world of web design, where creativity meets functionality! In this tutorial, we’ll embark on a journey to create modern login and signup pages using HTML and CSS. Whether you’re a beginner or an experienced developer, this tutorial will equip you with the skills to design sleek and user-friendly authentication pages for your website.

Why Modern Login and Signup Pages Matter?
Your login and signup pages are often the first point of contact for users visiting your website. Creating modern and visually appealing authentication pages not only enhances user experience but also builds trust and credibility. With the right design elements and techniques, you can create login and signup pages that leave a lasting impression on your users.

The Power of HTML and CSS

We’ll be using HTML and CSS to bring our modern login and signup pages to life. These powerful web technologies allow us to create responsive and stylish layouts without the need for complex frameworks or libraries. By mastering HTML and CSS, you’ll have full control over the design and functionality of your authentication pages.

Creating Modern Login and Signup Pages

In this tutorial, we’ll cover everything you need to know to create modern login and signup pages from scratch. From designing clean and intuitive user interfaces to implementing smooth transitions and animations, we’ll walk through each step of the process in detail.

Step-by-Step Tutorial:
Setting Up the HTML Structure: We’ll start by creating the basic structure of our login and signup pages, including form elements and placeholders for input fields.
Styling with CSS: Next, we’ll dive into CSS to style our pages, adding colors, fonts, and layout adjustments to achieve a modern and visually appealing design.
Adding Interactivity: We’ll enhance user experience by adding hover effects, focus states, and transitions to our form elements, making the login and signup process seamless and intuitive.
Validation and Error Handling: Finally, we’ll implement basic validation and error handling to provide feedback to users.

Youtube Video Link:

Get the Code

For those eager to dive into the code, we’ve included the complete HTML and CSS for our modern login and signup pages below. Simply copy and paste the code snippets into your own project to get started.

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="form-container">
        <h2>LOGIN</h2>
        <form class="login-form">
            <input type="text" placeholder="Username" required>
            <input type="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
        <div class="signup-link">
            <p>Don't have an account? <a href="signup.html">Sign Up</a></p>
        </div>
    </div>
</body>
</html>

signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="form-container">
        <h2>SIGN UP</h2>
        <form class="signup-form">
            <input type="text" placeholder="Full Name" required>
            <input type="text" placeholder="Email" required>
            <input type="password" placeholder="Password" required>
            <input type="password" placeholder="Confirm Password" required>
            <input type="submit" value="Sign Up">
        </form>

        <div class="login-link">
            <p>Already have an account? <a href="login.html">Log In</a></p>
        </div>
    </div>
</body>
</html>

styles.css

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

.form-container {
    background-color: #34495e;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-width: 400px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    animation: slideIn 0.8s ease-in-out, borderLight 2s infinite alternate;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes borderLight {
    from {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }
    to {
        box-shadow: 0 0 20px rgba(122, 206, 167, 0.856);
    }
}

.form-container h2 {
    color: #ecf0f1;
    margin-bottom: 20px;
}

.login-form input, .signup-form input {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    outline: none;
}

.login-form input[type="submit"] {
    background-color: #2ecc71;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-form input[type="submit"]:hover {
    background-color: #27ae60;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    background-color: #ecf0f1;
    color: #333;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    background-color: #d5dbdb;
}


/* COMMON CSS */

.signup-link a,
.login-link a {
    color: #9294ee;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.signup-link a:hover,
.login-link a:hover {
    color: #2980b9;
}

.signup-link p,
.login-link p {
    color: #7f8c8d;
    margin-top: 12px;
    font-size: 16px;
}


/* SIGNUP PAGE CSS */

.signup-form input[type="submit"] {
    background-color: #e74c3c;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signup-form input[type="submit"]:hover {
    background-color: #c0392b;
}

.signup-form input[type="text"],
.signup-form input[type="password"] {
    background-color: #cbd1d3;
    color: #333;
}

.signup-form input[type="text"]:focus,
.signup-form input[type="password"]:focus {
    background-color: #9eb1b1;
}

Conclusion

By following this tutorial, you’ll gain the skills and confidence to create modern login and signup login pages that enhance user experience and elevate your website’s design. Whether you’re a beginner or an experienced web developer, mastering HTML and CSS opens the door to endless possibilities in web design.

Subscribe and Stay Inspired

If you’re passionate about web development and eager for more tutorials and tips, be sure to subscribe to our channel and hit the notification bell. We have a wealth of HTML CSS tutorials and resources to help you on your journey to becoming a web design pro!

Ready to dive in? Let’s get started on crafting your modern login and signup pages!

The world of web design is at your fingertips. Dive into the code, experiment, and let the magic of HTML and CSS elevate your web design skills.

Channel Link: https://www.youtube.com/@lostbongcoder

Happy Coding!!! 🌟🌟🙌😺