Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML and CSS

@McClef

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please feedback will be highly recommanded.

Community feedback

Web Frog 1,840

@MasterDev333

Posted

Great work @Martins Michael. You've used background-image for positioning background circles. Nice try. You may make them responsive by using "vw" for background-position and background-size properties. And it would be better if you make your class names more readable. If you have time, please take a look at BEM naming conventions. Hope it helps. Happy coding~ :)

0

@McClef

Posted

@MasterDev333, "BEM naming conventions. Hope it helps." i trust it will help so long it's working for you (: . Thanks for the response as i am on it right away.

0
P

@gsterczewski

Posted

Hello Martins Michael 👋,

Here's my suggestions, maybe they will be useful to you

  • <hr> element is currently too thick, try to set border to 0 and border-top: 1px solid with appropriate color

  • Also, consider changing h3 heading to h1 since it's a good practice to have them in order

  • Maybe add some space between .container and .attribution

  • Consider adding some @media to change position of the background images on smaller screens, since right now they are out of the view

Keep up the good work! 💪

See you on the coding trail 😉

Cheers!

0

@McClef

Posted

@GSterczewski, I'm grateful for the response and i'll put a change to it right away to understand it better from your own side of view.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord