Menu bar with beautiful login form using html css

Website Design with Login and Registration form HTML & CSS

by

Hello, Readers, Here I am back with another amazing HTML and CSS project. Today we are going to learn how to make a website by using HTML, CSS, and JavaScript. but as all readers know, I always try to make unique designs for my audience.

Today I’m going to make a website with a login and registration form by using HTML and CSS step-by-step. And in this form, I’ve added some JavaScript and some transitions to make a more attractive design. So let’s get started.

How to Create

First of all, we’ll create a navbar, and in that navbar, we’ll add some options. Then, we’ll make a login and registration form with HTML and CSS, and after that, we’ll apply a transition property to make it attractive. We’ll also use some JavaScript properties to hide the login and registration form, and then, when we click on the login button, the login and registration forms will pop up on the screen. As I’ve shared before, Transparent login and registration form using HTML and CSS. Similarly, our login and registration forms will be transparent with the help of the OPACITY property.

Steps to make the website have a login form

  1. First, we’ll create two files. one for the HTML, and the second for CSS.
  2. Search for a beautiful image in pexels.com for the background.
  3. Make a navigation bar.
  4. Make a page for login and registration.
  5. Hide the form by using JavaScript.

As you can see in the image, it looks wonderful. First, make a file of HTML with the name “index.html” and then a CSS file with the name “style.css” CSS to connect them together. Use this code:

rel=”stylesheet” href=”style.css”>

Then find a beautiful image for your background body because your navbar and login form are transparent. As a result, the more stunning your image, the more amazing your website will be. Then we’ll create a lovely navbar in that navbar. I’ve used white for the text, but if you want, you can modify it as per your desire. And in that navbar, I’ve included a logo as well as some basic options such as Home, About Us, Services, Contact, and Login.

As you can see in the top image, I’ve created a login and registration form In this design, we have one login form, and you can see two buttons here. When you click on the register button, it’ll display the registration form, and when you click on the login button, it’ll again come back to the login form. Likewise, in the login and registration forms.

On the login side, we have two fields: one is the email address, and the other is the password. There is a checkbox for remembering the password, and lastly, there is a login button.

There are five fields on the registration Form.

  1. First Name
  2. Last name
  3. Email id
  4. Enter Password
  5. Confirm Password.

And after it, there is a check box for “I agree to the terms and conditions,” and last, there is a Registration button. Now I’m going to provide you with the source code for this wonderful website.

Then we’ll hide the login form with some JavaScript properties, and then we’ll use a toggle property to pop up the login and registration forms.

You might like this:

  1. How to write code using mobile
  2. Transparent login form using HTML and CSS
  3. Login Registration form
  4. Pure CSS Tabs

Website Design with Login and Registration form HTML & CSS [Source Codes]

Make a file with the name Index.HTML in your code editor, then copy the given source code and paste it into your HTML file. Make sure your file is in the “.html” extension.

HTML FILE

<!-- Created by CodingPakistan -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Header Navigation with beautifull Login Form - www.codingpakistan.com</title>
    <link rel="stylesheet" href="style.css">
    <!---we had linked our css file----->
