@StormKing969
Posted
Hi VINÍCIUS, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
- For fetching the JSON file in JavaScript, I'd take a look at this link (https://dmitripavlutin.com/javascript-fetch-async-await/). I think it might help you
- As for the issue you are having this one of the cards, that's because not all the cards have the same height. The solution for that is to use z-index and put the card-content on top of the card-icon. That way, no matter the size of the icon, the card-containers will have the same height.
I'd recommend that you try to learn SASS/SCSS as I believe that i makes life easier when write css. And its easy to learn
Overall you did well :)
Hope this help and happy coding!
Marked as helpful
@viniciusdsv93
Posted
@StormKing969 Thanks a lot for your tips, man. Only one question: i tried to put z-index: -1 on the coloured box and then z-index: 1 on the smaller one but it did not solved the issue. I keeps showing a tiny coloured border at the bottom of each box. I guess maybe i should create a bigger container and inside of it put one container at the top (where i can put the color and the icon) and another container under to put the card's content.
I'm going to look for the JSON manipulation info, thanks for the link and the help!
