@PhoenixDev22
Posted
Hello @chiamaka-ugwu,
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 imageEquilibrium #3429
. -
For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in(icon-view, icon-ethereum, icon-clock
). -
The avatar 's alt shouldn't be
Avatar image
. It's meaningless , you can setJules Wyvern
to it. And for the equilibrium image should be descriptive. -
the
icon-view
doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt. -
the link should be wrapping the main image and either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you. -
You can use an unordered list
<ul>
to wrapclass="eth-time-bar"
and in each<li>
, there would be<img >
and<p>
. -
<p>Creation of <a href="#" class="">Jules Wyvern</a></p>
-
You can use
<figure >
or<ficaption>
for `class="credits". -
min-height: 100vh;
to the body using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page. -
Using percentage for the width , it's not a good way . Using percentages % for width can cause a lot of problem , consider using
max-width
to the card. That will let it shrink -
You should use
em
andrem
units .Bothem
andrem
are flexible, Usingpx
won't allow the user to control the font size based on their needs. -
Never use
px
for font size.
Overall, your solution is good, Hopefully this feedback helps.
Marked as helpful
@chiamaka-ugwu
Posted
@PhoenixDev22 Thank you so much!