Results summary component

Hey, Rohit I have gone through your code and here are some suggestions I have that can be easily incorporated into your code

.main-container {
 // remove height and width and instead use flex property and rem instead of px(1rem=16px)
 flex: 0 0 43.75rem,
}

.left-side{
 // remove width and add flex
  flex: 0 0 50%,
}

.right-side{
 // add align items property
 align-items : center,
}

Hi RoRajak and congratulations on submitting this solution.

Don't be so hard with yourself ("I made lots of mistake") 😊.

The layout looks quite well and accurate on desktop view. However, it looks like you struggled a bit with the mobile one. I'm sure that if you keep trying, you'll be able to improve. It's all part of the process.

Here are some other easy fixes that would help:

I've noticed that the intended font is not working.

Instead of linking from the TTF file: @import url(/results-summary-component-main/assets/fonts/HankenGrotesk-VariableFont_wght.ttf)

Try better with importing from Google Fonts: @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap')

Also, it looks like the images are not loading properly.

Try to replace the way you've linked: src="/assets/images/icon-reaction.svg"

With this way: src="assets/images/icon-reaction.svg"

I hope all this helps. Good luck and keep going!

Congratulations on finishing up this project. As I have seen your code, I can give a small recommendations that might help you consider few things.

1. Avoid using height and width with straight sizes, since with that you are limiting the responsiveness of the elements. Instead try using max-width and min-height.
2. You should always use relative units like %, EM, and REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element's size.

Good luck and happy coding.