Login Form Page Using HTML And CSS

How To Create A Login Form Page Using HTML And CSS

Login Form Page Using HTML And CSS

Hello there, readers! In this article, we’ll show you how to create a login form page. Reading this blog will teach you how to use HTML and CSS to create your own login form with different styling.

Login Form Page Using HTML And CSS
Login Form Page Using HTML And CSS

 

A login page is one of the most important pages on a website or app since it allows authorised users to access the entire site or a subset of the site. The login or sign-up page is the initial page that users view on login-protected sites. A signup or login page should be visually appealing, user-friendly, and easy to use.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

I hope now you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: Setting Up the Structure (HTML)

<!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" />
    <script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>
    <title>Login Form</title>
</head>

<body>
    <div class="container">
        <div class="screen">
            <div class="screen__content">
                <form class="login">
                    <div class="login__field">
                        <i class="login__icon fas fa-user"></i>
                        <input type="text" class="login__input" placeholder="User name / Email">
                    </div>
                    <div class="login__field">
                        <i class="login__icon fas fa-lock"></i>
                        <input type="password" class="login__input" placeholder="Password">
                    </div>
                    <button class="button login__submit">
                        <span class="button__text">Log In Now</span>
                        <i class="button__icon fas fa-chevron-right"></i>
                    </button>
                </form>
                <div class="social-login">
                    <h3>log in via</h3>
                    <div class="social-icons">
                        <a href="#" class="social-login__icon fab fa-instagram"></a>
                        <a href="#" class="social-login__icon fab fa-facebook"></a>
                        <a href="#" class="social-login__icon fab fa-twitter"></a>
                    </div>
                </div>
            </div>
            <div class="screen__background">
                <span class="screen__background__shape screen__background__shape4"></span>
                <span class="screen__background__shape screen__background__shape3"></span>
                <span class="screen__background__shape screen__background__shape2"></span>
                <span class="screen__background__shape screen__background__shape1"></span>
            </div>
        </div>
    </div>
</body>

</html>

To ensure excellent code organisation, we will generate two separate HTML and CSS files in our code editor. Our login form will be built with HTML and CSS. Let’s now add the CSS link to our HTML. We’ll also be using font icons inside our login form, so we’ll need to provide a link to “font-awesome” inside the head section to embed those symbols.

Create A Travel/Tourism Website Using HTML and CSS

<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>

Adding the Structure for our login form:

  • First, we’ll use the div tag to build a container for our login form. Now, we’ll use the div tag to build a container for the screen content.
  • Now using the <form> tag we will create the main element of our form tag.
  • Now we’ll make a div section, and inside it, we’ll add a user symbol with the font fantastic class, as well as a field for the username with the input tag of type “text.”
  • Similarly, under the div tag, we will build a container for our password. We will add a lock icon, as well as an input tag with the type “password” to allow users to enter their passwords inside our login form.
  • Now we will create a login now button and along with that we will add a right arrow inside our login button
  • We will now create a div container to include the social link within our login form, and we will use the font-awesome classes to include the Instagram, Facebook, and Twitter links within our login form.

We don’t need anything else to develop the structure for our login form. We’ll style our dictionary app now that we’ve learned how to use CSS. But first, let’s have a peek at our framework.

Output

Login Form Page Using HTML And CSS
Login Form Page Using HTML And CSS

Step2: Adding CSS Code

In your stylesheet, copy and paste the CSS code provided below. To add styling to our login page we will use the class selector.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Raleway, sans-serif;
}

