How to create login page in html and css

Kashif May 21, 2021

 

How to create login page in html and css

In the following article, we will learn how to create login page in html and css. This topic is for people who want to pursue their career as a web designer and are keen to design some cool and interesting sites. We will design a simple login page to get your grip on web designing.

Before we start, we should keep the following things in mind:

What is a login Page?

A login page serves as a gateway to the website, which requires user identification. Usually, the identification can be given by a username or a password.

Why Do We Need a login Page?

 When we want to track user’s actions, the login performs a beneficial role in security and authentication. The user is allowed to access the content of the site only if he has provided identification information. 

Brainstorming to create a simple Login form with Html and CSS:

Whenever we intend to build something, an ideal picture of our notion is created in our minds. We need to sketch the design generated in our mind but in a proper pictorial form using different tools like adobe photoshop. It is called prototyping. We have to keep in mind that prototyping is necessary and can cause failure if done wrong. Let’s look at our design:

login page in html

By looking at our design, our login page should have:

  • A big image to represent the login page.
  • Heading that identifies “Login”:
  • Username field:
  • Password field:
  • A button to submit the user’s credentials to the site. 
  • Sign-up link: if somehow the user doesn’t have any account to log in, he can simply click the signup link to create an account to log in.
  • Login with social media: if the user does not want to waste his time in entering his information, he can simply log in by social media accounts such as Facebook, Twitter, Gmail, etc.

We will go through each of them step by step.

Tools Required:

  • Visual Studio or any text editor
  • A browser to preview your output.

Creating Files:

  • Create a new folder named “login”
  • Open “login” folder in visual studio code.
  • Create a new file in the same folder named “index.html”.
  • Create another file in the same folder with the name “style.css”.

HTML Markup to create a simple Login form with Html and CSS

  • Now open  “index.html” in Visual Studio code.
  • Add a <head> tag to your html file.
  • Link your CSS file with HTML by using <link:css> tag as follows: 


<!DOCTYPE html>
<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">
  
    <link rel="stylesheet" href="style.css">
</head>

  • Add <title> tag inside your <head> tag and give it a title “Login”. 
<title>Document</title>
  • Add a <body> tag to your HTML file.
  • Add a <div> tag and add a class  "main" inside <div> tag.

1. Adding Big Image:
  • Add another <div> tag with a class “image” inside div “main” to add an image to our page.
  • Now to add an image, use <img> tag inside our div "image" and add any image from your desktop. Here is the syntax for the image tag: 

<body> 
 <div class="main">
    <div class="image">
     <img src="bgp2.png" >
    </div>
</div>
</body>

2. Division for Content:
  • Create a <div> tag with a class "content". This is where we will add all essentials elements to our login page.
3. Adding some Heading:
  • Use any of the six heading tags depending on your choice (ranges from 1 to 6) to make a solid bold heading.
4. Adding Username and password fields:
  • Add <form> tag inside div "Content" under the heading<h2> tag. We will create all our form elements like text fields, checkboxes, etc inside our form tag.
  • Add a <div> tag with a class named "inputbox". We will use this div three times as we have to add three form elements i.e. username field, password field, and a submit button.
  • Use <span> tag to indicate the purpose of the form element. The <span> tag is just like a label to represent something in a form.
  • To create a text field for username, set the "type" attribute of your input tag to"text".
  • Use the div “inputbox” again for the password field. 
  • Use <span> tag for indicating password field.
  • To add password field, simply use <input> tag. We will set the "type" attribute of our input tag to "password" as demonstrated in the below code. 

<div class="content">
  <h2>LOGIN</h2>
<form>
     <div class="inputbox">
        <span>Username</span>
        <input type="text">
     </div>
     <div class="inputbox">                 
      <span>Password</span>                  
      <input type="password">
    </div>
</form>

5. Adding a login button :
  • Use the same div "inputbox" for creating a login button.
  • Use the <input> tag to add a submit button. The type used in this input tag is “submit” and we have also set the value attribute of the button to "log in".  

<div class="content">
  <h2>LOGIN</h2>
<form>
     <div class="inputbox">
        <span>Username</span>
        <input type="text">
     </div>
     <div class="inputbox">                 
      <span>Password</span>                  
      <input type="password">
    </div>
    <div class="inputbox">
       <input type="submit" value="login">
    </div>
