Simple and Beautiful Home Page Design

Introduction

In this project, you will learn how to create a simple and beautiful home page layout for the LabEx Knowledge Network website. The goal is to design an aesthetically pleasing home page that effectively presents the website's content and features.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the project files and structure
• How to style the top area of the page, including the header and navigation
• How to style the content inside the header area
• How to style the content area of the page
• How to style the footer of the page

🏆 Achievements

After completing this project, you will be able to:

• Create a visually appealing layout using CSS
• Structure and organize the HTML and CSS files for a web page
• Apply CSS styles to different sections of a web page
• Ensure the layout is responsive and consistent across different screen sizes

Skills Graph

Set Up the Project

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

1. Open the project folder, which contains the following files and directories:

   • css/style.css
   • index.html

2. In the css/style.css file, add the following code to set the basic styles for the page:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This code resets the default margin and padding of all elements, and sets the box-sizing property to border-box, which makes it easier to control the size of elements.

3. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
4. Open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Style the Top Area

In this step, you will style the top area of the page, which includes the header and navigation.

1. In the css/style.css file, add the following code to style the top area:

.top {
  background-color: #a6b1e1;
}

.nav {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 10px;
}

.nav > span {
  font-size: 18px;
  color: white;
  margin-right: 365px;
  font-weight: 600;
}

.nav_c span {
  font-size: 16px;
  color: white;
  margin-right: 28px;
  font-weight: 600;
}

.nav_c span:nth-child(7) {
  margin-right: 0px;
}

This code sets the background color of the top area to #a6b1e1, centers the header area with a width of 1024px, and styles the navigation menu.

Style the Header Content

In this step, you will style the content inside the header area.

1. In the css/style.css file, add the following code to style the header content:

.header {
  width: 1024px;
  margin: 0 auto;
  height: 440px;
  padding-top: 13px;
}

.header_text {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}

.title_header {
  font-size: 45px;
  color: black;
  margin-bottom: 62px;
}

.title_p {
  font-size: 21px;
  font-weight: 200;
  color: white;
  margin-bottom: 36px;
}

.join {
  color: #efbfbf;
  border-radius: 2px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-shadow: inset 0 0 0 2px #efbfbf;
}

This code centers the header content vertically and horizontally, and styles the title, paragraph, and "Join" button.

Style the Content Area

In this step, you will style the content area of the page.

1. In the css/style.css file, add the following code to style the content area:

.content {
  width: 1024px;
  margin: 74px auto 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 302px;
}

.content .item {
  height: 144px;
  width: 502px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content .item span {
  font-size: 30px;
  font-weight: 200;
  color: black;
}

.content .item p {
  font-size: 18px;
  color: #aaa;
  line-height: 1.4em;
}

This code centers the content area, creates a flex layout with two items per row, and styles the individual content items.

Style the Footer

In this step, you will style the footer of the page.

1. In the css/style.css file, add the following code to style the footer:

.footer {
  width: 100%;
  height: 80px;
  border-top: 2px solid #aaa;
}

.footer_text {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #aaa;
  padding-top: 30px;
}

This code sets the height of the footer to 80px, adds a 2px border at the top in the color #aaa, and centers the footer text.

With these steps, you have completed the layout and styling of the LabEx Knowledge Network home page.

The finished result is as follows:

Summary

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