Skip to content
Submitted 4 months ago

Profile Card Using CSS Flex

Nafis Sazzad Niloy•190
@methane-js
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I have completed this project successfully.

What challenges did you encounter, and how did you overcome them?

The challenge was to put the two ball size images in the background.

What specific areas of your project would you like help with?

I still see some problems on my project. The background is coming up on the main section. Please tell me if you know the solution

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,410
    @MarziaJalili

    Flawless work as always!

    Here's the answer to your question:

    Since the circle image are only for some design purpose, instead of having them as HTML elements, you could set it as the background images of the body element.

    Here how I set them and it turn out perfectly:

    • Mobile styles:
    body {
    background-color: var(--dark-cyan); /* or the code of that blue color */

   /* first, set the images... */
    background-image: url('./images/bg-pattern-top.svg'),
        url("./images/bg-pattern-bottom.svg");

    /* second, position them according to the element... */
    background-position: top -50vw left -50vw,
      bottom -50vw right -50vw;

    /* prevent the images from repeating... */
    background-repeat: no-repeat, no-repeat;

   /* change the size to match the design */
    background-size: 120%, 120%;
}
    • And then for desktop, change the sizes only:
    @media (min-width: 30em) {
    body {
        background-size: 70%, 70%;
        background-position: top -30vw left -20vw,
            bottom -40vw right -20vw;
    }
}

    That is definitely going to work, for more clarity you could check out my solution for this challenge too.

    😁😁😁

    Marked as helpful

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