Create Website with Login & Registration Form in HTML CSS and JavaScript


This tutorial, "Create Website with Login & Registration Form in HTML, CSS, and JavaScript," is designed to guide you through the process of building a fully functional website that allows users to register, log in, and interact with web content securely.

Learning how to create user authentication features is a valuable skill that can be applied to a wide range of web projects, from personal websites to e-commerce platforms and social networks. By the end of this tutorial, you will have gained hands-on experience in developing a secure and user-friendly web application. So, let's embark on this exciting journey of web development and enhance your skill set in HTML, CSS, and JavaScript.


If interested in watching the video before running the code below, you can click the play button to get started.

To create a website login and registration form using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:


First, create a folder with any name you like. Then, make the necessary files inside it.

Create a file called index.html to serve as the main file.

Create a file called style.css for the CSS code.

Create a file called script.js for the JavaScript code.

Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 



<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div class="header">
    <div class="logo"><h1>Logo</h1></div>
    <div class="links">
        <ul>
            <li><a href="">About</a></li>
            <li><a href="">Career</a></li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>
    <div class="login">
        <button type="button" class="logins">Login</button>
    </div>
</div>


<div class="all_forms">
    <div class="cover">
        <div class="login_form">
            <div class="login_message">
                <div class="blend"></div>
                <div>
                    <h1>Welcome Back</h1>
                    <br>
                    <p>Please log in using your personal information to stay connected with us.</p>
                </div>
            </div>
            <div class="login_inputs">
                <div class="exit"><img src="close.png" alt="" class="exit_btn"></div>
                <form>
                    <h1>LOGIN</h1>
                     <div>
                        <input type="email" class="all_inputs">
                        <label>Email</label>
                     </div>
                     <div class="div_p">
                        <input type="password" class="all_inputs">
                        <label>Password</label>
                     </div>
                     <div><a href="">Forgot password?</a></div>
                     <div>
                        <input type="submit" value="Login">
                     </div>
                     <div class="footer">
                        <span>Don't have an account? <a href="" class="signups">Signup</a></span>
                     </div>
                </form>
            </div>
        </div>

        <div class="login_form signup_form">
            <div class="login_message login_message2">
                <div class="blend"></div>
                <div>
                    <h1>Create Account</h1>
                    <br>
                    <p>To become a part of our community, please sign up using your personal information.</p>
                </div>
            </div>
            <div class="login_inputs">
                <div class="exit"><img src="close.png" alt="" class="exit_btn"></div>
                <form>
                    <h1>SignUp</h1>
                     <div>
                        <input type="email">
                        <label>Email</label>
                     </div>
                     <div class="div_p">
                        <input type="password">
                        <label>Password</label>
                     </div>
                     <!-- <div><a href="">Forgot password?</a></div> -->
                     <div>
                        <input type="submit" value="Sign Up">
                     </div>
                     <div class="footer">
                        <span>Already have an account? <a href="" class="logins">LogIn</a></span>
                     </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>



Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 



* {
    margin: 0;
    padding: 0;
}

body {
    background: #f2f2f2;
    font-family: "Poppins", sans-serif;
    background-image: url(hans.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

.header {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    position: relative;
    top: 30px;
    z-index: 10;
    color: #fff;
}

.links ul {
    list-style: none;
}

.links ul li {
    position: relative;
    display: inline;
    margin: 0 20px;
}

.links ul li::before {
    content: "";
    position: absolute;
    bottom: -7px;
    height: 2px;
    border-radius: 10px;
    background: #fff;
    width: 0;
    transition: 0.5s;
}

.links ul li:hover::before {
    width: 100%;
}

.links ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}

.login button {
    padding: 10px 25px;
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.5s;
}

.login button:hover {
    background: #fff;
    color: #000;
}

.all_forms {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
}

.cover {
    position: relative;
    width: 100%;
    height: 100%;
}

.login_form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    width: 800px;
    height: 400px;
    display: flex;
}

