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 - With CSS Grid

P
Stefan 90

@Saitenhexer

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


I found this one pretty difficult.

The whole layout and the spaces between things gave me some problems.

For the Statistics I used Grid. It seemed pretty logical to me. So i learned a lot about that.

Also the two background images and the positioning of those was a bit tricky. I found a very good solution which used the background-position property. I liked that solution very much. Unfortunately i could not find the link where i got it from.

Any comments on the solution?

Community feedback

Samoina 220

@samoina

Posted

Hi @saitenhexer,

I checked your code and noticed you used the background position for the circles on the page, at the top and bottom.

Just sharing that you might also consider using the z-index. So, essentially, the z-index allows us to place items 'in front' of each other. This way, an item with a higher z-index will stack in front of another with a lower z-index.

In my code, I placed the circle images directly in the body, and then everything else in the profile under 'main'. I then styled the 'main' section to give it a higher z-index so that it'd appear stacked infront of the circles.

.main {
	width: 20rem;
	text-align: center;
	border-radius: 10px;
	z-index: 1;
}

Hope this is insightful.

Happy coding!

Marked as helpful

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