</form>

6. Link for Sign Up:
  • Use anchor tag to display a signup link to allow the user to register an account if he is not registered already. 

 <p>Do not have an account?&nbsp;&nbsp;<a href="">Sign up</a></p>

7. Adding icons for logging in with Social Media Profiles:
  • To add social media icons to our page we can use font awesome toolkit. It has a wide variety of icons that enhances the design of our page. To use them just simply add the font awesome CDN to your <head> tag. 

  <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
      integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
      crossorigin="anonymous"/>

  • Add <div> tag with a class  named “social”.
  • Display a "login with social media message" with a paragraph <p> tag.
  • Create an unordered list using <ul> tag and add three  <li> items inside it. Finally add social media icons using Html <i> tag. We can use different available classes to add the desired icon from the font awesome toolkit. Here is how it's done. 

<div class="social">
            <p>Login with social media</p>
            <ul>
              <li><i class="fab fa-facebook-f fa-2x"></i></li>
              <li><i class="fab fa-twitter fa-2x"></i></li>
              <li><i class="fas fa-envelope fa-2x"></i></li>
            </ul>

CSS styling to create a simple Login form with Html and CSS


1. Import fonts:
  • We will use google fonts for adding some unique and cool fonts to our webpage. To use a font, just simply find any font on google fonts, copy its link and add it to your CSS by using the import rule. 
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
2. Default CSS reset:
  • Open your “style.css” in visual Studio Code.
  • Use * as a universal selector for our page. It is useful to set properties to default values throughout our webpage. 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}
* a {
  text-decoration: none;
}

3. Styling Main Class:
  • First, we will style the div "main" where all our login page elements are added.
  • Now we will style our "image" div where our big image is placed. 
  • Finally, we will style our image which is placed inside our “image” div. Here we are using compound selectors to select the elements more specifically. 

.main {
  width: 100%;
  position: relative;
  display: flex;
  height: 100vh;
}


.main .image {
  position: relative;
  width: 50%;
  height: 100%;
  background: #13c28ea6;
}


.main .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. Styling Our Content Class:
  • First, we will put some shadows on our "content" container. We will use the CSS box-shadow property to add shadows in all four dimensions.
  • We will style our "content" div which is present inside our "main" div.
  • We will adjust the width of our form which is placed in our “content” div. 
.content {
  box-shadow: 2px 2px 5px 20px #13c28ea6;
}
.main .content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.main .content form {
  width: 50%;
}

Main Heading:
  • Next, we will style the <h2> heading placed in “content” div.
  • We will style our "spans" which serve as labels for our Html form elements. 
.content h2 {
  color: #607d8b;
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 20px;
  border-bottom: 4px solid #13c28def;
  display: inline-block;
  letter-spacing: 1px;
}

 .content span {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  display: inline-block;
  color: #607d8b;
}

Attribute selectors:
The Attribute selector in CSS allows us to select different Html Elements by using their specified attributes even If they do not have any id or class. It is very useful when it comes to styling forms or Html elements lacking ids or classes.

5. Styling Html form elements:
  • In this part, we will style all Html form elements.
  • We will set up our login button. We will select the button using the input "type" attribute with the help of the CSS attribute selector. 
  • To add a hover effect to our submit button, we will use the CSS hover selector.  
.content input[type="submit"] {
  background: #13c28def;
  color: #fff;
  outline: none;
  border: none;
  font-weight: 500;
  cursor: pointer;
}
.content input[type="submit"]:hover {
  background: #05af7cfb;
}

7. Social Media login:
  • In the last part of this article, we will style the social media icons that we used earlier from the font awesome toolkit.  
.social {
  text-align: center;
}
.social p {
  margin-bottom: 20px;
}
.social ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
}


.social ul li:hover {
  color: #13c28def;
}

So here is how to create login page in HTML and CSS. I hope you liked it. We have to keep in mind that this is a simple design. We can add more complexity if we want to. The topic has been explained in a much-simplified form. If you have any questions regarding this topic, let me know in the comments section down below. Happy coding!
Tags

Post a Comment

0 Comments