3-column preview card component with flexbox

Hay ! Rabie Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

Hello @Rabie-Abdullah,

I have some suggestions regarding your solution:

• For any decorative images, each img tag should have empty alt="" (as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images .

• you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

.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;            
}

• border-radius and overflow hidden to the main container(that wraps the three cards).

• Never use px for font size

• using widths in percentage. Not a great idea as you're losing control of the layout. Use max-width instead, let it grow to a point.pl

Hopefully this feedback helps