@vanzasetia
Posted
Hi, MeghaS4831! π
For those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.
Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution
This is another way to help you position those circles.
If you want to change the colors of those circles, you need to change the value of the fill
property in the SVG file. But, I think that can be tricky because the colors are gradient colors.
Some suggestions:
- Alternative text should be in a readable format: Alternative text for images should not be hyphenated.
- Decorative images should not have alternative text: Not every image needs alternative text. This will tell the screen reader to skip over the decorative images. As a result, it saves screen reader users time navigating the page. For your information, decorative images are images that do not add any information and serve only aesthetic purposes.
- No inline styling: Move all the styling to the external stylesheetβ
style="font-size: 18px; font-weight: 700"
. Separating the HTML and the CSS can make it easier to maintain the code. - Do not use pixel unit for font sizes: Use
rem
orem
instead ofpx
for font sizes. Never usepx
unit. Relative units such asrem
andem
can adapt when the users change the browser's font size setting. Learn more β Why you should never use px to set font-size in CSS
Avoid id
selectors: Do not use id
selectors for styling. There are two reasons for not using IDβs to style content:
- They mess up specificity because they are too high (the most important reason).
- They are unique identifiers. So, they are not reusable on the same page.
- Learn more β What the ID attribute is REALLY for
I hope this helps. Happy coding! π
Marked as helpful