10 Free Responsive Navigation Bar in HTML CSS & JavaScript – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 09 May 2023 13:31:18 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Website with Login & Registration Form in HTML CSS & JavaScript https://www.codingnepalweb.com/website-login-registration-form-html-css-javascript/ https://www.codingnepalweb.com/website-login-registration-form-html-css-javascript/#respond Sun, 09 Apr 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4111 Website with Login & Registration Form in HTML CSS & JavaScript

While learning web development creating a website with a Login and Registration Form could be the best project for beginners to intermediate-level web developers.

Today in this blog you will learn how to build a website that includes a Login and Registration Form using HTML, CSS, and JavaScript. While I have previously designed many websites with Login and Registration Forms, they were created as separate entities.

As you can see on the given image of the Website with the Login & Signup Form that you will be going to learn to create today. The website will have a navigation bar with a logo and nav links with a button that will toggle the form. To toggle the login and registration form there is a button at the bottom of the form.

Website with Login & Registration Form in HTML CSS & JS

As demonstrated in the video tutorial of the website featuring a login and registration form, initially, a website with a navigation bar was presented. Upon clicking the login button, the login form was displayed, and upon clicking the signup button, the registration form appeared.

I would highly recommend you watch the provided video tutorial. In the video tutorial, I have shown to create a website with a login and registration form step by step as well as I have commented on the code to make it easier to understand.

Steps for Creating a Website with Login & Registration Form

To create a Website with Login & Registration Form using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js
  5. Download the background image and put this image inside the project folder. This is the website background image.

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Website with the Login & Registration Form, by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website with Login & Registration Form</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Unicons -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
  </head>
  <body>
    <!-- Header -->
    <header class="header">
      <nav class="nav">
        <a href="#" class="nav_logo">CodingLab</a>

        <ul class="nav_items">
          <li class="nav_item">
            <a href="#" class="nav_link">Home</a>
            <a href="#" class="nav_link">Product</a>
            <a href="#" class="nav_link">Services</a>
            <a href="#" class="nav_link">Contact</a>
          </li>
        </ul>

        <button class="button" id="form-open">Login</button>
      </nav>
    </header>

    <!-- Home -->
    <section class="home">
      <div class="form_container">
        <i class="uil uil-times form_close"></i>
        <!-- Login From -->
        <div class="form login_form">
          <form action="#">
            <h2>Login</h2>

            <div class="input_box">
              <input type="email" placeholder="Enter your email" required />
              <i class="uil uil-envelope-alt email"></i>
            </div>
            <div class="input_box">
              <input type="password" placeholder="Enter your password" required />
              <i class="uil uil-lock password"></i>
              <i class="uil uil-eye-slash pw_hide"></i>
            </div>

            <div class="option_field">
              <span class="checkbox">
                <input type="checkbox" id="check" />
                <label for="check">Remember me</label>
              </span>
              <a href="#" class="forgot_pw">Forgot password?</a>
            </div>

            <button class="button">Login Now</button>

            <div class="login_signup">Don't have an account? <a href="#" id="signup">Signup</a></div>
          </form>
        </div>

        <!-- Signup From -->
        <div class="form signup_form">
          <form action="#">
            <h2>Signup</h2>

            <div class="input_box">
              <input type="email" placeholder="Enter your email" required />
              <i class="uil uil-envelope-alt email"></i>
            </div>
            <div class="input_box">
              <input type="password" placeholder="Create password" required />
              <i class="uil uil-lock password"></i>
              <i class="uil uil-eye-slash pw_hide"></i>
            </div>
            <div class="input_box">
              <input type="password" placeholder="Confirm password" required />
              <i class="uil uil-lock password"></i>
              <i class="uil uil-eye-slash pw_hide"></i>
            </div>

            <button class="button">Signup Now</button>

            <div class="login_signup">Already have an account? <a href="#" id="login">Login</a></div>
          </form>
        </div>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
