Login Page with Avatar

Elevate your login page with avatar integration. Learn how to create a personalized login experience by allowing users to associate avatars with their accounts.

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" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />



<div class="login">
  <div class="avatar">
    <img src="https://github.com/frontend-joe/css-logins/blob/main/login-3/avatar.png?raw=true" />
  </div>
  <h2>Login</h2>
  <h3>Welcome back Kelly</h3>

  <form class="login-form">
    <div class="textbox">
      <input type="email" placeholder="Username" />
      <span class="material-symbols-outlined"> account_circle </span>
    </div>
    <div class="textbox">
      <input type="password" placeholder="Password" />
      <span class="material-symbols-outlined"> lock </span>
    </div>
    <button type="submit">LOGIN</button>
    <a href="https://website.com">Forgot your credentials?</a>
  </form>
</div>

* {
  box-sizing: border-box;
}

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

@keyframes gradient {
  100% {
    background-size: 4000px 1000px;
  }
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-3/bg.svg");
  background-size: 2000px 1000px;
  background-position: -500px 0;
  color: #f9f9f9;
  font-family: "Poppins";
  animation: gradient 10s infinite alternate linear;
}

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

.login {
  width: 90%;
  padding: 70px 30px 44px;
  border-radius: 22px;
  background: #161616;
  text-align: center;
  margin: 20px 0;
}

@media (width >= 450px) {
  .login {
    width: 380px;
  }
}

.avatar {
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(-45deg, #157ae1, #c7a1ff);
  padding: 2px;
  width: 120px;
  height: 120px;
}

.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;

  border: 4px solid #161616;
}

.login > h2 {
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 4px;
}

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

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

.textbox {
  width: 100%;
  position: relative;
}

.textbox span {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  color: rgba(255, 255, 255, 0.38);
}

.login-form input,
.login-form button {
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  border-radius: 8px;
}

.login-form input {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 18px;
  padding: 0 20px 0 50px;
  color: inherit;
}

.login-form input:focus {
  border-color: #157ae1;
}

.login-form input:focus ~ span {
  color: #157ae1;
}

.login-form button {
  cursor: pointer;
  background: #157ae1;
  color: #f9f9f9;
  border: 0;
  font-weight: 600;
  letter-spacing: 2px;
}

