Raymart Pamplona• 16,120
@pikapikamart
Posted
Hey, really nice work on this one. The layout in general looks really great and it is responsive as well which is nice.
Some suggestions on the site would be:
- Since you are treating the image as an interactive component, make sure that an interactive element is present as well on this one. It could either be
button
ora
tag for this. Think about on what will happen if the image is clicked, will it preview the image on a modal for example? If yes, usebutton
. But if it would take the user to a page to see the nft information, then usea
tag. I haven't tackled this one yet so I can't provide a reference. But for this, I would usebutton
and my markup would look something like this:
<div class="image__holder">
<img src="" alt=""> # the nft image
<button class="image__toggle">
<span class="visually-hidden">Preview equilibrium on large size</span>
</button>
</div>
My button
will be position: absolute
and will be relative to the .image__holder
. It will be set to using like inset: 0 0 0 0
so that it will take full height and width. The overlay will just be set to my button::after
.
button:hover::after {
show overlay
}
- You could use the nft name as the
alt
for the image since the nft name is already present so why not use it if it is distinct. - The
h1
is being treated as interactive as well. Use ana
tag as theh1
inner element:
h1
> a href="" { nft name in here }
- When wrapping up a text-content, make sure that it is inside a meaningful element like
p
tag or heading tag and not using likediv, span
to wrap the text. - Using an image-path as the
content
property value just simulates animg
using the same path but with "NO"alt
. Meaning it is bad. Instead, use the image path asbackground
for the pseudo-selector and not used in thecontent
props. - Person's image should be using the person's name as the
alt
value likealt="Jules Wyvern"
. Components like this where a person's information is presented, make sure to use their name as the person'simg
alt
value.
Aside from those, great job again on this one.
0