darryncodes• 6,430
@darryncodes
Posted
Hi Ajay,
Really impressive solution, it works flawlessly!
Not much to say but here is some insight from me:
- I noticed a little
border-radius
on the top right of the image on desktop where it shouldn't be - I'd consider working on your accessibility report. Using semantic html and the correct heading structure. Swapping
<div class="card">
for<main class="card">
and change yourh3
for ah1
to clear the report. - It's fair to argue this is more of a component and the
h1
would be elsewhere in the overall design. You could consider a screen reader only heading with this snippet:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Marked as helpful
0
Ajay Pal• 190
@ajay0024
Posted
@darryncodes Thanks your suggestions are really helpful. I will keep these points in mind.
0