Create a Login and Registration page using HTML and CSS || Full tutorial Step - by - Step.

on

 




Creating a login and registration page using HTML and CSS is a crucial step in building a secure and efficient website. The login and registration page is the first point of interaction between the user and the website. This page should be easy to navigate and should provide clear instructions on how to register or log in.

To create a login and registration page, you will need to write the HTML and CSS code that will define the layout and style of the page. The HTML code will define the structure of the page, including the text, headings, input fields, and buttons. The CSS code will be used to style the page, including the font, color, size, and layout of the various elements.

The login and registration page should include input fields for the user to enter their login credentials or to register a new account. This could include fields for their email address, username, password, and any other relevant information that the website requires. The page should also include buttons that allow the user to submit their information or to cancel and return to the home page.

The layout of the page should be simple and easy to use, with clear instructions and labels for each input field. The page should also include links to any relevant help or support resources, as well as a link to the website's privacy policy and terms of service.

Overall, creating a login and registration page using HTML and CSS requires a balance of functionality and design. The page should be easy to use, visually appealing, and secure, providing a positive experience for users and promoting engagement with the website.



HTML CODE


<div class="main-box">
        <div class="main">
            <input type="checkbox" id="chk" aria-hidden="true">
            <div class="login">
                <form class="form">
                    <label for="chk" aria-hidden="true">Log in</label>
                    <input class="input" type="email" name="email" placeholder="Email" required="">
                    <input class="input" type="password" name="pswd" placeholder="Password" required="">
                    <button>Log in</button>
                </form>
            </div>

            <div class="register">
                <form class="form">
                    <label for="chk" aria-hidden="true">Register</label>
                    <input class="input" type="text" name="txt" placeholder="Username" required="">
                    <input class="input" type="email" name="email" placeholder="Email" required="">
                    <input class="input" type="password" name="pswd" placeholder="Password" required="">
                    <button>Register</button>
                </form>
            </div>
        </div>
    </div>

CSS CODE

            @import url('https://fonts.googleapis.com/css2?family=Gloock&family=Herr+Von+Muellerhoff&
                            family=Montserrat:wght@100;200;300;400&family=Open+Sans:ital,wght@0,400;0,500;
                            0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@
                            0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&
                            family=Tilt+Neon&display=swap');
            /*font-family: 'Montserrat', sans-serif;*/
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Montserrat', sans-serif;
            }

            .main-box {
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .main {
                width: 500px;
                position: relative;
                display: flex;
                flex-direction: column;
                background-color: #240046;
                max-height: 480px;
                overflow: hidden;
                border-radius: 12px;
                box-shadow: 7px 7px 10px 3px #24004628;
            }

            .form {
                display: flex;
                flex-direction: column;
                gap: 14px;
                padding: 24px;
            }

            /*checkbox to switch from sign up to login*/
            #chk {
                display: none;
            }

            /*Login*/
            .login {
                padding: 10px 50px;
                position: relative;
                width: 100%;
                height: 100%;
            }

            .login label {
                margin: 25% 0 5%;
            }

            label {
                color: #fff;
                font-size: 2rem;
                justify-content: center;
                display: flex;
                font-weight: bold;
                cursor: pointer;
                transition: .5s ease-in-out;
            }

            .input {
                width: 100%;
                height: 40px;
                background: #e0dede;
                padding: 10px;
                border: none;
                outline: none;
                border-radius: 4px;
            }

            /*Register*/
            .register {
                padding: 10px 50px;
                background: #eee;
                border-radius: 60% / 10%;
                transform: translateY(-7%);
                transition: .8s ease-in-out;
            }

            .register label {
                color: #573b8a;
                transform: scale(.6);
            }

            #chk:checked~.register {
                transform: translateY(-60%);
            }

            #chk:checked~.register label {
                transform: scale(1);
                margin: 10% 0 5%;
            }

            #chk:checked~.login label {
                transform: scale(.6);
                margin: 5% 0 5%;
            }

            /*Button*/
            .form button {
                width: 85%;
                height: 40px;
                margin: 12px auto 10%;
                color: #fff;
                background: #573b8a;
                font-size: 1rem;
                font-weight: bold;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: .2s ease-in;
            }

            .form button:hover {
                background-color: #6d44b8;
            }

Comments

Post a Comment