Skip to content
Submitted over 2 years ago

Responsive profile card component

Alexis Pannetier•130
@Alexis-Pannetier
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

I don't find a good way to scale the bubble in background, any suggestion ? :)

Community feedback

  • Patrick•800
    @PPechmannPosted over 2 years ago

    Hey Alexis! Great job on this challenge!

    Regarding the background bubbles, I initially also struggled placing them correctly, until I tried adding both as background to the same container and positioning them from there. Here´s what I did, hope it helps:

    background: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-position: -12rem -23rem, 50rem 30rem; background-repeat: no-repeat; background-size: contain;

    Marked as helpful
    1

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