Create 3D Glowing Login Page in HTML & CSS

How to Create Login Page in HTML & CSS — Example of Create Login Page in HTML & CSS

Introduction:

Welcome, respective coders! In the present exercise, we’re plunging into the fundamentals of web improvement by Create Login Page in HTML & CSS. Whether you’re simply beginning or hoping to support your abilities, this task is a fantastic method for learning these basic innovations.

Figuring out the Establishment: A login page is much of the time the primary collaboration clients have with a site, making it an urgent piece of any task. In this instructional exercise, we’ll create a smooth login interface utilizing HTML components like structures, data sources, marks, and CSS for styling.

This tutorial will show the change of a static login page into an interactive masterwork by leveraging the power of CSS for dynamic modifications and enhancements.

Please follow the below steps to Create Login Page in HTML & CSS –

Step 1: Organizing the Page:

Start by setting up your task index. Make an organizer and name it as indicated by your inclination. Inside, make an ‘index.html‘ record to act as the principal document and a ‘style.css‘ record for your CSS code. Furthermore, guarantee to have an organizer named ‘Pictures’ with significant pictures for your login page.

Step 2: HTML Structure:

In your ‘index.html‘ record, input the given HTML code scrap. This code incorporates the essential construction for a login structure – a compartment with fields for username, secret word, and a submit button.

<!DOCTYPE html>
<!-- how to create loging page in html and css -->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
</head>

<body>
    <div class="neumorphic-card">
        <div class="neumorphic-card__header">Login</div>
        <form onsubmit="event.preventDefault()" action="" class="neumorphic-form">
            <div class="neumorphic-input-wrapper">
                <label for="neumorphic-username">Username</label>
                <input type="text" name="neumorphic-username" id="neumorphic-username">
            </div>
            <div class="neumorphic-input-wrapper">
                <label for="neumorphic-password">Password</label>
                <input type="password" name="neumorphic-password" id="neumorphic-password">
            </div>
            <button type="submit">Sign in</button>
        </form>
        <div class="neumorphic-card__footer">
            <p>Forgot Password? <a href="#">click here</a></p>
        </div>
    </div>
</body>
</html>

Step 3: Styling with CSS:

Open your ‘style.css‘ document and apply CSS properties to improve the feel and usefulness of the login structure. You can redo different perspectives like tones, textual styles, foundations, and designs to make an outwardly engaging login interface.

/* Importing Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

      * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            height: 100vh;
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #343434;
        }

        .neumorphic-card {
            background-color: #e0e0e0;
            width: 400px;
            height: auto;
            margin: 1rem;
            padding: 2rem;
            border-radius: 10px;
            box-shadow:
                10px 10px 22px rgba(0, 0, 0, 0.2),
                -10px -10px 22px rgba(255, 255, 255, 0.75);
        }

        .neumorphic-card__header {
            font-size: 1.8rem;
            text-transform: uppercase;
            font-weight: 500;
            text-align: center;
        }

        .neumorphic-form {
            margin: 2rem 0;
        }

        .neumorphic-input-wrapper {
            width: 100%;
            margin-bottom: 0.5rem;
            display: flex;
            flex-direction: column;
        }

        .neumorphic-input-wrapper label {
            font-size: 0.9rem;
            font-weight: 400;
            margin-left: 0.8rem;
        }

        .neumorphic-input-wrapper input {
            border: none;
            outline: none;
            background: none;
            background-color: #e0e0e0;
            padding: 0.8rem 1.1rem;
            border-radius: 20px;
            margin: 0.5rem 0 1rem 0;
            font-size: 1.2rem;
            color: #0dafeb;;
            box-shadow:
                inset 5px 5px 11px rgba(0, 0, 0, 0.2),
                inset -5px -5px 11px rgba(255, 255, 255, 0.75);
        }

        .neumorphic-form button {
            border: none;
            outline: none;
            background: none;
            width: 100%;
            margin: 0.6rem 0 1rem 0;
            cursor: pointer;
            font-size: 1.2rem;
            color: #0dafeb;
            text-transform: capitalize;
            padding: 0.9rem;
            border-radius: 20px;
            background-color: #e0e0e0;
            box-shadow:
                10px 10px 22px rgba(0, 0, 0, 0.2),
                -10px -10px 22px rgba(255, 255, 255, 0.75);
        }

        .neumorphic-form button:active {
            box-shadow:
                inset 5px 5px 11px rgba(0, 0, 0, 0.2),
                inset -5px -5px 11px rgba(255, 255, 255, 0.75);
        }

        .neumorphic-card__footer p {
            text-align: center;
            font-size: 0.9rem;
            margin: 0;
        }

        .neumorphic-card__footer a {
            text-decoration: none;
            color: rgb(216, 30, 30);
        }

        .neumorphic-card__footer a:hover {
            text-decoration: underline;
        }

Conclusion:

Congratulations! You’ve effectively Create Login Page in HTML & CSS. This task gives a strong groundwork to comprehend the design of a login connection point and how styling can raise its visual allure.

Continue rehearsing and exploring! Try different things with various formats, add approvals, or investigate incorporating JavaScript to improve the usefulness further.

Join Our Telegram Channel to Download the Project Source Code: Click Here

For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.

Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.

download code