Skip to content
Submitted over 3 years ago

css, flexbox, media queries, javascript, multiple background images

Marc Neumann•60
@NewMeeDev
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there,

feel free to analyse and use my code. Feedback is very welcome.

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • darryncodes•6,350
    @darryncodes

    Hi Marc,

    Really great solution, nice one!

    • you might want to consider moving all your background declarations from the .wrapper class and adding them to the <body>. There is a white border round the whole design at the moment.
    • you could also clear up your accessibility report if you swapped <div class="wrapper"> for <main class="wrapper"> and <div class="attribution"> for <footer class="attribution">. Semantics is really important
    • your design should only have one <h1> consider changing the rest to <h2> here is some info

    Keep up the good work!

    Marked as helpful
  • Web Wizard•5,690
    @rsrclab

    Hi, @NewMeeDev ~

    Congratulate on your solution to FM challenges. I have studied your work, and it seems great. I have learned a lot from it. Here are some of opinions on this project.

    1. Limiting background image to wrapper doesn't look good. I think making background image fill whole screen could be better in this case.
    2. Limiting card width is necessary, but I recommend to use max-width instead of manually setting width constant.
    3. I recommend you to try using BEM structuring for classing elements. That could be big advantage when you are stuck with bigger projects.

    Hope my words can help you even a bit. Happy coding ~

    Marked as helpful

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