.login_message {
    position: relative;
    width: 400px;
    background-image: url(lap2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.blend {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
}

.login_message div:nth-child(2) {
    position: relative;
}

.login_message div p {
    width: 350px;
    margin: 0 auto;
    line-height: 26px;
}

.login_inputs {
    width: 400px;
    background: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.exit {
    position: relative;
    float: right;
    margin: 10px;
    z-index: 1;
}

.exit img {
    width: 15px;
    cursor: pointer;
}

.login_inputs form {
    position: relative;
    top: 10px;
    padding: 20px;
}

.login_inputs form h1 {
    text-align: center;
    margin-bottom: 20px;
}

.login_inputs form div {
    margin-bottom: 30px;
    position: relative;
}

.login_inputs form div input {
    width: 100%;
    padding: 15px 0;
    padding-left: 5px;
    border-radius: 5px;
    border: none;
    outline: none;
    border: 1px solid rgba(0, 0, 0, .3);
}

.login_inputs form div label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 15px;
    color: rgba(0, 0, 0, .8);
}

.login_inputs form div input:focus + label {
    top: 10px;
    font-size: 10px;
}

.login_inputs form .div_p {
    margin-bottom: 15px;
}

.login_inputs form div input[type=submit] {
    background: #20b2aa;
    color: #fff;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

.login_inputs form div a {
    text-decoration: none;
    color: #20b2aa;
}

.footer {
    text-align: center;
}

.show_login {
    animation: rotate 0.5s linear 1;
    transform: translate(-50%,-50%)  rotate(0) scale(1);
}

@keyframes rotate {
    0% {
        transform: translate(-50%,-50%)   rotate(360deg) scale(0);
    }100% {
        transform: translate(-50%,-50%)  rotate(0) scale(1);
    }
}

.signup_form {
    transform: translate(-50%,-50%)  rotate(0) scale(0);
    transition: 1s;
}

.login_message2 {
    background-image: url(lap1.jpg);
}




Finally, add the following JavaScript code to your script.js file to make your AI image generator website functional. This code handles various functions, even listeners, input handling, API calls, image rendering, etc. to generate AI images based on user prompts.


 


	const logins = document.querySelectorAll(".logins");
  	const cover = document.querySelector(".cover");
    const loginForm = document.querySelector(".login_form");
    const header = document.querySelector("header")

    logins.forEach(log => {
        log.addEventListener("click", e => {
            e.preventDefault();
            loginForm.classList.add("show_login");

            cover.style.backdropFilter = "blur(3px)";
            cover.style.zIndex = "14";

            //after your run login finish
            signupForm.style.transform = "translate(-50%,-50%)  rotate(0) scale(0)";

        })
    })

    const signups = document.querySelectorAll(".signups");
    const signupForm = document.querySelector(".signup_form");
    signups.forEach(sign => {
        sign.addEventListener("click", e => {
            e.preventDefault();
            loginForm.classList.remove("show_login");

            signupForm.style.transform = "translate(-50%,-50%)  rotate(0) scale(1)";
        })
    })



    const all_inputs = document.querySelectorAll(".all_inputs");
    all_inputs.forEach(ini => {
        ini.addEventListener("focusout", e => {
            if(e.target.value !== "") {
                let parent = e.currentTarget.parentElement;
                let label = parent.querySelector("label")
                label.style.top = "10px";
                label.style.fontSize = "10px";
            }
        })
    })


    const exitBtn = document.querySelectorAll(".exit_btn");
    exitBtn.forEach(close => {
        close.addEventListener("click", e => {
            cover.style.backdropFilter = "none";

            cover.style.zIndex = "0";

            loginForm.classList.remove("show_login");

            signupForm.style.transform = "translate(-50%,-50%)  rotate(0) scale(0)";
        })
    })
    

To understand the JavaScript code better, I recommend watching the above video tutorial, reading the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, creating your own website with login and registration form will seem easy now cause you have already known some of the functionality of the code. 

I recommend watching the above video if you still have any confusion on the code.

By following the steps outlined in this article, I believe that you have successfully created your own unique version of login and registration form. Feel free to experiment with different styles and features to take your website to the next level. 

Post a Comment

0 Comments

Close Menu