Skip to content
Submitted almost 3 years ago

Time tracking dashboard attempt

Matthew•50
@Washemj
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello,

I struggled to complete the icons - making them go behind the background I couldnt do, and behind the card in front of them I did but struggled to get everything to line up. Any help on how this is actually done would be much appreciated!

Also how you get the text of the name to go next to the picture - I was trying by changing the display CSS but couldnt work out how to get two lines next to the picture.

Thanks

Community feedback

  • Robert Rynard•560
    @Robert-RynardPosted almost 3 years ago

    You can set your card to overflow: hidden if you want to hide the overflow of the image. Alternatively you may want to set that to a background image rather than an image in the html as it is for styling purposes and then it would not overflow as well. You could wrap the p and h2 in a div and then put display grid or flex on the parent so the children would be the image and the new div. Looks good!

    Marked as helpful
    2
  • Andrew Southern•390
    @whoamihealayPosted almost 3 years ago

    Hi, as Robert said go with a background image and use background-position to place them.

    Also for accesibility reasons, try to follow this rule of thumb: only one h1 per page, a h2 per section and then h3, h4 and h5 per cascading sub-sections.

    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