Dynamic Profile Login Page

Enhance user experience with a dynamic profile login page. Learn how to implement a login page that offers personalized access and user recognition.

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">
  <img src="https://github.com/frontend-joe/css-logins/blob/main/login-4/profile.png?raw=true" />
  <h3>Welcome back</h3>
  <h2>Jay Bennett</h2>

  <form class="login-form">
    <input type="password" placeholder="Enter your passcode" />
    <button type="submit">LOGIN</button>
    <a href="https://website.com">Forgot your passcode?</a>
  </form>
</div>

* {
  box-sizing: border-box;
}

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

@keyframes rotate {
  100% {
    background-position: 25% 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-4/background.svg");
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 5s infinite alternate linear;
}

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

.login > img {
  width: 160px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}

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

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

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

.login-form > input,
.login-form > button {
  height: 56px;
  width: 100%;
  outline: none;
  padding: 0;
  border-radius: 10px;
  font-family: inherit;
}

.login-form > input {
  background: #eeeeee;
  border: 0;
  font-size: 18px;
  padding: 0;
  text-align: center;
}

.login-form > button {
  cursor: pointer;
  height: 56px;
  background: #685aff;
  color: #f9f9f9;
  border: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.login-form > a {
  color: #685aff;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
}

```
No need of JavaScript
```

A dynamic profile login page enhances user experience by providing a personalized and interactive interface. This tutorial will guide you through creating and customizing a dynamic profile login page using HTML and CSS.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippets. This includes the structure and styles required to create a dynamic profile login page.

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 dynamic profile login page 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 Image: Replace the avatar.png image with an appropriate image that represents your brand or user profile.

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

Code Explanation

HTML Code

Container for the Login Interface

<div class="login">
  ...
</div>

The entire login interface is wrapped inside a <div> with the class login. This container will hold all the elements of the login interface, allowing it to be styled and positioned as a unit.

Profile Image

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

Inside the login container, an <img> tag is used to display a profile image. The src attribute specifies the URL of the image. This gives a personal touch to the login interface by showing a user's profile picture.

Welcome Message and User's Name

<h3>Welcome back</h3>
<h2>Jay Bennett</h2>

Following the profile image, two headings are used:
- <h3>: Displays a welcome message with a smaller font size.
- <h2>: Displays the user's name with a larger font size, indicating the primary focus.

Login Form

<form class="login-form">
  <input type="password" placeholder="Enter your passcode" />
  <button type="submit">LOGIN</button>
  <a href="https://website.com">Forgot your passcode?</a>
</form>

A <form> element with the class login-form is used to create the login form. This form contains three main elements:
An <input> element of type password allows users to enter their passcode. The placeholder attribute provides a hint to the user about what to enter.
A <button> element of type submit allows users to submit the form. The button is labeled "LOGIN".
An <a> element creates a hyperlink for users who forgot their passcode. This link directs users to a URL (specified in the href attribute) where they can recover or reset their passcode.

CSS Code

General Styling

* {
  box-sizing: border-box;
}
html,
body,
.wrapper {
  height: 100%;
}

Box Sizing: Sets all elements to use the border-box model, where padding and borders are included in the element's total width and height.
Height Setting: Ensures that html, body, and elements with the class .wrapper take up 100% of the viewport height (height: 100%;).

Background Animation

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

Keyframes Animation: Defines a rotate animation that animates the background-position property of the body element.
Background Position: The animation moves the background image (background-image) horizontally (25%) and vertically (50%) over time.

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-4/background.svg");
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 5s infinite alternate linear;
}

Grid Layout: Centers the content vertically and horizontally within the viewport (display: grid; place-items: center;).
Background Image: Sets a background image for the body using a URL. The background-size: cover; property ensures the image covers the entire background area.
Animation: Applies the rotate animation to continuously animate the background position with a duration of 5s, infinite loop (infinite), alternating direction (alternate), and a linear timing function (linear).

Login Card Styling

.login {
  width: 70%;
  padding: 70px 30px 44px;
  border-radius: 1.25rem;
  background: #ffffff;
  text-align: center;
  margin: 20px 0;
}
.login > img {
  width: 160px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}
.login > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 30px;
}
.login > h3 {
  color: rgba(0, 0, 0, 0.38);
  margin: 0 0 6px;
  font-weight: 500;
  font-size: 1rem;
}

Login Card: Styles the .login container, which contains the login form.
- Sets the width to 70%, adds padding, rounds corners (border-radius), and gives a white background (background: #ffffff;).
- Centers text (text-align: center;) and adds vertical margin (margin: 20px 0;).
Profile Image: Styles the profile image (<img>) inside .login.
- Sets a fixed width (width: 160px;) and maintains a square aspect ratio (aspect-ratio: 1/1;).
- Applies object-fit: cover; to ensure the image covers the container without stretching, and rounds the corners (border-radius: 50%;).
- Adds bottom margin for spacing (margin-bottom: 20px;).
Headings: Styles <h2> and <h3> elements inside .login.
- <h2>: Sets a large font size, bold weight, and bottom margin (margin: 0 0 30px;).
- <h3>: Sets a smaller font size, lighter color (rgba(0, 0, 0, 0.38)), and bottom margin (margin: 0 0 6px;).

Login Form Styling

.login-form {
  display: grid;
  gap: 20px;
  place-items: center;
  width: 100%;
  margin: 0;
}
.login-form > input,
.login-form > button {
  height: 56px;
  width: 100%;
  outline: none;
  padding: 0;
  border-radius: 10px;
  font-family: inherit;
}
.login-form > input {
  background: #eeeeee;
  border: 0;
  font-size: 18px;
  padding: 0;
  text-align: center;
}
.login-form > button {
  cursor: pointer;
  background: #685aff;
  color: #f9f9f9;
  border: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
}
.login-form > a {
  color: #685aff;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
}

Login Form Container: Styles the .login-form container.
- display: grid; gap: 20px; place-items: center;: Centers the form elements vertically and horizontally with a gap between them.
- width: 100%; margin: 0;: Ensures the form spans the full width and removes any default margins.
Form Elements: Styles <input> and <button> elements inside .login-form.
- <input>: Sets a background color (background: #eeeeee;), removes borders (border: 0;), centers text (text-align: center;), and adjusts font size (font-size: 18px;).
- <button>: Styles the login button with a background color (background: #685aff;), white text (color: #f9f9f9;), removes borders (border: 0;), sets font size and weight (font-size: 1rem; font-weight: 600;), and adds letter spacing (letter-spacing: 2px;).
Link: Styles <a> element inside .login-form.
- Sets text color (color: #685aff;), font size (font-size: 1rem;), text alignment (text-align: left;), and removes underline (text-decoration: none;).