a {
  text-decoration: none;
}
.header {
  position: fixed;
  height: 80px;
  width: 100%;
  z-index: 100;
  padding: 0 20px;
}
.nav {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.nav,
.nav_item {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.nav_logo,
.nav_link,
.button {
  color: #fff;
}
.nav_logo {
  font-size: 25px;
}
.nav_item {
  column-gap: 25px;
}
.nav_link:hover {
  color: #d9d9d9;
}
.button {
  padding: 6px 24px;
  border: 2px solid #fff;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}
.button:active {
  transform: scale(0.98);
}

/* Home */
.home {
  position: relative;
  height: 100vh;
  width: 100%;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
}
.home::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease-out;
}
.home.show::before {
  opacity: 1;
  pointer-events: auto;
}
/* From */
.form_container {
  position: fixed;
  max-width: 320px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 101;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-out;
}
.home.show .form_container {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.signup_form {
  display: none;
}
.form_container.active .signup_form {
  display: block;
}
.form_container.active .login_form {
  display: none;
}
.form_close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #0b0217;
  font-size: 22px;
  opacity: 0.7;
  cursor: pointer;
}
.form_container h2 {
  font-size: 22px;
  color: #0b0217;
  text-align: center;
}
.input_box {
  position: relative;
  margin-top: 30px;
  width: 100%;
  height: 40px;
}
.input_box input {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 30px;
  color: #333;
  transition: all 0.2s ease;
  border-bottom: 1.5px solid #aaaaaa;
}
.input_box input:focus {
  border-color: #7d2ae8;
}
.input_box i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #707070;
}
.input_box i.email,
.input_box i.password {
  left: 0;
}
.input_box input:focus ~ i.email,
.input_box input:focus ~ i.password {
  color: #7d2ae8;
}
.input_box i.pw_hide {
  right: 0;
  font-size: 18px;
  cursor: pointer;
}
.option_field {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form_container a {
  color: #7d2ae8;
  font-size: 12px;
}
.form_container a:hover {
  text-decoration: underline;
}
.checkbox {
  display: flex;
  column-gap: 8px;
  white-space: nowrap;
}
.checkbox input {
  accent-color: #7d2ae8;
}
.checkbox label {
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: #0b0217;
}
.form_container .button {
  background: #7d2ae8;
  margin-top: 30px;
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
}
.login_signup {
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}

Third, paste the following codes into your script.js file.

const formOpenBtn = document.querySelector("#form-open"),
  home = document.querySelector(".home"),
  formContainer = document.querySelector(".form_container"),
  formCloseBtn = document.querySelector(".form_close"),
  signupBtn = document.querySelector("#signup"),
  loginBtn = document.querySelector("#login"),
  pwShowHide = document.querySelectorAll(".pw_hide");

formOpenBtn.addEventListener("click", () => home.classList.add("show"));
formCloseBtn.addEventListener("click", () => home.classList.remove("show"));

pwShowHide.forEach((icon) => {
  icon.addEventListener("click", () => {
    let getPwInput = icon.parentElement.querySelector("input");
    if (getPwInput.type === "password") {
      getPwInput.type = "text";
      icon.classList.replace("uil-eye-slash", "uil-eye");
    } else {
      getPwInput.type = "password";
      icon.classList.replace("uil-eye", "uil-eye-slash");
    }
  });
});

signupBtn.addEventListener("click", (e) => {
  e.preventDefault();
  formContainer.classList.add("active");
});
loginBtn.addEventListener("click", (e) => {
  e.preventDefault();
  formContainer.classList.remove("active");
});

That’s all, now you’ve successfully created a Website with a Login & Registration Form. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

View Live Demo

 

]]> https://www.codingnepalweb.com/website-login-registration-form-html-css-javascript/feed/ 0 10 Free Responsive Navigation Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/responsive-navigation-bar-html-css-javascript/ https://www.codingnepalweb.com/responsive-navigation-bar-html-css-javascript/#respond Mon, 28 Nov 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4136 10 Free Responsive Navigation Bar in HTML CSS & JavaScript

The Navigation Bar is now regarded by both users and the website’s creator as its most crucial section. Did you know that, despite the website’s importance, it may be created with just a few lines of simple HTML and CSS lines of code?

In this blog, I have provided 10 Free Website Navigation bars in HTML & CSS along with JavaScript code to add more functionality like dark light mode, and responsive features. Even If you are a complete beginner in HTML and CSS then also you will be able to create the given Navigation Bar. Recently, I published 16 Free Login & Registration Forms, which could also enhance your skills in HTML and CSS.

The navigation bar is the area that is positioned at the top of websites or applications to assist users in switching from one page to another. Mainly the navigation bar contains a logo, navigation links, and other functions as per the motto of the website.

Now let’s get into the Navigation Bar list

1. Simple Responsive Navigation Bar in HTML & CSS

Simple Responsive Navigation Bar

This navigation bar was made using responsive HTML and CSS. As you can see in the image, there is a logo and some navigation links. The responsive portion is the one you can see below the navigation bar; when you open it on a tiny screen device, it seems to be that.

If you are a complete beginner and want to create a Responsive Navigation Bar with the basic HTML and CSS lines of code then you should try to create this Navigation Bar. The source code and video tutorial link of this Navigation Bar is given below.

2. Responsive Neumorphism Navigation Bar in HTML & CSS

Responsive Neumorphism Navigation Bar

This Navigation Bar is the most fascinating one I’ve ever made in HTML and CSS. Its distinctive user interface is its most appealing feature. This type of interface is called Neumorphism.

