@Bayoumi-dev
Posted
Hey Asif, Congratulations on completing this challenge... You have some accessibility issues
that need to fix.
Document should have one main landmark
, Contain the component in<main>
.
<main>
<div class="content">
//...
</div>
</main>
Page should contain a level-one heading
, Changeh3
toh1
You should always have oneh1
per page of the document.All page content should be contained by landmarks
, Contain the attribution in<footer>
.
<footer>
<div class="attribution">
//...
</div>
</footer>
-
When hovering over the card title
Equilibrium #3429
and the creator nameCreation of Jules Wyvern
the color should be changed to cyan as recommended in this challenge. -
The active state for the image on the NFT preview card component is not working as recommended on this challenge. To do the active state for the image on the NFT preview card I suggest you wrap the image of the NFT with the
img-wrapper
element and create another element to make itoverlay
on the image, it contains theview icon
.
<div class="img-wrapper">
<img class="image-equilibrium" src="images/image-equilibrium.jpg" alt="Image Equilibrium">
<div class="overlay"><img src="images/icon-view.svg" alt=""></div>
</div>
Then add the following styles:
.img-wrapper {
width: ...; /*as you want*/
height: ...; /*as you want*/
position: relative; /*To flow the child element on it*/
cursor: pointer;
overflow: hidden;
}
.img-wrapper .image-equilibrium{
width: 100%;
height: 100%;
}
.overlay {
background-color: hsla(178, 100%, 50%, 0.5);
display: flex; /* Center the view icon with flexbox*/
align-items: center;
justify-content: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.img-wrapper:hover .overlay {
opacity: 1;
}
There is another way to do the active state for the image on the NFT preview card
by creating pseudo-elements
(::after
, ::before
) to use one as an overlay
and other for view-icon
.
Some Resources
- How to Center Anything with CSS - Align a Div, Text, and More
- 11 Ways to Center Div or Text in Div in CSS
- Pseudo-elements
- ::after (:after)
- ::before (:before)
I hope this is helpful to you... Keep coding👍
Marked as helpful