Give Your Page a Makeover

Introduction

In this project, you will learn how to design and style a login page with a beautiful interface. The goal is to create a visually appealing login page that provides a pleasant user experience.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the project structure and understand the provided files
• How to style the body and navigation bar of the login page
• How to style the login form, including the avatar image, form container, form elements, and text

🏆 Achievements

After completing this project, you will be able to:

• Create a visually appealing login page layout using CSS
• Style different elements of a login form, such as input fields, buttons, and text
• Incorporate images and background styles to enhance the overall design of the login page

Set up the Project Structure

In this step, you will learn how to set up the project structure for the login page.

1. Open the lab environment and navigate to the project directory.
2. Inside the project directory, you should see the following file structure:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

3. The css/style.css file is where you will be writing your CSS code to style the login page. The images folder contains the image files used in the project.
4. Open the index.html file in a text editor. This is the HTML file that contains the structure of the login page.
5. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
6. Open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Style the Body and Navigation Bar

In this step, you will style the body and navigation bar of the login page.

1. Open the css/style.css file in a text editor.
2. Add the following CSS code to the file:

/* Add your CSS code here */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

This code sets the background image for the body, the navigation bar style, and adds an image to the top right of the page to access the profile.

Style the Login Form

In this step, you will style the login form.

1. Add the following CSS code to the css/style.css file:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

This code styles the login form, including the avatar image, the form container, the form elements (header, button, and input fields), and the text at the bottom of the form.

Review and Test the Final Result

In this step, you can test the similarity of your completed page with the actual given page.

1. Save the changes to the style.css file.
2. Refresh the browser to see the finished result. After completing the previous steps, you will be able to learn how to layout and beautify a page through css syntax to make your login page as much as possible as shown below:

Congratulations! You have successfully completed the project of giving your login page a makeover.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.