All Tracks/lab business card/
Đang tải...
Hướng dẫn thử thách
1 / 1

Design a Business Card

**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have a `div` with a `class` attribute with a value of `business-card` that will contain all the other elements. 1. Inside the `.business-card` element, there should be an `img` element with a `class` attribute with a value of `profile-image`. You can set the image source to `https://cdn.freecodecamp.org/curriculum/labs/flower.jpg` if you like. There should be an `alt` with a meaningful description. 1. Inside the `.business-card` element, after the `img` element, you should have three `p` elements with a `class` attribute that has, respectively, a value of `full-name`, `designation`, and `company`. 1. The first `p` element should contain your name. 1. The second `p` element should contain your designation. 1. The third `p` element should have your company name. 1. There should be an `hr` element below the third `p` element. 1. After the `hr` element, there should be two `p` elements. In the first `p` element, you should have an email address as the text. In the second `p` element, the text should be a phone number. 1. After the two `p` elements, there should be an `a` element with a class of `portfolio-link`, the text `Portfolio`, and it should link to a valid URL. 1. There should be an `hr` element after the `a` element containing the portfolio link. 1. You should have another `div` element with a `class` attribute with a value of `social-media`. Within this element, there should be an `h2` element with the text `Connect with me`. 1. Inside the `.social-media` elements, there should be three `a` elements. The `a` elements should have the text `Twitter`, `LinkedIn` and `GitHub` respectively with links to valid websites. 1. You should link the style sheet `styles.css` using the `link` tag in the `head` section of the HTML file. 1. Your page background should be `rosybrown`. The overall font should be `Arial`, with a fallback of `sans-serif`. 1. The `.business-card` selector should have properties to set the element as `300px` wide and a background color of your choice. Also you should set a `padding` of `20px` all around and a top `margin` of `100px`. The text should be center aligned and the font size should be `16px`. The left and right margins should be set to `auto`. 1. The `.profile-image` selector should have a `max-width` property with a value of `100%`. 1. All of the `p` elements should have a top and bottom `margin` of `5px`. 1. All links on the page should not be underlined.
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.