Skip to content
Submitted about 2 years ago

Profile card - CSS Grid

Lucca Rodrigues•430
@ChromeUniverse
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

  1. Any tips on how to guess the card's box shadow parameters from the design preview images?
  2. How do I properly position the circle images in the background?
  3. Best practices for creating designs with overlapping elements? (such as the avatar card's profile picture over the background image)

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @ChromeUniverse,

    For me what works is to sometimes structure my HTML while keeping the CSS in mind for example I see three sections where the image is in the middle section which mean when it comes to the CSS I can simple use margin-top with a negative value to pull it up. Overlapping elements will most likely be done with the position property in the CSS. Let me know if you have any other questions.

    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