Skip to content
Submitted almost 3 years ago

NFT Card Component

Nitin Kumar Pandey•60
@nitskp
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I can’t put text after SVG files. They just disappear no matter what I use. I have to use a <p> tag to make text visible. Can anyone tell me what's the problem?

<div class="row updates">
        <div class="col">
          <img
            src="./images/icon-ethereum.svg"
            alt="icon-ethereum"
            class="icons"
          />
<span>0.041</span>ETH

This is the pic of output without p tag. Next to Etherium Icon, there's no text Output

Community feedback

  • Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Hi, @nitskp ~

    Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

    Here are some of the tips I like to provide.

    • On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
    • I suggest you to try transition on hoverable elements like image, heading and creator name.
    • Please try BEM for naming element classes. It will help you a lot on bigger projects.

    https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

    Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

    Cheers ~

    Marked as helpful
    1
    Nitin Kumar Pandey•60
    @nitskpPosted almost 3 years ago

    @tymren608 Thanks for the feedback.

    The tips were very helpful. It is my first time hearing about BEM. I would look more into your solution after going through BEM. Thanks again.

    0
  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Nitin,

    Really good effort on your solution!

    Regarding your question, I can't see a solution where you wouldn't add the icon then p-tag - that feels like the right solution.

    I'd encourage you to look at clearing your accessibility/html report as good practice. You should use more descriptive html.

    Hope that helps!

    0
    Nitin Kumar Pandey•60
    @nitskpPosted almost 3 years ago

    @darryncodes Thanks for the feedback.

    I will use semantic tags from now on.

    The reason for asking about not using p tag was that when I was writing the code, I didn't use p tag the first time. So, text didn't show up. I was wondering why that happened?

    0

Please log in to post a comment

Log in with GitHub

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