@PhoenixDev22
Posted
Hello @Gabriel-Leao,
I have some suggestions regarding your solution:
-
There should be two landmark components as children of the body element - a
main
(which will be the component) and afooter
(which will be the attribution). -
For any decorative images, each
img
tag should haveempty alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.` -
you can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech). and make the other heading tags toh2
.
.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;
}
-
don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.
-
border-radius
andoverflow hidden
to the container that wraps the three cards.so you don't have to set it to individual corners. -
You can use flexbox properties and min-height: 100vh; to the body to center the component on the middle of the page.
Overall , your solution is good . Hopefully this feedback helps