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:
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; }
[…] How to create Login Signup Page Using Simple HTML & CSS. […]
[…] How to create Login Signup Page Using Simple HTML & CSS. | CWN […]
[…] How to create Login Signup Page Using Simple HTML & CSS. – CWN […]
Keep this going please, great job!
I am regular visitor, how are you everybody? This paragraph posted
at this website is genuinely good.
My blog post; Lapak Satria
When someone writes an paragraph he/she retains the thought of a
user in his/her mind that how a user can know it. Therefore that’s why this paragraph is
perfect. Thanks!
Look into my blog post: Jasa SEO Purwokerto
Excellent web site. Lots of useful info here. I am sending
it to a few friends ans also sharing in delicious. And naturally,
thanks on your sweat!
My web page … Lapak Satria
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
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!
This piece of writing is truly a fastidious one
it helps new internet viewers, who are wishing in favor
of blogging.
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!
Piece of writing writing is also a fun, if you be acquainted with
after that you can write otherwise it is difficult to
write.
Excellent article. I am experiencing many of these issues as well..
Visit my web-site :: Rokok
Awesome post.
Also visit my blog post: Rokok
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