Design comparison
Solution retrospective
Kindly review and share with me areas where I can improve on in future projects.
Community feedback
- @Bayoumi-devPosted over 2 years ago
Hey Bilikisu,
You have some
accessibility issues
that need to fix.Document should have one main landmark
, Contain the component in<main>
.
<main> <div class="card"> //... </div > </main>
Page should contain a level-one heading
, Changeh3
toh1
You should always have oneh1
per page of the document.
<h1>Equilibrium #3429</h1>
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 creatingpseudo-elements
(::after
,::before
) to use one as anoverlay
and other forview-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 helpful1@BAderintoPosted over 2 years ago@Bayoumi-dev Thank you so much for your time and review. This is quite elaborate and I really appreciate your support. I hope to improve on it and use the knowledge in my future submissions.
0@BAderintoPosted over 2 years ago@Bayoumi-dev Thank you so much. I made the changes and it was worth it.
0@BAderintoPosted over 2 years ago@Bayoumi-dev I just noticed the view icon is displaying in the left-hand corner of the div in chrome browser but displays well on internet explorer. Any suggestion how I can fix this?
0@Bayoumi-devPosted over 2 years ago@BAderinto the view icon in the middle of the div icon in chrome, there is no issue. but I noticed there is another issue that the view icon has transparent, because you gave the overlay element when hovering on it
opacity: 0.7;
to fix it usebackground-color: hsla(178, 100%, 50%, 0.5);
instead ofbackground-color: hsl(178, 100%, 50%);
and changeopacity: 0.7;
toopacity: 1;
.overlay { //... background-color: hsla(178, 100%, 50%, 0.5); } .equil-image-container:hover .overlay{ opacity: 1; //... }
Marked as helpful0 - @drAsifAli123Posted over 2 years ago
Make last image border'width to 1px and border-color to white(#fff). Change top image border-radius to 4% and outer div border radius to 4% give body a line-height of 1.5 and set margin between last ethereum and <hr> and also between <hr> and last image and <p>. By doing these changes your design will look better. hop you will like the outcome. If you do then like this. And all the best for next challenges.
Marked as helpful0@BAderintoPosted over 2 years ago@drAsifAli123 Thank you so much for your review. I really appreciate your feedback and I will update my project and add this to my knowledge.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord