Submitted 3 months ago

Responsive Time-tracking-dashboard Vanilla

🔅 Yuliya 🐈•240

@O-Julia-O

Preview site View code

This is a solution for...Time tracking dashboard

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that I was able to create working tab switching and extract data from a JSON file.

What challenges did you encounter, and how did you overcome them?

It was challenging to adjust the cards to match the specified design. I added margins, paddings to the text, and line height, which helped align the card properly.

What specific areas of your project would you like help with?

I need help with grid layout and also with the JS code. Did I place the styles correctly, and is my JS code clear? What can I improve?

Community feedback

SpartanFranco•250
@SpartanFrancoPosted 3 months ago
Hello in layout, @media screen and (min-width: 70rem) { .hero__details { margin-bottom: 8rem; ---remove this rule; } .card__item { height: 300px;---- > height: 15rem; lower the px or change it to this measurement, which is more advisable to use relative measurements,

but you have to play with the height of -.hero_container- to make it as similar as possible; if you are using grid, you could enclose - hero_container- inside cards as well and declare .cards{ grid-template-columns: repeat(4,1fr ); grid-template-rows: 1fr 1fr; }

already:

hero_container { grid-row:1/span 2 } and then you wouldn't have to play so much with the height of the cards and the hero_container

} But still...Good job!!
0
🔅 Yuliya 🐈•240
@O-Julia-OPosted 3 months ago
hello, @SpartanFranco ! I wish I knew what you wrote here...
0

Please log in to post a comment

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