@nityagulati
Posted
Hi Madi, nice work. The site looks good on desktop and all the cards are where they should be. Some pointers to further refine the code --
-
The card icons are not showing. You will have to update the
src
path for the images. -
Here's what you can do to cut down on the code repetition. You can add a separate class such as
card
to all the cards and add all the common attributes under that and keep the unique styling under the individual card classes such askarma
etc.
<div class="card karma">
.card {...}
.karma {...}
-
Have you looked into CSS Flex/Gridbox? If not, I would suggest giving that a try. It's very easy and convenient to use to create such layouts without having to use
position
. This also helps with making the site responsive, instead of adding positions for each breakpoint. -
The next step would be to look into media queries to make it mobile-friendly. Also, you can look into the mobile-first approach as Ndoy3m4n suggested. You can code for the mobile breakpoint and then use
min-width
to scale it up. This helps cut down on the code and also has performance gains when loading the site on mobile.
Keep up the good work!