Using HTML and CSS

Hey there! You have done a good job on this challenge. Although I am not an expert, I can give you a few suggestions if you don't mind:

1. Try using a mobile-first approach; trust me when I say this because I too used to do it first-desktop-then-mobile, and it was not a good experience every time. Once you are done doing it mobile-first, work your way up to desktop, with appropriate media queries at certain breakpoints, where you think the section can look better, if the cards are placed a little differently. You can use one media query for the desktop itself and if you find that the tablet version can look a little different you may use a media query here too. For this one I guess just one for the desktop is good enough.

2. Centering elements both horizontally and vertically can be quite a drag but doing it horizontally is quite a breeze with margin: 0 auto. I observed that you used margin: 0 500px 2.5rem; to center your description para. Use margin: 0 auto instead of it and give it a certain width you see fit, like width: 50%. To prevent this percent from making your para get into one single line at very large widths of the viewport, set a max-width property to a container that wraps around the whole code, like a div or any semantically correct html element. There are many other ways to do this but this is the one I feel is easier to do.

3. You can use css variables to use colors at various places instead of hard-coding it to the properties, although it is up to you to decide, as naming those variables can be confusing sometimes.

4.You can group all the common styles for those cards under a single name like card, use this name as a class for all the 4 cards, and then use extra class names beside it or ids like card-1,2,etc..for applying styles unique to those cards itself. Some may say ids should be rarely used but for this challenge I guess its fine.

1. You can learn css flexbox/css grid and use it to easily place your elements instead of relying on position relative/absolute.