Time Tracking Dashboard - Utilizing neat CSS tricks and JavaScript

Community feedback

• 

  Anton Sukhadolets•330

  @SuhodolecA

  Posted over 3 years ago

  Hello! Nice work! You could improve your solution using transition property for interactive elements. For example: .menu-link { margin-left: 0.9rem; cursor: pointer; transition: color 0.3s linear; } .menu-link:hover { color: hsl(0, 0%, 100%); } It gives you smooth animation.

  Also, you can add cursor: pointer property for .regular-card element. And you could resolve problems with cards(parent background is visible when resizing page) using :

  1. For parent overflow: hidden;
  2. For child height: 100% Like this: .regular-card { border: 1px solid var(--Very-dark-blue); border-radius: 0.8125rem; background-repeat: no-repeat; background-position: 93% -0.7rem; cursor: pointer; overflow: hidden; }

  .data-card { position: relative; background-color: hsl(235, 46%, 20%); border-radius: 0.8125rem; padding: 1.75rem 1.5rem 1.8rem 1.5rem; margin-top: 2.4375rem; height: 100%; }

  Good luck!

  11

  Marked as helpful