This is also a beginner-friendly Navigation Bar that you create in just HTML and CSS. If you want to make a Navigation Bar in the Neumorohism user interface then this navbar design could be best for you. For the source code and the video tutorial for this Neumorphism Navigation Bar please visit the given links.

3. Navigation Bar with Scrolling to the Top Button

Navigation Bar with Scrolling to Top Button

This is the most useful Navigation Bar you get in this Navigation Bar list. The main feature of this Navigation Bar is that when you click on each navigation link its section appears and also you can move to the top by clicking on the scroll to top button which is aligned at the right bottom.

If you want to create a Navigation Bar with an active link and scroll to the top button then you should definitely try to create this Navigation Bar.

4. Fullscreen Overlay Navigation Bar in HTML & CSS

Fullscreen Overlay Navigation Bar in HTML & CSS

This is the Fullscreen Overlay Navigation Bar I have created in  HTML & CSS. Bascially when you click on the bar icon then the given interface appears with a circular shape animation. I have also added hover animation for those navigation links.

If you want to create a Fullscreen Overlay Navigation Bar in HTML and CSS then you should definitely try to create this animated navigation bar. You can easily create this navigation with basic HTML and CSS lines of code. For the source code and the video tutorial link for this Navigation Menu Bar check out the given links.

5. All Navigation Links Hover Animations in HTML & CSS

All Navigation Links Hover Animations in HTML & CSS

As you can see, I made all of the regularly used navigation links’ hover animations. When I hover over each navigation link in this area, four hover animations are displayed. The first starts from the left and turns around, the second starts from the middle, the third starts from the bottom, and the last one starts from the left and turns around.

If you want to learn to create regularly used modern hover animation on the link then you can try this. With the basic HTML and CSS, you can create this. You can get to the source code and video tutorial from the given link for this navigation link hover animation.

6. Sticky Navigation Bar in HTML & CSS

Sticky Navigation Bar in HTML & CSS

This is the Sticky Navigation Bar which is created in HTML CSS and JavaScript. Bascially, when you scroll the webpage the Navigation gets stuck on the top. We will get to find this type of Sticky Navigation on modern websites mostly.

You must attempt to develop this Sticky Navigation Bar in HTML CSS & JavaScript if you want to learn how to make a navigation bar for a trendy website. You can click on the provided links to see the source code and the video tutorial for this Sticky Navigation Bar.

7. Mobile Navigation Bar in HTML CSS & JavaScript

Animated Navigation Bar in HTML CSS & JavaScript

Typically, mobile devices employ this kind of navigation bar. Through the use of HTML, CSS, and JavaScript, I constructed this tab bar navigation menu bar. Its animated indicator is the key characteristic of this Navigation Bar. Basically, the ringed indicator moves to the selected navigation symbol with lovely animation when you click on it.

If you want to learn to create a Navigation Bar for mobile screen devices and this could be the best for you. You can simply create this Mobile Navigation Bar in HTML CSS and JavaScript. You can click the given links for the source code and the video tutorial for this Mobile Navigation Bar.

8. Navigation Bar with Dark and Light Mode in HTML CSS JS

Navigation Bar with Dark and Light Mode in HTML CSS JS

Additionally, this navigation bar is totally responsive and has functionality for Dark and Light Modes. The selected mode remains unchanged even if the page is refreshed or reopened, which is another fascinating feature I’ve introduced to this navigation. Additionally, there is a search box, which makes this navigation bar more modern and practical.

I used HTML, CSS, and JavaScript to build this navigation bar. Local website storage was used to keep the mode that was chosen. I sincerely hope you like it and try to create it. For the source code and the video tutorial for this navigation bar, please click on the provided links.

9. Dropdown Navigation Bar in HTML CSS & JavaScript

Navigation Bar with Submenu in HTML CSS & JavaScript

You will find a search bar and a submenu in this responsive dropdown navigation bar, just like I have shown in the picture. JavaScript, CSS, and HTML were used to create this navigation. The dropdown menu appears when you hover over the navigation links, and you may access the submenu from there as well.

This can be the ideal strategy for you if you want to develop a responsive drop-down menu bar with submenus. This Dropdown Navigation Bar can be made even with very minimal knowledge of HTML, CSS, and JavaScript. For the source code and video instructions for this drop-down navigation bar, click on the following links.

10. Navigation Bar with Search Box in HTML CSS & JS

Navigation Bar with Search Box in HTML CSS & JavaScript

The finest responsive navigation bar with a long search bar on this list is this one. All the navigation links disappear when you click the search icon, and a lengthy search field appears with lovely animation. You can see the responsive overview of the navigation bar on the left.

This could be the finest example to meet your requirements if you’re looking for a Responsive Navigation Bar with a lengthy search box. This navigation bar can be made using simple lines of HTML, CSS, and JavaScript code. For the source code and a video tutorial for this Responsive Navigation Bar with the search box, click on the provided links.

