Responsive landing page using CSS grid

Hi SHRIJA2, well done for completing the challenge.

I've sent you a Pull Request with some changes that might help you achieve what you wanted. Don't need to merge it, it's just for reference and will hopefully be useful to you.

Basically what I've done:

• Simplified the CSS a little, mainly media-queries and selectors.
• Main tag introduced to encapsulate the whole content of the challenge and since it is the most important content it makes sense semantically.
• External div for each <section> has been removed as it didn't serve any particular purpose.
• Transitions and cursor: pointer on element hover/focus introduced for better UX.
• Skills score and images displayed dynamically making use of the json file provided.

I merely looked at code readability and structure. Pixel perfecting would still need to be looked at and design guidelines would still need to be followed.

Hi Shrija, display the container as flexbox. Child 1 for left side and child 2 for right side "Summary" box. Now use "Justify Content as Center" and "Align Items Center". This might be a easy and efficient fix.

Hi Shrija2, I had issues with that too but I decided to set whole containers position to relative, then used top, bottom, right, left to adjust it's position.