Skip to content
Submitted over 3 years ago

Profile card with Tailwind CSS(Purged css)

Nataraj Chakraborty•75
@natarajchakraborty
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 had a tough time in positioning the top and bottom bg-pattern-*, I tried absolute positioned images, and also background-image both, but none of the approaches scale the image appropriately(increase circle radius) at every screen size so that only corners of the profile card is touched(overlapped) while positioned at the top-left and bottom-right corner(At every screen size, tried using %, vh, vw, but couldn't achieve it perfectly at every screen size) . How you guys approached and solved it? please advice!.

Community feedback

  • Benjo Quilario•1,810
    @benjoquilarioPosted over 3 years ago

    Hi natarajchakraborty, we have a same problem when, I'm creating this project.

    Try this code: body { 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 40vh; } Keep coding 🔥🔥

    0
    Nataraj Chakraborty•75
    @natarajchakrabortyPosted over 3 years ago

    @benjoquilario Thanks, indeed, to keep the circle intersecting with the profile card top left and bottom right edges at every screen size is the complicated part and challenging, thanks for feedback... :+1:

    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