Submitted 9 months ago

nft-preview-component

Ojonimi182•20

@Ojonimi182

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that i was able to finish the challenge within a short period of time.

What challenges did you encounter, and how did you overcome them?

The challenge i encounter during this project was displaying the show icon over the picture when hovered on. And I overcome it with the help of of youtube videos.

What specific areas of your project would you like help with?

i will need help in arranging my HTML code in the proper HTML standard.

Community feedback

Jake Godsall•1,390

@jakegodsallPosted 9 months ago

Hi 👋

Congratulations on this project. It looks pixel-perfect to me!

A few ways you could improve what you've done here would be to:

Apply classes to the <img> elements representing the large image and the image that appears on hover and style using those.

Generally, inline styling of the type `style="height: 50px; width: 50px" is not recommended. A better approach would be to apply the classes:

<img class="image-main" src="./images/image-equilibrium.jpg" />
<div class="icon">
    <img class="image-overlay" src="./images/icon-view.svg" />
</div>

That way you could then style accordingly:

.image-main {
    width: 260px;
    height: 260px;
    ...
}
.image-overlay {
    width: 50px;
    height: 50px;
}

One of the benefits of this approach is that all of your styling will be within your `

Ojonimi182•20

@Ojonimi182Posted 9 months ago

Thank you very much I will do just that @jakegodsall

Jake Godsall•1,390

@jakegodsallPosted 9 months ago

@Ojonimi182 you’re welcome! Happy coding 😁

Please log in to post a comment

Join 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