These were my Top 10 Responsive Navigation Bars, which I developed using HTML, CSS, and JavaScript. I tried to include diverse navigation bars with various functionalities. I hope they meet your needs and that you like them.

There are lots of other Navigation Bars I have created, if you want to create them step by step with me then you can visit My YouTube Channel. As well as the navigation bar there are lots of other Projects you will find there which I have created using HTML CSS & JavaScript.

If you find this blog helpful, don’t forget to share it with others.

]]> https://www.codingnepalweb.com/responsive-navigation-bar-html-css-javascript/feed/ 0 Create Responsive Login & Registration Form in HTML CSS https://www.codingnepalweb.com/create-login-registration-form-html-css/ https://www.codingnepalweb.com/create-login-registration-form-html-css/#comments Sun, 20 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4145 Create Responsive Login & Registration Form in HTML CSS

If you are looking for user-friendly Responsive Login & Registration Form created from HTML & CSS and want to learn to make a Login & Registration Form, this blog is written for you.

In this blog, you will learn how to create a Responsive Login & Registration Form in HTML & CSS. Even if you have a basic knowledge of HTML & CSS then also you will be able to create a Sign in and signup page using basic HTML & CSS code. Recently I uploaded a blog post on Cookies Consent Box Javascript I hope it will help to boost your JavaScript skills.

A Login Form is a Section where users have to input their login details to enter a particular website or application and a Registration Form is a place where users can create their login details to get login details or to register their details for different purposes.

Have a look at the given preview of my Login and Registration Form. As you can see, there are two forms the left one is the Sign-in Form and the right one is the Signup Form. On these forms, there are input fields for email address and password and a button. At the bottom of these two forms, there are two links: one to create a Signup account and another to log in.

I have explained all the HTML and CSS code that I have used to create this Login and Registration Form also if you want to create this Sign in and Signup page with me step by step, then you can watch the video tutorial that I have given below.

Login & Registration Form in HTML CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Login and Registration form. Before getting into the source code file, rather than copying the code or downloading the source code file, I highly recommend you watch the full video tutorial of this login and signup page. By watching the video tutorial, you will be able to create this login and signup page.

As you have seen in the video tutorial of this Login and Registration Form. At first, there was only a Login Page with email, a password field, and a button. Underneath that button, there was a link that redirected us to the signup page, and the Login page disappeared. Similarly, on the Signup up page, there were input fields, a button, and a link that took us to the Login Page.

I hope now you can create this Login and Registration in HTML and CSS. If you want to take all the HTML and CSS code that I have used to create this Login and Signup then all the source codes are given below.

You May Like This:

Login & Registration Form in HTML CSS [Source Codes]

To create Login & Registration Form, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Login & Registration Form by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login & Registration Form</title>
  <!---Custom CSS File--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <input type="checkbox" id="check">
    <div class="login form">
      <header>Login</header>
      <form action="#">
        <input type="text" placeholder="Enter your email">
        <input type="password" placeholder="Enter your password">
        <a href="#">Forgot password?</a>
        <input type="button" class="button" value="Login">
      </form>
      <div class="signup">
        <span class="signup">Don't have an account?
         <label for="check">Signup</label>
        </span>
      </div>
    </div>
    <div class="registration form">
      <header>Signup</header>
      <form action="#">
        <input type="text" placeholder="Enter your email">
        <input type="password" placeholder="Create a password">
        <input type="password" placeholder="Confirm your password">
        <input type="button" class="button" value="Signup">
      </form>
      <div class="signup">
        <span class="signup">Already have an account?
         <label for="check">Login</label>
        </span>
      </div>
    </div>
  </div>
</body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #009579;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 430px;
  width: 100%;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.container .registration{
  display: none;
}
#check:checked ~ .registration{
  display: block;
}
#check:checked ~ .login{
  display: none;
}
#check{
  display: none;
}
.container .form{
  padding: 2rem;
}
.form header{
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1.5rem;
}
 .form input{
   height: 60px;
   width: 100%;
   padding: 0 15px;
   font-size: 17px;
   margin-bottom: 1.3rem;
   border: 1px solid #ddd;
   border-radius: 6px;
   outline: none;
 }
 .form input:focus{
   box-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
.form a{
  font-size: 16px;
  color: #009579;
  text-decoration: none;
}
.form a:hover{
  text-decoration: underline;
}
.form input.button{
  color: #fff;
  background: #009579;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 1.7rem;
  cursor: pointer;
  transition: 0.4s;
}
.form input.button:hover{
  background: #006653;
}
.signup{
  font-size: 17px;
  text-align: center;
}
.signup label{
  color: #009579;
  cursor: pointer;
}
.signup label:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a project on Login & Registration Form. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/create-login-registration-form-html-css/feed/ 1