Skip to content
Submitted over 3 years ago

CSS Grid / Flexbox / bg-position

Giovani•90
@giovanibulian
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    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
    @giovanibulianPosted over 3 years ago

    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

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