Skip to content
Submitted almost 4 years ago

Solution using sass and BEM notation.

Boris B Grunwald•80
@jikol1906
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

Hello,

I'm pretty new to front end development, but I think this turned our decently.

I am especially curious to get some comments on how I solved the placement of the two background pictures. I am not really sure if putting them inside pseudoelements is the best way to go about this, so would like some feedback on that.

I am also curious if my HTML make sense semantically.

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, Boris B Grunwald! 👋

    Congratulations upon completing your first challenge on Frontend Mentor! 🎉 Good job on this one! 👍

    I suggest using CSS background images to add and position the background SVGs in this project. That'll make your HTML cleaner and keep the background SVGs from getting in the way of the other elements on your page. Here's an article to get you started.

    Your HTML looks good. 😉

    Keep coding (and happy coding, too)! 😁

    1
    Boris B Grunwald•80
    @jikol1906Posted almost 4 years ago

    @ApplePieGiraffe Thank you for your reply ☺️. Yes I was struggling a bit with the svg's. I also realize that the pseudoelements overflow on smaller screen sizes so have to fix that.

    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