Profile card using Flex and CSS Positioning

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 or em instead of px for font sizes. Never use px unit. Relative units such as rem and em 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! 👍

Hey there 👋. Congratulations on completing the challenge! 🎉

You did a great job completing this challenge! 😃 Here are a few recommendations that I have to help you level up yourself and improve your code -

GitHub 🧑‍💻:

• It seems like you're new to using Git & GitHub as your version control and code hosting 🙋‍♂️ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
• I would recommend you watch this tutorial covering both Git and GitHub - Complete Git and GitHub Tutorial

‎Background 📸: ‎ ‎

• To position the background the way you desire, you can use the background-position, and the background-repeat property, and then add the fill the color using the background-color property as follows:

body{
background: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
background-repeat: no-repeat, no-repeat;
background-position: right 52vw bottom 35vh, left 48vw top 52vh;
background-color: var(--dark-cyan);
}

Responsive Design 🎨:

• You can use media queries to make your design responsive and adapt to different screen sizes. Define breakpoints and adjust styles accordingly to ensure a consistent and user-friendly experience across devices. Always go for the mobile-first approach while designing and developing a responsive website.

I hope you find this helpful 😄 Above all, the solution submitted is good!