</head>
<body>
    <div class="full-page">
        <div class="navbar">
            <div>
                <a class="logo" href='https://codingpakistan.com'>CodingPakistan</a>
            </div>
            <nav>
                <ul id='MenuItems'>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>About Us</a></li>
                    <li><a href='#'>Services</a></li>
                    <li><a href='#'>Contact</a></li>
                    <li><button class='loginbtn' onclick="document.getElementById('login-form').style.display='block'" style="width:auto;">Login</button></li>
                </ul>
            </nav>
        </div>
        <div id='login-form'class='login-page'>
            <div class="form-box">
                <div class='button-box'>
                    <div id='btn'></div>
                    <button type='button'onclick='login()'class='toggle-btn'>Log In</button>
                    <button type='button'onclick='register()'class='toggle-btn'>Register</button>
                </div>
                <form id='login' class='input-group-login'>
                    <input type='text'class='input-field'placeholder='Email Id' required >
            <input type='password'class='input-field'placeholder='Enter Password' required>
            <input type='checkbox'class='check-box'><span>Remember Password</span>
            <button type='submit'class='submit-btn'>Log in</button>
         </form>
         <form id='register' class='input-group-register'>
             <input type='text'class='input-field'placeholder='First Name' required>
             <input type='text'class='input-field'placeholder='Last Name ' required>
             <input type='email'class='input-field'placeholder='Email Id' required>
             <input type='password'class='input-field'placeholder='Enter Password' required>
             <input type='password'class='input-field'placeholder='Confirm Password'  required>
             <input type='checkbox'class='check-box'><span>I agree to the terms and                                                   conditions</span>
                   <button type='submit'class='submit-btn'>Register</button>
             </form>
            </div>
        </div>
    </div>
    <script>
        var x=document.getElementById('login');
        var y=document.getElementById('register');
        var z=document.getElementById('btn');
        function register()
        {
            x.style.left='-400px';
            y.style.left='50px';
            z.style.left='110px';
        }
        function login()
        {
            x.style.left='50px';
            y.style.left='450px';
            z.style.left='0px';
        }
    </script>
    <script>
        var modal = document.getElementById('login-form');
        window.onclick = function(event)
        {
            if (event.target == modal)
            {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

Then Create a CSS file “style.css” in your code editor, then copy the given source code and paste it into your CSS file. If you want to change some think in this design is totally depends on you it is fully customizable.

CSS FILE

/* Created by CodingPakistan */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}.full-page{
    height: 100%;
    width: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(bg-2.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
}
.navbar{
    display: flex;
    align-items: center;
    padding: 20px;
    padding-left: 50px;
    padding-right: 30px;
    padding-top: 50px;
}
.logo{
    color: white;
}
nav{
    flex: 1;
    text-align: right;
}
nav ul {
    display: inline-block;
    list-style: none;
}
nav ul li{
    display: inline-block;
    margin-right: 70px;
}
nav ul li a{
    text-decoration: none;
    font-size: 20px;
    color: white;
    font-family: sans-serif;
}
nav ul li button{
    font-size: 20px;
    color: white;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: sans-serif;
}
nav ul li button:hover{
    color: aqua;
}
nav ul li a:hover{
    color: aqua;
}
a{
    text-decoration: none;
    color: palevioletred;
    font-size: 28px;
}
#login-form{
    display: none;
}
.form-box{
    width:380px;
    height:480px;
    position:relative;
    margin:2% auto;
    background:rgba(0,0,0,0.3);
    padding:10px;
    overflow: hidden;
}
.button-box{
    width:220px;
    margin:35px auto;
    position:relative;
    box-shadow: 0 0 20px 9px #ff61241f;
    border-radius: 30px;
}
.toggle-btn{
    padding:10px 30px;
    cursor:pointer;
    background:transparent;
    border:0;
    outline: none;
    position: relative;
}
#btn{
    top: 0;
    left:0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: #F3C693;
    border-radius: 30px;
    transition: .5s;
}
.input-group-login{
    top: 150px;
    position:absolute;
    width:280px;
    transition:.5s;
}
.input-group-register{
    top: 120px;
    position:absolute;
    width:280px;
    transition:.5s;
}
.input-field{
    width: 100%;
    padding:10px 0;
    margin:5px 0;
    border-left:0;
    border-top:0;
    border-right:0;
    border-bottom: 1px solid #999;
    outline:none;
    background: transparent;
}
.submit-btn{
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: #F3C693;
    border: 0;
    outline: none;
    border-radius: 30px;
}
.check-box{
    margin: 30px 10px 34px 0;
}
span{
    color:#777;
    font-size:12px;
    bottom:68px;
    position:absolute;
}
#login{
    left:50px;
}
#login input{
    color:white;
    font-size:15;
}
#register{
    left:450px;
}
#register input{
    color:white;
    font-size: 15;
}

Now your wonderful and amazing website with a login and registration form is ready. If your code doesn’t work or you’ve faced any errors or problems, then please download the source code files from the given download button. It’s free, and a “.zip” file will be downloaded. You’ll then have to extract it and use it in your projects.

For further amazing and pleasurable topics, keep visiting my blog channel at www.codingpakistan.com. I always try to give some special techniques to my readers. Thank you for your time. I am sure you will like my content, and if any other topic is on your mind, feel free to share it with me.

Download code files

 

Leave a Comment