Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component

Amaka 100

@amakaogujiofor

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please share feedback. I had some issues with positioning the patterns on the background.

Community feedback

@Abdul400

Posted

hello @amakaogujiofor. Nice trial on the project. Here are some things that I noted.

  1. I've had some issues with the responsiveness especially at around 700px and I noticed that is where you used your media queries.
  2. Do not use margin: auto on the body element.
  3. I would encourage you to set the body element as flexbox and center your card using justify-content: center, and align-items: center. Your card will always be centered and you can use this as the basis for making it responsive.
  4. To position your background, use background position property to position it in the x and y axis. Here is a short and concise resource on the background position property on w3Schools
0

@Abdul400

Posted

@Abdul400 here is also another useful video on flexbox on Youtube

Marked as helpful

0
Amaka 100

@amakaogujiofor

Posted

@Abdul400 Amazing!! Thanks Abdul, I struggled a bit with positioning the patterns. Thanks

0

@Abdul400

Posted

@amakaogujiofor if you grasp the concepts of flexbox, and position: relative and position: absolute position will be so much easier. I encourage you to understand those concepts and try designing again. You'll see alot of difference in positioning elements.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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