@PhoenixDev22
Posted
Hello @itzjter ,
I have some suggestions regarding your solution:
-
For any decorative images, each img tag should have empty
alt=""
(as you did )andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images . -
you can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech).and use <h2 > instead of <h1 >this helps search engines better understand the primary subject matter of each page,
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
-
swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right.
-
Use
footer
for theattribution
. -
border-radius
andoverflow hidden
to the main container(that wraps the three cards. -
Never use
px
for font size -
It's rarely ever a good practice to set height on the element Let the content dictate how tall something needs to be.remove height on the component , it is not needed and will only ever cause bugs. Let the height of the component be dictated automatically by the browser - it will be added up height of the cards contents, padding, and any vertical margins on that content.
-
an explicit width is not a good way . Remove the
width
from component and change it tomax width
instead for the card.
Hopefully this feedback helps
Marked as helpful
@itzjter
Posted
@PhoenixDev22 yess it helps, I will do it assap! Thank you very much :)