body {
  background: linear-gradient(90deg, #c7c5f4, #776bcc);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.screen {
  background: linear-gradient(90deg, #5d54a4, #7c78b8);
  position: relative;
  height: 600px;
  width: 360px;
  box-shadow: 0px 0px 24px #5c5696;
}

.screen__content {
  z-index: 1;
  position: relative;
  height: 100%;
}

.screen__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

.screen__background__shape {
  transform: rotate(45deg);
  position: absolute;
}

.screen__background__shape1 {
  height: 520px;
  width: 520px;
  background: #fff;
  top: -50px;
  right: 120px;
  border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
  height: 220px;
  width: 220px;
  background: #6c63ac;
  top: -172px;
  right: 0;
  border-radius: 32px;
}

.screen__background__shape3 {
  height: 540px;
  width: 190px;
  background: linear-gradient(270deg, #5d54a4, #6a679e);
  top: -24px;
  right: 0;
  border-radius: 32px;
}

.screen__background__shape4 {
  height: 400px;
  width: 200px;
  background: #7e7bb9;
  top: 420px;
  right: 50px;
  border-radius: 60px;
}

.login {
  width: 320px;
  padding: 30px;
  padding-top: 156px;
}

.login__field {
  padding: 20px 0px;
  position: relative;
}

.login__icon {
  position: absolute;
  top: 30px;
  color: #7875b5;
}

.login__input {
  border: none;
  border-bottom: 2px solid #d1d1d4;
  background: none;
  padding: 10px;
  padding-left: 24px;
  font-weight: 700;
  width: 75%;
  transition: 0.2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
  outline: none;
  border-bottom-color: #6a679e;
}

.login__submit {
  background: #fff;
  font-size: 14px;
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 26px;
  border: 1px solid #d4d3e8;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  width: 100%;
  color: #4c489d;
  box-shadow: 0px 2px 2px #5c5696;
  cursor: pointer;
  transition: 0.2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
  border-color: #6a679e;
  outline: none;
}

.button__icon {
  font-size: 24px;
  margin-left: auto;
  color: #7875b5;
}

.social-login {
  position: absolute;
  height: 140px;
  width: 160px;
  text-align: center;
  bottom: 0px;
  right: 0px;
  color: #fff;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-login__icon {
  padding: 20px 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0px 0px 8px #7875b5;
}

.social-login__icon:hover {
  transform: scale(1.5);
}

Step1: We will first use the import link to import some new fonts from Google Fonts, and then use the font-family attribute to modify the fonts from the default fonts.

Restaurant Website Using HTML and CSS

Now, we’ll utilise the universal selector property to set the box-sizing to “border-box,” the margin and padding to “zero,” and the font family to “Raleway” as our new body fonts.

We will add a linear gradient backdrop to our body, and we will do it by setting the background property to a combination of light and dark purple.

@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Raleway, sans-serif;
}

body {
  background: linear-gradient(90deg, #c7c5f4, #776bcc);
}
Login Form Page Using HTML And CSS
Login Form Page Using HTML And CSS

Step2: Now using the universal selector (.container) we will set the display of our login form container  display as “flex” and using the align item property we will align all the items to the center and using the minimum height property we will set the minimum height of our container as “100vh”.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Step3:Now, we’ll use the class selector (.screen) to add a dual design to our login, with the backdrop as a linear gradient of light and dark purple and the width and height of the screen container set to 600px and 360px, respectively.

Weather App Using Html,Css And JavaScript 

Now, we’ll use the screen background class to make their position absolute and the top, left, right, and bottom spacing “zero.” We will now create two shapes inside our screen background container: shape 1 and shape 2. We will set the width and height of our screen background using the height and width properties.

.screen {
  background: linear-gradient(90deg, #5d54a4, #7c78b8);
  position: relative;
  height: 600px;
  width: 360px;
  box-shadow: 0px 0px 24px #5c5696;
}

.screen__content {
  z-index: 1;
  position: relative;
  height: 100%;
}

.screen__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

.screen__background__shape {
  transform: rotate(45deg);
  position: absolute;
}

.screen__background__shape1 {
  height: 520px;
  width: 520px;
  background: #fff;
  top: -50px;
  right: 120px;
  border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
  height: 220px;
  width: 220px;
  background: #6c63ac;
  top: -172px;
  right: 0;
  border-radius: 32px;
}

.screen__background__shape3 {
  height: 540px;
  width: 190px;
  background: linear-gradient(270deg, #5d54a4, #6a679e);
  top: -24px;
  right: 0;
  border-radius: 32px;
}

.screen__background__shape4 {
  height: 400px;
  width: 200px;
  background: #7e7bb9;
  top: 420px;
  right: 50px;
  border-radius: 60px;
}

Login Form Page Using HTML And CSS

Step4: We will now style our login elements. The width is set to 320px using the class selector (.login), the padding is set to 30px, and the padding-top attribute is set to 156px.

10+ HTML CSS Projects For Beginners (Source Code)

We will set the position of the login symbol to absolute, and we will leave a space of 30 px from the top using the top property. We’ll use the colour attribute to modify the icon’s colour to purple.

ADVERTISEMENT

We’ll style the password and button in the same way we did the username text; simply go through the code once and you’ll get the concept.

ADVERTISEMENT

.login {
  width: 320px;
  padding: 30px;
  padding-top: 156px;
}

.login__field {
  padding: 20px 0px;
  position: relative;
}

.login__icon {
  position: absolute;
  top: 30px;
  color: #7875b5;
}

.login__input {
  border: none;
  border-bottom: 2px solid #d1d1d4;
  background: none;
  padding: 10px;
  padding-left: 24px;
  font-weight: 700;
  width: 75%;
  transition: 0.2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
  outline: none;
  border-bottom-color: #6a679e;
}

.login__submit {
  background: #fff;
  font-size: 14px;
  margin-top: 30px;
  padding: 16px 20px;
  border-radius: 26px;
  border: 1px solid #d4d3e8;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  width: 100%;
  color: #4c489d;
  box-shadow: 0px 2px 2px #5c5696;
  cursor: pointer;
  transition: 0.2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
  border-color: #6a679e;
  outline: none;
}

.button__icon {
  font-size: 24px;
  margin-left: auto;
  color: #7875b5;
}

.social-login {
  position: absolute;
  height: 140px;
  width: 160px;
  text-align: center;
  bottom: 0px;
  right: 0px;
  color: #fff;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-login__icon {
  padding: 20px 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0px 0px 8px #7875b5;
}

.social-login__icon:hover {
  transform: scale(1.5);
}
Login Form Page Using HTML And CSS
Login Form Page Using HTML And CSS

 

ADVERTISEMENT

Now we’ve completed our login form using HTML & CSS. I hope you understood the whole project. Let’s take a look at our Live Preview.

ADVERTISEMENT

Responsive Gym Website Using HTML ,CSS & JavaScript

ADVERTISEMENT

Output:

Live Preview Of Login Form Using HTML & CSS


Now We have Successfully created our Login Form Using HTML & CSS. You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @Arun
Code By: @Mohit


Tags: ,

Leave a Reply