Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

html/css

Ads645 125

@Ads645

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first project, I'm having trouble with the bubble imgs. I tried using css background-image but the positioning was all wrong, so I went with divs but still off a little bit. Any suggestions? tks

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

👋Hi Ads645! My name is Vanza!

👍 Good job on completing your first challenge! I see that you having struggle on positioning those bubbles. Well, when I was doing this challenge I also struggled with two bubbles.

So what I have done to position those bubbles, would be something like this:

body {
  background-image: 
    url('./images/bg-pattern-top.svg'),
    url('./images/bg-pattern-bottom.svg');
  background-position: 
    right calc(47vw + 15%) bottom calc(65vh - 15vw),
    left calc(40vw + 25%) top calc(72vh - 15vw);
  background-repeat: no-repeat;
  min-height: 100vh;
  overflow-x: hidden;
}

You can remove the bckgrndimg and bckgrndimg2 from your index.html.

That's it! Hopefully this solve your problem!

**Happy Coding!**😉

Marked as helpful

1

Ads645 125

@Ads645

Posted

@vanzasetia Awesome! I knew there was to be an easier way. Thanks so much.:)

0
Vanza Setia 27,795

@vanzasetia

Posted

@Ads645 You're Welcome!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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