Skip to content
Submitted about 1 year ago

Profile Card - With CSS Grid

Stefan•90
@Saitenhexer
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

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•240
    @samoinaPosted about 1 year ago

    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

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