Tag: CSS
You're given an HTML file containing the markup for a notifications menu. Using only CSS, replicate the expected output following these specifications:
- The overall wrapper container has a width of 280px, 10px of padding on each side (creating 300px of total width), a border-radius of 10px, and a background color of lightgrey.
- The "Notifications" heading is horizontally centered, and the text is underlined. There is 10px of vertical spacing between the heading and the first notification. All other default margin from this heading should be removed.
- There is 10px of vertical spacing between each notification. Each notification is horizontally centered, with 10px of spacing between the notification and the edge of the wrapper. Each notification has 10px of padding on all sides, a border-radius of 10px and a background color of white.
- Each notification has an image, which is 100px by 100px and a perfect circle. These images also have a solid, black, 1px border.
- The notification paragraph is on right of the image, with 10px of spacing between them. All other default margin from the paragraphs should be removed. Any text within the .user span is bold.
- The span with the time class is at the bottom right of the notification. This text has a normal font-weight, a font-size of 12px, and it is italicized.
- The "View More" button is 10px below the bottom notification. This button has the same width as the notifications, and it is horizontally centered. This button has a font-size of 16px, a border-radius of 10px, 10px of padding on all sides, a background color of #02203Cand a text color of white.