Simple Login Form

Enhance user experience on your website with a simple login form. Learn how to create a user-friendly login form layout that facilitates seamless access for users, improving usability and engagement.

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<div class="login-card">
  <h2>Login</h2>
  <h3>Enter your credentials</h3>
  <form class="login-form">
    <input type="text" placeholder="Username" />
    <input type="password" placeholder="Password" />
    <a href="https://website.com">Forgot your password?</a>
    <button type="submit">LOGIN</button>
  </form>
</div>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

@keyframes rotate {
  100% {
    background-position: 15% 50%;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-1/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 6s infinite alternate linear;
}

@media (width >= 500px) {
  body {
    padding: 0;
  }
}

.login-card {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 20px;
  padding: 70px 30px 44px;
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
}

@media (width >= 500px) {
  .login-card {
    margin: 0;
    width: 400px;
  }
}

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 12px;
}

.login-card > h3 {
  color: rgba(0, 0, 0, 0.38);
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 1rem;
}

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}

.login-form > input,
.login-form > button {
  width: 100%;
  height: 56px;
}

.login-form > input {
  border: 2px solid #ebebeb;
  font-family: inherit;
  font-size: 16px;
  padding: 0 16px;
}

.login-form > button {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 0.5rem;
  background: #216ce7;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

.login-form > a {
  color: #216ce7;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  margin-bottom: 6px;
}

```
No need of JavaScript
```

A simple login form is a fundamental component for any website that requires user authentication. This tutorial will guide you through creating and customizing a simple login form using HTML and CSS.

Step 1: Copy the Code Snippet

Begin by copying the provided HTML and CSS code snippets. This includes the structure and styles required to create a functional login form.

Step 2: Link CSS

Ensure the styles.css file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
```

Step 3: Customize and Make it Yours

To make the simple login form your own, you can customize various aspects such as:

Text and Labels: Modify the text content in the HTML file to match your website's language and tone.
CSS Styles: Adjust the styles in styles.css to change dimensions, colors, fonts, and other properties to match your website's design.

By following these steps, you can implement and personalize a simple login form using HTML and CSS, enhancing the functionality and user experience on your website.

Code Explanation

HTML Code

`<div class="login-card">`:

<div class="login-card">

This div element acts as a container for the entire login card component. The login-card class can be used to style this container with CSS.

Main Heading (`<h2>`):

<h2>Login</h2>

An h2 element that provides the main heading of the login card, indicating the purpose of the form (Login).

Subheading (`<h3>`):

<h3>Enter your credentials</h3>

An h3 element that provides additional context or instructions for the user (to enter their credentials).

Form Container (`<form class="login-form">`):

<form class="login-form">

A form element with a class of login-form that contains the input fields and submit button. The class can be used for styling and possibly JavaScript functionality.

Username Input:

<input type="text" placeholder="Username" />

An input element of type text for the user to enter their username.
The placeholder attribute provides a hint to the user about what to enter in the field.

Password Input:

<input type="password" placeholder="Password" />

An input element of type password for the user to enter their password.
The placeholder attribute provides a hint to the user about what to enter in the field.
The password type masks the input, showing dots or asterisks instead of the actual characters.

Forgot Password Link:

<a href="https://website.com">Forgot your password?</a>

An a (anchor) element that provides a link for users who have forgotten their password. Clicking this link will navigate the user to the specified URL (https://website.com).
The text "Forgot your password?" indicates the purpose of the link.

Submit Button:

<button type="submit">LOGIN</button>

A button element of type submit used to submit the form data when clicked.
The text "LOGIN" indicates the action that will be taken when the button is pressed.

Closing Form and Div Tags:

</form>
</div>

The closing </form> tag marks the end of the form element.
The closing </div> tag marks the end of the outer container div.

CSS Code

Universal Selector (*):

* {
  box-sizing: border-box;
}

Ensures that the box-sizing property for all elements is set to border-box, which includes padding and border in the element's total width and height.

Height Settings for html, body, and .wrapper:

.wrapper {
  height: 100%;
}

Sets the height of the html, body, and .wrapper elements to 100% of the viewport height.

Keyframes for Rotate Animation:

@keyframes rotate {
  100% {
    background-position: 15% 50%;
  }
}

Defines a keyframe animation named rotate that moves the background position to 15% 50% over the course of the animation.

Body Styling:

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-1/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 6s infinite alternate linear;
}

display: grid: Centers the content within the body using CSS Grid.
place-items: center: Aligns the content both horizontally and vertically.
margin: 0: Removes default margin.
padding: 0 24px: Adds horizontal padding.
background-image: Sets a background image.
background-repeat: no-repeat: Ensures the background image does not repeat.
background-size: cover: Ensures the background image covers the entire viewport.
font-family: "Poppins": Sets the font family to "Poppins".
color: #000: Sets the text color to black.
animation: rotate 6s infinite alternate linear: Applies the rotate animation with a duration of 6 seconds, infinitely alternating in a linear fashion.

Media Query for body:

@media (width >= 500px) {
  body {
    padding: 0;
  }
}

Removes the padding when the viewport width is 500px or more.

Login Card Container (.login-card):

.login-card {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 20px;
  padding: 70px 30px 44px;
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
}

position: relative: Positions the element relative to its normal position.
z-index: 3: Sets the stacking order.
width: 100%: Sets the width to 100% of the parent container.
margin: 0 20px: Adds horizontal margin.
padding: 70px 30px 44px: Adds padding inside the element.
border-radius: 1.25rem: Rounds the corners.
background: #fff: Sets the background color to white.
text-align: center: Centers the text.

Media Query for .login-card:

@media (width >= 500px) {
  .login-card {
    margin: 0;
    width: 400px;
  }
}

Adjusts the margin and width of the .login-card when the viewport width is 500px or more.

Main Heading (.login-card > h2):

.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 12px;
}

font-size: 36px: Sets the font size.
font-weight: 600: Sets the font weight.
margin: 0 0 12px: Adds bottom margin.

Subheading (.login-card > h3):

.login-card > h3 {
  color: rgba(0, 0, 0, 0.38);
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 1rem;
}

color: rgba(0, 0, 0, 0.38): Sets the text color with transparency.
margin: 0 0 30px: Adds bottom margin.
font-weight: 500: Sets the font weight.
font-size: 1rem: Sets the font size.

Login Form Container (.login-form):

.login-form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}

width: 100%: Sets the width to 100%.
margin: 0: Removes default margin.
display: grid: Uses CSS Grid for layout.
gap: 16px: Adds space between grid items.

Input and Button Elements (.login-form > input, .login-form > button):

Copy code
.login-form > input,
.login-form > button {
  width: 100%;
  height: 56px;
}

width: 100%: Sets the width to 100%.
height: 56px: Sets the height.

Input Field (.login-form > input):

.login-form > input {
  border: 2px solid #ebebeb;
  font-family: inherit;
  font-size: 16px;
  padding: 0 16px;
}

border: 2px solid #ebebeb: Sets the border color and width.
font-family: inherit: Inherits the font family from the parent.
font-size: 16px: Sets the font size.
padding: 0 16px: Adds horizontal padding.

Button (.login-form > button):

.login-form > button {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 0.5rem;
  background: #216ce7;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}

cursor: pointer: Changes the cursor to a pointer on hover.
border-radius: 0.5rem: Rounds the corners.
background: #216ce7: Sets the background color.
color: #f9f9f9: Sets the text color.
border: 0: Removes the border.
font-family: inherit: Inherits the font family.
font-size: 1rem: Sets the font size.
font-weight: 600: Sets the font weight.
text-align: center: Centers the text.
letter-spacing: 2px: Adds letter spacing.
transition: all 0.375s: Adds a transition effect.

Link (.login-form > a):

.login-form > a {
  color: #216ce7;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  margin-bottom: 6px;
}

color: #216ce7: Sets the text color.
font-size: 1rem: Sets the font size.
text-align: left: Aligns the text to the left.
text-decoration: none: Removes underline from the text.
margin-bottom: 6px: Adds bottom margin.