@PhoenixDev22
Posted
Hello @guthierryschiavo ,
I have some suggestions regarding your solution:
You can use a landmark footer
for the attribution.<Footer>
should not be in the<main >
. HTML5 landmark elements are used to improve navigation .
- About
<h1>
it is recommended not to have more than one h1 on the page . You can add a<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech). THen swap those<h1>
by<h2>
.
.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;
}
-
width: 290px;
an explicit width is not a good way . consider usingmax-width
to the container that wraps the three cards. -
height: 450px;
It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it. -
border-radius
andoverflow hidden
to the container that wraps the three cards. -
use width: 100%;instead . If you set a page width, choose
100%
over100vw
to avoid surprise horizontal scrollbars. -
In
line-height: 25px;
, use unitless value for theline-height
, this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.
On the hover on the links , they go up . it's not normal . so for that you can use border:2px solid transparent ;
for <a> and on the hover they will be border:2px solid white;
. It's better to use
Overall , your solution is good . Hopefully this feedback helps.
Marked as helpful