Profile Card Component

Hi TechnoSolution! ✌

Well done with this challenge, just some advice:

✅ You can add the circles in the background by using the background property, nevermind if there's more than 1 image, you can control them easily, check this article for more information.

✅ Since you put 20% as width, there'll be problems with the mobile view, I recommend you to add a clamp() to the width, that way you can control thee values, a minimum (375px maybe), a default (here you can put 20%), and a maximum value (let's say 500px), check this article for more information. In like manner you can also add a min-width and a max-width to control just to values, you're free to choose either!.

✅ Add padding to the main container, that way on mobile view there won't be problems with the phone's borders.

✅ Same as up, you have to leave the alt attributes empty when there's not something important that the screen reader should read.

Have a nice day :D!.

Hello, TechnoSolution! 👋

Good job on this challenge! What I can suggest to change is:

• Change the alt attributes for the .card image and .Profile-img as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
• Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
• Since you're set width: 20% on .container your container looks bad on mobile resolution. Set it to width: 100% and add max-width: 400px to see difference. Add padding: 12px to body so it doesn't stick to borders on mobile. Read about media-queries to make responsive design so it looks and works properly on a range of different devices. Now your solution only look good on 375px and desktop, nothing between.
• Use Responsive Design Mode to see how your website behaves on different devices. To toggle it press CTRL+SHIFT+M on Firefox, and CTRL+SHIFT+C on Chrome.

Good luck with that, have fun coding! 💪