@ZPolikarpov
Posted
Hello there! Good job on completing the challenge. Your solution looks very good, there are only some small point and ideas that I think would make your project a bit cleaner:
Instead of using a ::before on your li you could just use your li as the background by setting it's background-color and background-image. This way you have less elements in your document and don't need to play with position:absolute as much.
I suggest using buttons instead of links for the timeframe selection. By using links the whole document reloads on click, which looks weird because the images on the color stripes are flashing. For bigger projects and documents that would also impact performace, since you'd need to load everything again.
There's a weird cursor visual, where you color stripe on your card displays a cursor:pointer; but doesn't show any visual cue because it doesn't have a :hover state. As a user I would be unsure if clicking on the stripe would open the card itself as if I'd be clicking into the content below or an entirely different window. If you don't want it to be clickable you should remove the cursor:pointer on it. If you want it to do the same as clicking inside of the card content you should display the :hover effect of the card. If you want it to do something different, then you'd need a :hover effect on the color stripe to indicate a different function.
@kaamiik
Posted
Thanks for your feedback @ZPolikarpov For the timeframes I think It should be links. I added some references on the Solution retrospective and this page is like a tabbed interface and when you click on a link it's like you go to another page.
