Submitted almost 2 years ago

My second project { IT'S RESPNSIVE (: }

sm7654• 160

@sm7654

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It was great to work on this project.

I would like if you tell me what can i do better and how can i improve.

All feedback is wellcome.

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @sm7654, some suggestions to improve you code:

Unfortunately, it is not responsive. Your are using a width instead of max-width in the component's container.
The overlay hover on the NFT image is the incorrect color. It should be the same color as the text hover.
The Background Image Property is only to be used on decorative images. NOT images that add value and serve a purpose. For this challenge you want to use the Image Element 🖼.
Once you fix the image implementation, You'll want to include an Alt Tag with it. You want it to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.

Happy Coding! 👻🎃

Marked as helpful

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

Hi sm7654, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements or ARIA reference regions.

Example:

native HTML5 reference elements:

<body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

ARIA best practices call for using native HTML5 reference elements instead of ARIA functions whenever possible, but the markup in the following example works:

<body>
     <div role="banner">This is the header</div>
     <div role="navigation">This is the nav</div>
     <div role="main">This is the main</div>
     <div role="contentinfo">This is the footer</div>
</body>

It is a best practice to contain all content, except skip links, in distinct regions such as header, navigation, main, and footer.

Link to read more about: click here

The rest is great!

I hope it helps... 👍

Marked as helpful

sm7654• 160

@sm7654

Posted almost 2 years ago

@AdrianoEscarabote thanks fo your tip i will apply it on my next project

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @sm7654, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

Here's how you can add the hover effect:

Container needed to position the overlay. Adjust the width as needed

.container {
  position: relative;
  width: 100%;
  max-width: 340px;
}

Make the image to responsive

.image {
  width: 100%;
  height: auto;
}

The overlay effect (full height and width) - lays on top of the container and over the image

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}

When you mouse over the container, fade in the overlay icon

.container:hover .overlay {
  opacity: 1;
}

The icon inside the overlay is positioned in the middle vertically and horizontally .icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }

When you move the mouse over the icon, change color

.icon-eye:hover {
  color:  hsl(178, 100%, 50%, 0.5);;
}

👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

✌️ I hope this helps you and 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