Skip to content
Submitted over 4 years ago

Responsive profile card component (and background battle)

Coryse•10
@Coryse2
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, It's my first challenge. I am looking forward to any comments that will help me to progress. I had difficulties with the background, can anyone give me a lead? thank you!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • André Rodrigues Almeida•80
    @dralm3ida

    Hi Coryse2! I think that controlling the top and bottom patterns using position "fixed" and properties top, bottom, left and right is simpler than using media queries. Also the card is a bit big compared to the design.

    Good coding!

  • Amritha Imandi•10
    @mrskodi

    @Coryse2, Thanks for sharing your solution. It was a good idea to do media queries. I hadn't implemented it on mine. I also had a hard time with the background images and took me a while to figure it out. Looking at this solution: https://www.frontendmentor.io/solutions/my-profile-card-challenge-solution-using-just-html-and-css-0B55Wretk, the background looked so simple. Sharing here for your reference. Hope this is helpful.

  • Agata Liberska•4,075
    @AgataLiberska

    Hi @Coryse2, have you tried experimenting with the background-position property? It may also be easier if instead of adding the circle as a background to the <body>, you create pseudoelements and add the background to them (although I'm sure that's not the only solution)

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