Skip to content
Submitted almost 2 years ago

Profile Card Component

Ruben•550
@RubenSmn
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 did not manage to get the bubbles on the background. I tried to do it 2 different ways.

  1. img elements using position: absolute in the main element, this was not a success since they created a overflow on the web page.
  2. with selectors ::before and ::after this way it could not manage to get the position right.

Community feedback

  • Kshitij•100
    @KshitijkRaiPosted almost 2 years ago

    I had the same problem with the bubbles in the background, I pretty much did the same thing as you did and had the same problem. So, I just searched for others who had completed the task and copied their observed what they did. Hope this helps.

    body { background-color: #19A2AF; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 50vw bottom 40vh, left 50vw top 44vh; }

    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