Skip to content
Submitted over 2 years ago

Time tracking with timeframe switcher

James Holder•40
@2000andjames
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

I couldn't get the svg images to show how they do in the design so I left them out.

Getting more practice using flex to position and layout elements

.some-element {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

Community feedback

  • Ciceron•940
    @MarcusTuliusCiceronPosted over 2 years ago

    Hello,

    I think the following style will apply the image on the layer quite close as on the design.

    background-image: url(icon-study.svg);
background-repeat: no-repeat;
background-position: right top;

    If you want it to overlap the edges as on design you can try to position it with somthing like this:

    background-image: url(icon-study.svg);
background-repeat: no-repeat;
background-position: calc(100% + 10px) calc(100% + 10px);

    hope this will help :D

    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