@Bayoumi-dev
Posted
Hey *Charles, It looks good!...
My suggestions:
1.There is an issue with the view-icon
transparent... to fix it, Use background-color: hsla(178, 100%, 50%, 0.5);
instead of background-color: hsl(178, 100%, 50%);
and change opacity: 0.5;
to opacity: 1;
.overlay{
//...
background-color: hsla(178, 100%, 50%, 0.5);
}
.image:hover .overlay {
opacity: 1;
}
2.You have accessibility issues
that need to fix.
Document should have one main landmark
, Contain the component with<main>
.
<main>
<div class="container">
//...
</div >
</main>
Page should contain a level-one heading
, Changeh2
toh1
<h1 class="header">Equilibrium #3429</h1>
You should always have one h1
per page of the document... in this challenge, you will use h1
just to avoid the accessibility issue
that appears in the challenge report... but don't use h1
on small components <h1>
should represent the main heading for the whole page, and for the best practice use only one <h1>
per page.
I hope this is helpful to you... Keep coding👍
Marked as helpful
@lordlughas
Posted
@Bayoumi-dev thank you for your feedback. I appreciate. I am glad you took out time to review my code. I have looked through all you have suggested and implemented them where necessary. Looking forward to completing more challenges.
@Bayoumi-dev
Posted
@lordlughas You are welcome😊