@nityagulati
Posted
Nice work, Abhishek! The page looks good and is responsive. Few suggestions to improve upon the code --
-
Instead of using
<div>
tags for the card details, you should use<ul>
as they are a list of features. -
Use meaningful, descriptive class names to style the elements such as
card-list
orcard-details
instead ofrow
. -
Instead of adding another
div
-extra-height
and applyingheight
to it, you can simply addpadding-top
andpadding-bottom
to thecard-selected
element. -
I believe you are overusing the
display: flex
property on some elements that don't necessarily require it. The main element that needs it iscards
container that holds and aligns all three cards next to each other.
card
class (applied to each card) doesn't require flex property because<div>
elements are block elements and are naturally aligned in columnar/vertical orientation.row
doesn't require flex as you don't have any child elements within the rows that need to be aligned. Also if you use<ul>
instead ofrow divs
then they will be listed as a list (column) naturally.- you can remove all the accompanying flex properties from these elements as well.
flex-direction
align-content
justify-content
align-items
.
-
You can instead use
text-align: center
oncard
class to align the content within the cards. -
Removing Flex from
card
will resize the buttons. You can usewidth: -webkit-fill-available
for the buttons to stretch or specify a width using % (responsive) or px.
Keep up the good work!