.login-form a {
  color: #157ae1;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}

```
No need of JavaScript
```

A login page with an avatar adds a personal touch to your website's user authentication interface. This tutorial will guide you through creating and customizing a login page with an avatar 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 page with an avatar.

Step 2: Link CSS and Material Icons

Ensure the styles.css file and Material Icons are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and Material Icons:
```
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0">
```

Step 3: Customize and Make it Yours

To make the login page with an avatar 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.
Avatar Icon: Change the Material Icons symbol to better represent your brand or user interface requirements.

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

Code Explanation

HTML Code

Main Container (`<div class="login">`):

<div class="login">

This div serves as the main container for the login card, wrapping all the content inside it.

Avatar Section (`<div class="avatar">`):

<div class="avatar">
  <img src="https://github.com/frontend-joe/css-logins/blob/main/login-3/avatar.png?raw=true" />
</div>

<div class="avatar">: A div specifically for the avatar image.
<img src="...">: An image element that displays the avatar. The src attribute contains the URL to the avatar image.

Headings (`<h2>` and `<h3>`):

<h2>Login</h2>
<h3>Welcome back Kelly</h3>

<h2>Login</h2>: A level-2 heading displaying the text "Login".
<h3>Welcome back Kelly</h3>: A level-3 heading displaying a welcoming message.

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

<form class="login-form">

This form element contains the input fields and the login button. The class login-form likely applies specific styles to the form.

Username Input Field (`<div class="textbox">` with type="email"):

<div class="textbox">
  <input type="email" placeholder="Username" />
  <span class="material-symbols-outlined"> account_circle </span>
</div>

<div class="textbox">: A div that groups the input field and the icon together.
<input type="email" placeholder="Username" />: An input field for the username, styled to accept email addresses.
<span class="material-symbols-outlined"> account_circle </span>: A span element that displays an icon (likely from Google's Material Icons library) representing a user account.

Password Input Field (`<div class="textbox">` with type="password"):

<div class="textbox">
  <input type="password" placeholder="Password" />
  <span class="material-symbols-outlined"> lock </span>
</div>

<input type="password" placeholder="Password" />: An input field for the password.
<span class="material-symbols-outlined"> lock </span>: A span element that displays an icon representing a lock.

Login Button (`<button type="submit">`):

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

A button that submits the form when clicked. The text "LOGIN" is displayed on the button.

Forgot Password Link (`<a href="https://website.com">`):

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

An anchor tag that provides a link to a page for recovering forgotten credentials. The displayed text is "Forgot your credentials?".

CSS Code

Global Box Sizing:

* {
  box-sizing: border-box;
}

Sets the box-sizing property to border-box for all elements. This ensures padding and border are included in the element's total width and height.

Height for HTML, Body, and Wrapper:

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

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

Keyframes for Background Animation:

@keyframes gradient {
  100% {
    background-size: 4000px 1000px;
  }
}

Defines an animation named gradient that changes the background-size to 4000px 1000px at 100% progress.

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-3/bg.svg");
  background-size: 2000px 1000px;
  background-position: -500px 0;
  color: #f9f9f9;
  font-family: "Poppins";
  animation: gradient 10s infinite alternate linear;
}

display: grid; place-items: center;: Centers the content of the body both horizontally and vertically.
margin: 0; padding: 0 24px;: Removes default margin and adds horizontal padding.
background-image: Sets a background image for the body.
background-size: 2000px 1000px;: Sets the size of the background image.
background-position: -500px 0;: Positions the background image.
animation: gradient 10s infinite alternate linear;: Applies the gradient animation with a 10-second duration, looping infinitely in an alternating linear fashion.
color: #f9f9f9;: Sets the text color.
font-family: "Poppins";: Sets the font family.

Media Query for Larger Widths:

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

Removes the horizontal padding on the body for viewports with a width of 500px or more.

Login Card Container:

.login {
  width: 90%;
  padding: 70px 30px 44px;
  border-radius: 22px;
  background: #161616;
  text-align: center;
  margin: 20px 0;
}
@media (width >= 450px) {
  .login {
    width: 380px;
  }
}

Styles the .login container, setting its width, padding, border-radius, background color, text alignment, and margin.
A media query adjusts the width of the .login container to 380px for viewports with a width of 450px or more.

Avatar Container:

.avatar {
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(-45deg, #157ae1, #c7a1ff);
  padding: 2px;
  width: 120px;
  height: 120px;
}
.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #161616;
}

.avatar: Styles the avatar container, centering it with margin, setting a circular shape with border-radius: 50%, applying a gradient background, padding, and size.
.avatar > img: Styles the image inside the avatar container, ensuring it covers the container fully with a circular shape and a border.

Headings Inside the Login Card:

.login > h2 {
  font-size: 36px;
  font-weight: 500;
  margin: 0 0 4px;
}
.login > h3 {
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 16px;
}

.login > h2: Styles the level-2 heading inside the .login container with font size, weight, and margin.
.login > h3: Styles the level-3 heading with color, margin, font weight, and size.

Login Form Styling:

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

.login-form: Styles the login form to use a grid layout, centering items, setting a gap between elements, and ensuring full width with no margin.

Textbox Styling:

.textbox {
  width: 100%;
  position: relative;
}
.textbox span {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  color: rgba(255, 255, 255, 0.38);
}

.textbox: Styles the container for each input field, setting full width and relative positioning.
.textbox span: Styles the icon inside each textbox, positioning it absolutely within the container and centering it vertically.

Input and Button Elements:

.login-form input, .login-form button {
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  border-radius: 8px;
}
.login-form input {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 18px;
  padding: 0 20px 0 50px;
  color: inherit;
}
.login-form input:focus {
  border-color: #157ae1;
}
.login-form input:focus ~ span {
  color: #157ae1;
}
.login-form button {
  cursor: pointer;
  background: #157ae1;
  color: #f9f9f9;
  border: 0;
  font-weight: 600;
  letter-spacing: 2px;
}
.login-form a {
  color: #157ae1;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}

.login-form input, .login-form button: Styles both input and button elements with shared properties such as width, height, outline, padding, font-family, font-size, and border-radius.
.login-form input: Adds additional styles for input fields, including background, border, padding, and color.
.login-form input:focus: Changes the border color when the input is focused.
.login-form input:focus ~ span: Changes the icon color when the input is focused.
.login-form button: Styles the submit button with cursor, background color, text color, border, font-weight, and letter-spacing.
.login-form a: Styles the anchor link with color, font-size, text alignment, and text-decoration.