Skip to content
Submitted about 1 year ago

Profile card component using flexbox and CSS position

Thomas Schütz•280
@Nospiel-code
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

Hi everyone, I had no problems creating the card, but I really struggled with the positioning. My goal was that the bubbles of the background always stay the same in relation to the card in the middle. I tried to do that with a media query but it didn't work as I wanted. Is there a better way to do that? Maybe not giving them an absolute position? I tried that to but then I had problems centering the card.

I also tried to position the attribution at the bottom of the page. The solution I found on the internet was to set the margin-bottom of the card or the margin-top of attribution to auto. This actually positioned the text at the bottem but at the same time my card was positioned at the very top, so I decided not to use it.

Thanks for your help

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • You don't need to use two separate images in your HTML; you can create the two circles using CSS instead:
    body {
    . . .
    background-color: var(--Dark-cyan);
    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
}
    • background-color Set the background color
    • background-image Set a background image
    • background-repeat Sets if a background image will be repeated along the horizontal and vertical axes, or not repeated at all.
    • background-position Sets the starting position of a background image. More information
    • You can also specify the size of the background image with background-size

    The background property is shorthand for all the properties mentioned above but for now. It is better to understand them separately.

    References: 1.CSS background Property | 2.Background property 3.Background-repeat (MDN)

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    0
    Thomas Schütz•280
    @Nospiel-codePosted about 1 year ago

    Hi @MelvinAguilar,

    thanks a lot for your feedback, I really appreciate it. I'll have a look at it.

    Happy coding!

    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