@PhoenixDev22
Posted
Hello @itzjter,
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 around the image
Equilibrium #3429. -
For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in (
alt="ethereum icon", alt="clock icon", alt="eyes"). -
the
icon-viewdoesn'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 bearia-hidden:trueor role presentation with empty alt -
The
alttext of theshouldn't be `avatar `, it should beJules Wyvern ``.Tips for writing 'good' alt text -
the link should be wrapping the original image and either have
Sr-onlytext, anaria-labeloralttext that says where that link takes you. -
You can use an unordered list
<ul>to wrapclass="info-row"and in each<li>, there would be<img >and<p>. -
No need for
<div class="divider"></div>, you can useborder-topto theclass="user-info".(in the html , there is<hr>do the same ). -
<main>can be the card wrapper(no need for section ) -
After removing
sectiontag and using<main>instead for the component ,To center the card on the middle of the page , you can use the flexbox properties andmin-height: 100vhfor the<body>like this : (no need for the absolute position )
body{
display:flex;
align-items: center;
justify-content: center;
width: 100vw;/*If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.*/
width: 100%;
min-height: 100vh;
.nft-card {
width: 350px;/* - an explicit width is not a good way . Remove the width from the card component and change it to ``max width`` instead for the card. That will let it shrink a little when it needs to.*/
height: 610px;/*, you almost never want to set the height , let the content define the height.
*/
padding: 24px;
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
border-radius: 20px;
box-shadow: 0 0 200px #000;
background-color: #14253d;
}
-
Never use
pxfor font-size. -
You should use
emandremunits .Bothemandremare flexible, Usingpxwon't allow the user to control the font size based on their needs.
Overall your solution is good , Hopefully this feedback helps.
Marked as helpful
@itzjter
Posted
@PhoenixDev22 Wow! Thank you very much for your help, i will always remember it. ^^
