Nft-preview-card using CSS Utility Classes and Semantic html
Design comparison
Solution retrospective
Hello everyone, does anyone know how to align the ethereum and clock icons with the text? Anything I could have done better?
Community feedback
- @RioCantrePosted over 2 years ago
Hello there! Nice work with this one. Looking at your solution, I would recommend the following for you...
- Add
display: flex;
andalign-items: center;
in the.price
and.time
rule set - Add
display: flex;
andjustify-content: start;
in.creator
rule set - Remove
border: 2px solid hsl(var(--clr-white));
in the hover state and add it in.avatar-img
, adjust it with1px
- Include description with the
alt
inimg
tag - Remove / uncomment the
attribution
, wrap it withfooter
tag and add your name and links to your work/portfolio
Overall, you did well. Hope this helps and Keep it up!
Marked as helpful1@FarzeenKistPosted over 2 years agoHey Rio, Thank you for the feedback, I will make the additional changes in the near future. Have a good evening/day : )
1 - Add
- @PhoenixDev22Posted over 2 years ago
hello @FarzeenKis , I have some suggestions regarding your solution:
-
Anything with a hover style in a design means it's interactive, you need to add an interactive element
<a>
around the image,Equilibrium #3429
andJules Wyvern
. -
Add obvious
focus-visible
styles as well to aid keyboard users -
The images don't need filled
alt
. They are decorative images, soalt
attribute should be left intentionally blank(as you did )and You can addaria-hidden: true
to ensure the images are always ignored by screen readers -
Text should never be in
spans
alone. Use a meaningful element. -
You can simply use unordered list
<ul>
to wrapclass="details
and in each list item<li>
would have<img >
and<p>
.
Hopefully this feedback helps.
1@FarzeenKistPosted over 2 years agoHey Phoenix, thanks for the feedback and giving out valuable tips. Will be making the changes soon, have a good day!
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