How to create Login Signup Page Using Simple HTML & CSS.

By
codewithnepal
-
15

Hello Developers, Today on this weblog you’ll discover ways to create Login and SignUp with the use of the most effective HTML & CSS. Now I’m going to create a Login SignUp Page.

I’m sure you’ve seen many HTML login form templates on many websites. A simple login form is a set of inputs used to authenticate or authenticate a user before accessing a private page. The login form contains one field for the username and another for the password.

In this layout [HTML CSS Login Form], as you can see in the preview image, this is a stunning transparent login form built with HTML CSS and JavaScript. JavaScript is only used to switch between showing or hiding the password. login form has an image, shape, text, and social media icons. You can modify this form according to your requirements if you have basic knowledge of HTML and CSS.


This is a login form without a Unity backend. You can use a server-side language like PHP to make this login form active and dynamic. If you don’t understand what I’m talking about, you can read the complete blog tutorial in this form [HTML CSS Login Form]

You Might Like this Blog:

Creative Neumorphism ID tag

To create this program: (Login SignUp Page). Initially you need to create two HTML files (.html) and another CSS file (.css).

After creating these files, just paste the following codes into your VS IDE code sample and two files one HTML called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

Step 1:

<!DOCTYPE html>
<!-- Created By CodeWithNepal(codewithnepal.com) -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>CodeWithNepal Signup Template </title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="bg-img">
         <div class="content">
            <header>Login Form by CWN</header>
            <form action="#">
               <div class="field">
                  <span class="fa fa-user"></span>
                  <input type="text" required placeholder="Email or Phone">
               </div>
               <div class="field space">
                  <span class="fa fa-lock"></span>
                  <input type="password" class="pass-key" required placeholder="Password">
                  <span class="show">SHOW</span>
               </div>
               <div class="pass">
                  <a href="#">Forgot Password?</a>
               </div>
               <div class="field">
                  <input type="submit" value="LOGIN">
               </div>
            </form>
            <div class="login">
               Or login with
            </div>
            <div class="links">
               <div class="facebook">
                  <i class="fab fa-facebook-f"><span>Facebook</span></i>
               </div>
               <div class="instagram">
                  <i class="fab fa-instagram"><span>Instagram</span></i>
               </div>
            </div>
            <div class="signup">
               Don't have account?
               <a href="#">Signup Now</a>
               
            </div>
                <div class="copyright">
                    <i class="footer"><span>By CodeWithNepal</span></i>
         
            </div>
         </div>  
      </div>
      <script>
         const pass_field = document.querySelector('.pass-key');
         const showBtn = document.querySelector('.show');
         showBtn.addEventListener('click', function(){
          if(pass_field.type === "password"){
            pass_field.type = "text";
            showBtn.textContent = "HIDE";
            showBtn.style.color = "#3498db";
          }else{
            pass_field.type = "password";
            showBtn.textContent = "SHOW";
            showBtn.style.color = "#222";
          }
         });
      </script>
   </body>
</html>

Step 2:

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}
.bg-img{
  background: url('bg.jpg');
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.bg-img:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(9, 22, 192, 0.7);
}
.content{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  text-align: center;
  padding: 60px 32px;
  width: 370px;
  transform: translate(-50%,-50%);
  background: rgba(255,255,255,0.04);
  box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
  color: white;
  font-size: 33px;
  font-weight: 600;
  margin: 0 0 35px 0;
  font-family: 'Montserrat',sans-serif;
}
.field{
  position: relative;
  height: 45px;
  width: 100%;
  display: flex;
  background: rgba(255,255,255,0.94);
}
.field span{
  color: #222;
  width: 40px;
  line-height: 45px;
}
.field input{
  height: 100%;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #222;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.space{
  margin-top: 16px;
}
.show{
  position: absolute;
  right: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: none;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
  display: block;
}
.pass{
  text-align: left;
  margin: 10px 0;
}
.pass a{
  color: white;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
}
.pass:hover a{
  text-decoration: underline;
}
.field input[type="submit"]{
  background: #3498db;
  border: 1px solid #2691d9;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
  background: #2691d9;
}
.login{
  color: white;
  margin: 20px 0;
  font-family: 'Poppins',sans-serif;
}
.links{
  display: flex;
  cursor: pointer;
  color: white;
  margin: 0 0 20px 0;
}
.facebook,.instagram{
  width: 100%;
  height: 45px;
  line-height: 45px;
  margin-left: 10px;
}
.facebook{
  margin-left: 0;
  background: #4267B2;
  border: 1px solid #3e61a8;
}
.instagram{
  background: #E1306C;
  border: 1px solid #df2060;
}
.facebook:hover{
  background: #3e61a8;
}
.instagram:hover{
  background: #df2060;
}
.links i{
  font-size: 17px;
}
i span{
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 16px;
  font-family: 'Poppins',sans-serif;
}
.signup{
  font-size: 15px;
  color: white;
  font-family: 'Poppins',sans-serif;
}

.signup a{
  color: #ffffff;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(9, 22, 192, 0.7);
  color: white;
  text-align: center;
}

Output :

RELATED ARTICLESMORE FROM AUTHOR

15 COMMENTS

  8. May I just say what a relief to find an individual who truly
    knows what they’re discussing online. You definitely understand how to bring a problem
    to light and make it important. More and more people must read this and understand this side of your story.
    I was surprised you’re not more popular since you surely have the gift.

    Here is my site: Lapak Satria

  9. Please let me know if you’re looking for a author for your blog.
    You have some really great articles and I think I would be a good asset.

    If you ever want to take some of the load off, I’d love to write some articles for
    your blog in exchange for a link back to mine. Please
    send me an e-mail if interested. Regards!

  11. It is appropriate time to make a few plans for
    the longer term and it is time to be happy. I’ve learn this submit and if I may just I desire to recommend you
    some interesting issues or suggestions. Maybe you can write subsequent
    articles relating to this article. I want to learn even more
    issues about it!

  15. I relish, result in I found just what I used
    to be looking for. You have ended my four day lengthy hunt!
    God Bless you man. Have a nice day. Bye

    Look at my site … Rokok

LEAVE A REPLY

Please enter your comment!
Please enter your name here