Skip to content
Submitted over 2 years ago

Responsive Profile Card Component

NadiaFr•310
@NadiaFrShLm
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

Placing 2 bg-patterns was a nightmare. Finally I placed them in a <body> as a background-image with 2 url() , and positioned them with percentages. So it looks well only with 1440 screen with. Real nightmare

Community feedback

  • KC•90
    @kchettiar1Posted over 2 years ago

    hi,

    Well done getting this challenge completed. I'm working on the same challenge and the background patterns ARE indeed a nightmare!

    I'm going with exactly the same method you used for the background patterns top & bottom, however I fixed the background-positioning for mobile (using px units) and will do the same for desktop once I get there.

    Cheers and happy coding! 👍🏽

    0
    NadiaFr•310
    @NadiaFrShLmPosted over 2 years ago

    @kchettiar1 I thought about giving to each pattern an empty <div> container -> either with absolute position. -> either to give transform: translate(x,y), so it will fix their position acording to the screen.

    But then there will be to much component for such an easy (looks like it should be easy) task.

    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