Skip to content
Submitted over 1 year ago

Profile card component solution

Kyle Kasprzyk•260
@kylekasprzyk
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 👋,

This is my solution for the profile card component challenge. 👨‍💻

I'm looking for help with positioning the circle images on the background. Looking for guidance on this. Would be interested in an article or video that goes in-depth on this topic.

Thank you for taking the time to view my solution, and for any feedback provided!

I am going to keep doing the challenges to improve my skills.

Community feedback

  • Gio Cura•650
    @GioCuraPosted over 1 year ago

    Hi 👋 For positioning the background circles, I implemented them both as a background-image to the <body> like so:

    body {
    background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
    background-position: right 45vw bottom 45vh, left 45vw top 45vh;
    background-repeat: no-repeat, no-repeat;
}

    Using viewport units vh and vw in background-position helps keep the two circles aligned with the card as the viewport expands and shrinks.

    I'm afraid I don't have an article or video that I can refer to you, but I hope my advice helps!

    Marked as helpful
    1
    Kyle Kasprzyk•260
    @kylekasprzykPosted over 1 year ago

    👋 @GioCura,

    Thank you for the help!

    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