Hướng dẫn thử thách
1 / 1
Build an Event Hub
In this lab you will utilize the semantic HTML elements to create the structure of a web page. You'll add content and images to make it look like a real event hub.
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
**User Stories:**
1. You should have a `header` element, and it must be the first element inside the `body`.
1. Inside the `header` element, you should have an `h1` element that contains the text `Event Hub`, and a `nav` element.
1. Inside the `nav` element, you should have an unordered list of two items containing links to different sections of the page. The first item should have the text `Upcoming Events`, and the second item should have the text `Past Events`.
1. Each link should be represented by an `a` element with an `href` attribute that links to the corresponding section of the page, `#upcoming-events` and `#past-events` respectively.
1. You should have a `main` element that contains the different sections of the page.
1. Inside the `main` element, you should have two `section` elements.
1. The first `section` element should have an `id` attribute with the value `upcoming-events`
1. Inside the `#upcoming-events` section, you should have:
- An `h2` element with the text `Upcoming Events`.
- Two `article` elements. Each article should represent an event, and it should have :
- An `h3` element for the event title.
- A `p` element for the event description. You can add a date at the bottom if you like.
1. The second `section` element should have an `id` attribute with the value `past-events`.
1. Inside the `#past-events` section, you should have:
- An `h2` element with the text `Past Events`.
- Two `article` elements. Each article element should represent a past event, and it should have:
- An `h3` element for the event title,
- A `p` element for the event description. You can add a date at the bottom if you like.
- An image element with the `src` attribute pointing to an image file and the `alt` attribute with a description of the image.
**Note:** You can use any text for the event descriptions and dates. You can use the following image URLs for the images if you like:
- `https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg`.
- `https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg`.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