All solutions

My doubt is just slightly related to this challenge but I hope to use it in the future: how to use calc with % signs? I have always used them with em or px but never with %. Also, I used a small animation for the arrow but just commented it out as it would have disappeared for the solution screenshot. Any feedback are welcome, especially with solving the 15 accessibility issues I have for this solution!!

Feedback are welcome.

The whole thing is perfectly centered since I saw it in my own browser but for some reason it doesn't seem to appear so in the design comparison. Any feedback regarding the site or the code itself are welcome.

Any feedback are welcome.

Any feedback on the code or site itself are welcome. I still don't understand accessibility issues (this solution has three!) properly so feedback in this area would be helpful.

I used css grid for this challenge. The mobile first went easy but I found it difficult to place things in the desktop approach; I was able to do it properly once I used some properties of css grid like align-self. I couldn't do a few things properly: applying the background svg in desktop version in a good way, **box-shadow for the button **(I was tired of finding the correct values for box-shadow so I skipped that) and in desktop version I couldn't shrink the outer container properly, so there is a small space left at the bottom of the image in desktop version, although it is faintly visible I need to find a way to fix it. There is an accessibility issue with the images. So, feedback in these areas as well any part you think can be improved would be helpful.

Used css grid to solve this one and realized it made things easier instead of making it complex once we get the hang of it; Used ul+li semantics instead of using just divs everywhere; I used a box-shadow different from the one given as making one always seems hard and weird in pondering with the spread, blur, using multiple shadows... I tried centering the whole thing vertically too...do give your feedback if you find something wrong with the code or the site itself.

Not super hard as there were no big illustrations involved; I used both CSS grid and CSS flex this time for different scenarios that I found were most suitable for; I could have used ul+li semantics but I kind of realized it later; nevertheless working with divs is comfortable for me; I just need advice regarding centering the whole social proof vertically. Any other feedback regarding the code or the site itself would be appreciated.

I have not not made this responsive yet, or so to say, not able to, with the illustration. To be honest, it is very frustrating with the illustration in the accordion but I got it running for the desktop version for now. I really need help with positioning the illustration or in short, need help with the illustration as a whole in mobile as well as desktop version. I have not even used the yellow box as I am unable to place it properly

Not a hard one but feedback to improve anywhere in the code are most welcome; do need suggestions or replacement for the hr I used to partition the profile and the stats.

It was an easy one. I tried out grid on a website for the first time and it is awesome to use. I just need feedback on the mobile design; in the media query for mobile devices, I changed the container height to 96vh so as to provide some gap at the top and bottom and used margin : auto auto ; to center it both horizontally and vertically; of course it was not centered vertically so I need suggestions in this area, or if this method of providing it some gap at the top and the bottom for mobile devices by changing its height is absurd of me, do suggest a better method to do this.... Also I provided it rounded borders in a rather long method so any suggestions in this area would be helpful.

I struggled with responsive design and even though it works for now I am not really sure if it is correct and need to some solid advice with handling images in responsive design. Media queries are not my cup of tea and so is working with images. I used the same desktop image for mobile responsive as using the picture element didn't make sense to me; I couldn't understand how to put the image attributes for the source element with the image and doubted if it would work.