Hi
Try to improve the html on this
- use landmark elements like main
- use a heading element
- use img srcset or the picture element for the image
- use an unordered list with 3 items for the stats
- remove brs, use a span set to display block wrapping the word or number, no need for brs
This will set you a good foundation
It's good practice to use a css reset at the start of css every time. That would do things like change images to display block instead of inline block. That will fix the slight gap I see under the image on mobile.
Good luck
2
Some really quick css tips
- never ever have font size in px. Use rem
- no need for the pseudo to use mix blend mode. You can just have the background color on that half of the card
- you'll have better control letting things be 100% wide and using max-width in rem. If you use % widths all the time on bigger projects elements will gradually end up misaligned with each other
- no need for large margins. Just use flex or grid to center content on the page, along with either a little margin on the component or padding on the wrap ung element to stop content hitting screen edges
Marked as helpful
1
P
Hemanathan H P• 160
@hphemanathan
Posted
@grace-snow Thanks Grace will follow the tips
0
