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

CSS Grid / Flexbox / bg-position

Giovani 90

@giovanibulian

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


Hey, devs!

I thought this one was going to be easy, but honestly it got complicated when I realized I had not learned how to handle background images properly. Gladly I was able to work that out. Any feedback regarding this, my solution or any other part of my code will be appreciated.

Thanks and happy coding everyone!

Community feedback

T
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi, Giovani! 👋

Nice job on this challenge! 👏 You've done a nice job in positioning the background images in this challenge (something that can be a quite a tricky)! 😀

One or two very small things I'd like to suggest are,

  • Decreasing the intensity of the box-shadow around the card component just a little (to match the original design).
  • Perhaps using an <article> tag for the card itself and including a heading inside it (which could be the name, maybe) to bump up the semantics of your HTML a bit. 😉

Keep coding (and happy coding, too)! 😁

1

Giovani 90

@giovanibulian

Posted

Hey, @ApplePieGiraffe!

Thanks for the feedback! Positioning the background was a great challenge by itself, I gotta admit that. 😂

Regarding the box-shadow, I've changed the color to have an opacity of 0.5 and increased the blur radius.

And many thanks for the tips about the html semantics too. I've changed the <div> to the <article> tag as you suggested and used the <h2> tag for the name.

Happy coding! 😉

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