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

@ilyass-oulhaj

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


Any feedback is welcome.

Community feedback

mihai2537 190

@mihai3636

Posted

Hey, there!

The component looks neat, great job! If you had troubles to reproduce the discs from the background, this is how I'd do it:

  • The top left disc seems to be a gradient from normal blue (the one you used in the background) to a lighter blue.
  • The bottom right disc is just light blue.
  • To place the discs, I would use position: absolute and place it relative to the main container. (if you don't know how to do that, google mdn css position absolute and if you still have troubles then ask here). You will also have to use a higher z-index to the card component in order to make it appear above the discs.
  • You could also try to give some shadow to the card, this is how the design seems to look like. I'd go first with something very little like shadow-box: 0 0 20px rgb(0, 0, 0, 0.1) and then see from here. Maybe increase / decrease the spread and the opacity.

Let me know if something is not clear or if you disagree.

Once again, great job and keep it up!

Marked as helpful

0

@ilyass-oulhaj

Posted

@mihai2537 Thank You very much for your feedback , all things are clear , thank you .

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