Skip to content
Submitted over 3 years ago

Responsive profile card component (and background battle)

Coryse•10
@Coryse2
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, 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!

Community feedback

  • André Rodrigues Almeida•80
    @dralm3idaPosted over 3 years ago

    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!

    0
    Coryse•10
    @Coryse2Posted over 3 years ago

    @r0drig hi, thank you for your advices , i'll try again with this solution

    0
  • Amritha Imandi•10
    @mrskodiPosted over 3 years ago

    @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.

    0
    Coryse•10
    @Coryse2Posted over 3 years ago

    @mrskodi hi, thank you!!

    0
  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    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)

    0
    Coryse•10
    @Coryse2Posted over 3 years ago

    Hi @AgataLiberska, thank you! It looks so logical now, I will try this.

    0
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @Coryse2 no worries, happy to help :)

    0
    Amritha Imandi•10
    @mrskodiPosted over 3 years ago

    @AgataLiberska, Could you point to some useful resources demonstrating how to create pseudo elements?

    0
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @mrskodi

    Hope this helps :)

    0
    Amritha Imandi•10
    @mrskodiPosted over 3 years ago

    @AgataLiberska, thanks for the resources. I agree with you on mozilla's documentation. Perhaps it is a matter of getting used to it and with time we would be able to understand it more easily.

    0
    Coryse•10
    @Coryse2Posted over 3 years ago

    @AgataLiberska thanks

    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