Login Form Project
Build a stylish login form that collects user information, including name, email, and address. This project will improve your skills in form design. You will be building this project as part of our CSS Course.
Resources: Profile picture, Background Image
Things you need to know: Use of color, background-color, border, margin, centering, padding,border-radius, box-model.
Task - 01
Add a background image to the body using the provided resource.
Add Home, Services, Products and Contact Us links in the top header section.
Add the heading with the text Login Form below the header section.
Add the profile image using the provided resource.
Make the profile image circular.
Add a thick white border to the profile image.
Task - 02
Add the Username label below the profile image.
Add an input element below the profile image.
The input element should have a placeholder value of Enter Username.
Ensure that the label and the input are side by side and not on top of each other.
Next, add the label for Password.
Add an input element to receive the password value.
The input element should not show the password being typed in it.
The input element should have a placeholder value of Enter Password.
Ensure that the label and the input are side by side and not on top of each other.
Task - 03
Add the Login button.
Add a checkbox with text Remember Me.
Add the link for Forgot Password.
Add the Cancel button.
Style the buttons appropriately as shown in the image.
More projects
These are some of the projects you'll build while learning.
