All solutions

Hi everyone 👋 - please see my solution to social proof section. Let me know your thoughts and if anything is not in line with best practice. Note my use of flexbox - would it have been better to use CSS grid - in my view I thought this was not required as doing a 1D design.

Finally managed to complete this one. I had trouble with the background but I think I have fixed this. Happy for feedback on my code - expecially in regards to backgrounds.

I think i also got the distinction right between padding and margin.

Any comments on best practice principles would also greatly be appreciated.

Feedback on my code please - is there anything i could improve on?

One question i did have was why i had to do overflow:hidden on the .card-section class to show the border-radius - can anyone explain this please?

Feedback welcome on my code please. Also anything i can do better re the background shapes - always seem to take me the longest to position them.

Hi All,

Please see my solution to the order summary component. Used mobile-first approach. Feedback on my code is always welcome.

Thanks!

This is the first true responsive design I have done for desktop, tablet and mobile - so would appreciate opinions on what needs to be improved or best practice principles which need to be applied?

One thing i did not is the layout does look different on laptops - what is the usual breakpoint people use for laptop media queries?

All feedback welcome.

Hi All

Would appreciate feedback on this please.

On the wrapper i did max-width: 22rem and width: 90% but did not seem to work if did max-width:20rem and width:90% because when i did this the width became to small it was c280px instead of c320px per the design.

Can someone explain this to me? I still got the width right but would like to know why i had to do 22rem instead of 20rem for this would to work.

Any other feedback on my code would be appreciated please.

Here is my attempt at the stats preview card. Feedback is welcome on both the responsive design of the component and the code.

Would be interested in seeing what other people did with regards to getting the purple overlay over the picture (i did it using linear gradient).

Also would be interested if anyone had an alternative way in doing the stats and the spacing, i used CSS grid.

Lastly i got the component card height in mobile design to match by adding a bigger margin bottom to the queries element - did anyone do anything different? Was this the correct approach?

Thanks all!

Here is my solution to the NFT preview card component. I also did the responsive mobile design to.

Would appreciate feedback on the design and any pointers on my code - new to coding.

Would also like to know what other peoples solution were in regards to how they did the color overlay on the image. Please review my version and give your thoughts/alternatives.