Hướng dẫn thử thách
1 / 1
Design a Pricing Plans Layout Page
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
**User Stories:**
1. Your page should have an `h1` element with the text `Pricing Plans`.
2. Your page should have a `div` element with the class `pricing-container` below the `h1` element.
- The `.pricing-container` selector should have a `display` property with the value of `flex` and a `flex-wrap` property with the value of `wrap`.
3. Within the `.pricing-container` element, you should have three `div` elements with the class `pricing-card` to represent the pricing plans.
- One of the `.pricing-card` elements should have the class `basic-plan` in addition to the `pricing-card` class.
- One of the `.pricing-card` elements should have the class `pro-plan` in addition to the `pricing-card` class.
- One of the `.pricing-card` elements should have the class `premium-plan` in addition to the `pricing-card` class.
4. Your `.basic-plan` element should have an `h2` element with the text `Basic`.
5. Your `.basic-plan` element should have a `p` element with the text `$9/month`.
6. Your `.pro-plan` element should have an `h2` element with the text `Pro`.
7. Your `.pro-plan` element should have a `p` element with the text `$19/month`.
8. Your `.premium-plan` element should have an `h2` element with the text `Premium`.
9. Your `.premium-plan` element should have a `p` element with the text `$29/month`.
10. Each of your `.pricing-card` elements should:
- Use Flexbox to stack its content in a column and justify the space between the children using `space-between`.
- Set the `flex` property to `0 0 200px` to give it a consistent width and prevent it from growing or shrinking in the layout.
- Set the `border` property to `2px solid black` to see how the different cards take up space.
11. The `.basic-plan` element should appear first in the layout. You should use the `order` property for this.
12. The `.pro-plan` element should appear second in the layout. You should use the `order` property and set its `flex-grow` property to `2` so it takes up more space than the other plans.
13. The `.premium-plan` element should come last in the layout. You should use the `order` property for this.
**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
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:⌘↵