@PhoenixDev22
Posted
Hello @DarilInsanKamil ,
I have some suggestions regarding your solution:
-
There should be two landmark components as children of the body element - a
main
(which will be the component ) and afooter
(which will be the attribution).<Footer>
should not be in the<main >
. HTML5 landmark elements are used to improve navigation . -
Anything with a hover style in design means it's interactive. you need to add an interactive element
<a>
around the image ,Equilibrium #3429 and Jules Wyvern
. -
Page should contain a level-one heading . In this challenge , you can use
<h1>
for Equilibrium #3429 instead of<p >
as you should have used a header . -
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 inicon-ethereum, icon-clock
-
The avatar's alt shouldn't be **profile ** , it's meaningless . you can use
Jules Wyvern
. -
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
<ul>
to wrap theclass="minting"
, and in each <li> there would be<img >
and<p>
. then use the flexbox properties to aligh them centrally. -
No need for all this
<div class="separator"></div>
, as you simply can use ``border-top:to the
.class="profile"` -
For the avatar 's part , you may use
<figure >
and<figcaption>
. -
Using widths in percentages , makes you lose the control of the layout , consider using max-width: 21.875; instead and a little padding to the body or margin to card that will make the card shrinks a little when it's needed.
-
using
min-height: 100vh
instead ofheight: 100vh
allows the body to to grow taller if the content outgrows the visible page. -
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.
You might have a look at my solution , it might my helps.
Overall , your solution is good. Hopefully this feedback helps.