Responsive card page using CSS Flexbox and Grid

Hi Niladri,

Great solution, almost a perfect match!

Some great feedback from Buhaianu, in addition:

• you could clear up your accessibility report if you change <div class="attribution"> for <footer class="attribution">
• your design is jumping because you're adding a border to the button on hover, add it before and it should solve this
• as this design is one dimensional i think the more suitable option would be to use flexbox, here is some information that might explain what i mean further

Overall though great effort!

Good job on completing the challenge, @NiladriMallik!

Your solution looks pretty good overall. I have a few suggestions for you that I hope will prove useful:

• The background color is different. It's supposed to be a darker gray

• When you hover on one of the buttons, the card's height increases. That shouldn't happen.

• You should either keep a 3 columns or a 1 column layout when going into the tablet screen sizes. Currently, when you reach that resolution, you have 2 columns one next to another and the third is underneath.

• Consider using fractions for your grid instead of %

Hope this helps. Keep up the good work!

Thank you @Remus432 for the advice.

1. Yes, I had forgotten the background colour, added that now.
2. I couldn't think of a way to solve that problem, have solved it now.
3. Yes, I was confused about the layout of the tablet screen, I thought a grid layout with 2 columns would look good. However, I have solved that too.
4. And thank you for the fractions advice, shall certainly look that up.