All Tracks/lab pricing plans layout/
Đang tải...
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:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.