Introduction
This project is a simple login form with background image. A transparent login form that provides attractive look. It provides users with fields to input their username and password, along with a submit button to log in. Additionally, there's a link provided for users who may have forgotten their password. The design aims to be visually appealing while remaining functional and easy to use. A background image is used to make it look perfect and good.
So let's start with creating files index.html and style.css.
Html Code Explanation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form with Background Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Form for user login -->
</body>
</html>DOCTYPE html This declaration specifies the document type and version of HTML being used.
The <html> tag is the root element of the HTML document. head This section contains meta-information about the HTML document, such as character encoding, viewport settings, and the document title. This <link> tag links the HTML document to an external CSS stylesheet named "style.css", which contains the styling rules for the page. <body>: This is the container for all content visible to the user.
<!-- Form for user login -->
<form action="" class="form_main">
<!-- Heading for the form -->
<p class="heading">Login</p>
<!-- Container for username input field -->
<div class="inputContainer">
<!-- Icon for username input field -->
<i>
<ion-icon name="at-outline"></ion-icon>
</i>
<!-- Username input field -->
<input type="text" placeholder="Username" autocomplete="off" class="inputField">
</div>
<!-- Container for password input field -->
<div class="inputContainer">
<!-- Icon for password input field -->
<i>
<ion-icon name="lock-closed-outline"></ion-icon>
</i>
<!-- Password input field -->
<input type="password" placeholder="Password" autocomplete="off" class="inputField">
</div>
<!-- Submit button -->
<button id="button">Submit</button>
<!-- Link for forgot password -->
<a href="" class="forgotbutton">Forgot your password?</a>
</form>This <form> element defines a form for user login with an empty action attribute (meaning it will submit to the same page) and a class of "form_main" for styling purposes. This <p> element serves as the heading for the form, displaying "Login". It has a class of "heading" for styling. div is a container for the username input field. It has a class of "inputContainer" for styling. This <i> element is traditionally used for italic text, but in this context, it's being used as a container for an icon. This <ion-icon> element is part of the Ionicons library, displaying an icon representing an "at" symbol. It's used here to visually indicate the username input field.
This <input> element is for entering the username. It has a type attribute set to "text", a placeholder attribute set to "Username" for providing a hint to the user, and a class of "inputField" for styling. The autocomplete attribute is set to "off" to disable browser auto-completion.
Similarly, the next <div> element and its children elements represent the container, icon, and input field for the password input.
This <button> element is used for submitting the form. It has an id of "button" and displays the text "Submit". This <a> element is a hyperlink used for users who may have forgotten their password. It has an empty href attribute (which means it doesn't lead anywhere) and a class of "forgotbutton" for styling. The text "Forgot your password?" is displayed as the link text.
Video Tutorial
CSS Code Explanation
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html, body {
display: grid;
height: 100%;
place-items: center;
}* This selector targets all elements on the page. padding: 0; margin: 0;: Resets the default padding and margin of all elements to 0, ensuring consistent spacing. box-sizing: border-box;: Ensures that padding and border are included in the element's total width and height. font-family: "Poppins", sans-serif;: Sets the default font family to "Poppins", and if not available, falls back to a generic sans-serif font.
display: grid;: Positions the HTML and body elements as a grid container. height: 100%;: Sets the height of both HTML and body elements to 100% of the viewport height. place-items: center;: Centers the content both horizontally and vertically within the grid container.
body {
background-image: url("images/Mount.jpg");
background-size: cover;
background-position: center;
}
.form_main {
width: 250px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 30px;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
position: relative;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.2);
}background-image: Sets the background image of the body which we have in our directory. background-size: cover;: Ensures the background image covers the entire background area. background-position: center;: Centers the background image horizontally and vertically within the body.
This class .form_main styles the main container of the login form. width: 250px;: Sets the width of the form container to 250 pixels. display: flex;: Uses flexbox layout for positioning child elements. justify-content: center; align-items: center;: Centers the child elements both horizontally and vertically. flex-direction: column;: Arranges the child elements in a column layout. padding: 30px;: Adds padding around the content of the form container. box-shadow: Adds a subtle box shadow for depth effect. position: relative;: Sets the position of the form container to relative. overflow: hidden;: Hides any content that overflows the form container. background-color: rgba(255, 255, 255, 0.2);: Sets a semi-transparent white background color for the form container, creating a frosted glass effect.
.form_main::before {
position: absolute;
content: "";
width: 300px;
height: 300px;
background-color: #000;
transform: rotate(45deg);
left: -180px;
bottom: 30px;
border-radius: 30px;
z-index: 1;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);
}
.heading {
font-size: 28px;
font-weight: 600;
color: #d9d9d9;
margin: 5px 0 10px 0;
}This pseudo-element styles a decorative element before the form container.
position: absolute;: Positions the pseudo-element absolutely within its containing element.
content: "";: Inserts content into the pseudo-element (in this case, nothing). width: 300px; height: 300px;: Sets the dimensions of the pseudo-element. background-color: #000;: Sets the background color of the pseudo-element to black. transform: rotate(45deg);: Rotates the pseudo-element by 45 degrees. left: -180px; bottom: 30px;: Positions the pseudo-element relative to its containing element. border-radius: 30px;: Applies border-radius to create rounded corners. z-index: 1;: Sets the z-index to 1, ensuring it appears below other elements. box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);: Applies a box shadow for depth effect. This class styles the heading text within the form. font-size: 28px;: Sets the font size of the heading text to 28 pixels. font-weight: 600;: Sets the font weight to 600 (bold). color: #d9d9d9;: Sets the color of the text to a light gray. margin: 5px 0 10px 0;: Sets the margin around the heading text to control spacing.
.inputContainer {
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.inputContainer i {
position: absolute;
left: 3px;
color: rgb(120, 120, 120);
}This class styles the container for input fields. width: 100%;: Sets the width of the input container to 100% of its parent element. position: relative;: Positions the input container relative to its normal position. display: flex;: Uses flexbox layout to align child elements. align-items: center; justify-content: center;: Centers the child elements both horizontally and vertically. z-index: 2;: Sets a higher z-index to ensure the input container appears above other elements. This styles the icons within input containers. position: absolute;: Positions the icons absolutely within their containing input container. left: 3px;: Positions the icons 3 pixels from the left edge of their containing input container. color: rgb(120, 120, 120);: Sets the color of the icons to a medium gray.
.inputField {
width: 100%;
height: 30px;
background-color: transparent;
border: none;
border-bottom: 2px solid rgb(203, 203, 203);
margin: 10px 0;
color: rgb(155, 155, 155);
font-size: 12px;
font-weight: 500;
padding-left: 30px;
box-sizing: border-box;
outline: none;
}
.inputField:focus {
border-bottom: 2px solid rgb(246, 246, 246);
}This class styles the input fields. width: 100%;: Sets the width of the input fields to 100%. height: 30px;: Sets the height of the input fields to 30 pixels. background-color: transparent;: Sets the background color of the input fields to transparent. border: none;: Removes the default border of the input fields. border-bottom: 2px solid rgb(203, 203, 203);: Adds a bottom border with a light gray color. margin: 10px 0;: Sets the margin above and below the input fields to control spacing. color: rgb(155, 155, 155);: Sets the color of the text inside the input fields to a light gray. font-size: 12px; font-weight: 500;: Sets the font size and weight of the text inside the input fields. padding-left: 30px;: Adds left padding to the input fields to accommodate icons. box-sizing: border-box;: Includes padding and border in the total width of the input fields. outline: none;: Removes the default outline when the input fields are focused. This class .inputField:focus styles the input fields when they are focused. Changes the bottom border color to a lighter shade of gray for visual feedback.
.inputField::placeholder {
color: rgb(120, 120, 120);
font-size: 11px;
font-weight: 500;
}
#button {
z-index: 2;
position: relative;
width: 100%;
border: none;
background-color: rgb(227, 227, 227);
height: 30px;
color: rgb(8, 8, 8);
font-size: 10px;
font-weight: 500;
letter-spacing: .5px;
margin: 10px;
cursor: pointer;
}This class inputField::placeholder styles the placeholder text within the input fields. Sets the color, font size, and font weight of the placeholder text.
This ID #button styles the submit button. z-index: 2;: Sets a higher z-index to ensure the button appears above other elements. position: relative;: Positions the button relative to its normal position. width: 100%;: Sets the width of the button to 100% of its parent element. border: none;: Removes the default border of the button. background-color: rgb(227, 227, 227);: Sets the background color of the button. height: 30px;: Sets the height of the button to 30 pixels. color: rgb(8, 8, 8);: Sets the color of the text inside the button. font-size: 10px; font-weight: 500;: Sets the font size and weight of the text inside the button. letter-spacing: .5px;: Sets the letter spacing of the text inside the button. margin: 10px;: Sets the margin around the button to control spacing. cursor: pointer;: Changes the cursor to a pointer when hovering over the button for interactivity.
#button:hover {
background-color: rgb(220, 220, 220);
}
.forgotbutton {
z-index: 2;
font-size: 10px;
font-weight: 500;
color: rgb(152, 164, 255);
text-decoration: none;
padding: 8px 15px;
}This ID #button:hover styles the submit button when it is hovered over.
Changes the background color of the button for visual feedback. This class styles the "Forgot your password?" link. z-index: 2;: Sets a higher z-index to ensure the link appears above other elements.
font-size: 10px; font-weight: 500;: Sets the font size and weight of the text. color: rgb(152, 164, 255);: Sets the color of the text. text-decoration: none;: Removes the underline from the link text.
padding: 8px 15px;: Adds padding around the link text to control spacing.
Conclusion
In this project, a visually appealing login form with a background image and modern styling was created using HTML and CSS. The form layout employs flexbox for efficient alignment and positioning of elements. Stylish icons are integrated into input fields, providing intuitive visual cues for users. The form's design incorporates subtle animations and effects, such as a frosted glass background and decorative elements, adding depth and sophistication. Overall, this project demonstrates the fusion of design aesthetics and functionality to create a polished user experience for login interactions.
Download Source Code