Submitted about 1 year ago

NFT preview card component with HTML and CSS

zawseng13•80

@zawseng13

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

All feedback is welcome UwU.

Community feedback

Dean•480

@DeanogitPosted about 1 year ago

Hi @zawseng13

Great job completing and submitting this challenge, its looking great!

I was taking a look at your index.html file, I saw something you might be interested in.

Inside the <body></body> element you have used a <div></div> element, the use of semantic HTML could be improved.

 <div class="card">
      <div class="image">
        <img src="images/image-equilibrium.jpg" alt="" class="mainImg" />
        <div>
          <img src="images/icon-view.svg" alt="" />
        </div>
      </div>

      <h3>Equilibrium #3429</h3>

      <div class="description">
        Our Equilibrium collection promotes balance and calm.
      </div>

      <div class="price-days">
        <div class="price">
          <img src="images/icon-ethereum.svg" alt="" />
          0.041 ETH
        </div>

        <div class="days">
          <img src="images/icon-clock.svg" alt="" />
          3 days left
        </div>
      </div>

      <div class="creator">
        <img src="images/image-avatar.png" alt="" class="avatar" />
        Creation of <span>Jules Wyvern</span>
      </div>
      <div class="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by <a href="mailto:[email protected]">Zaw Seng</a>.
      </div>
    </div>

Here's what I suggest,

use a <main></main> element to wrap the content, documentation here
we can also use a <footer></footer> element to place the .attribution class outside of the main flow of the page, documentation here

So the solution could look something like this

<main>

   <div class="card">
        <div class="image">
          <img src="images/image-equilibrium.jpg" alt="" class="mainImg" />
          <div>
          <img src="images/icon-view.svg" alt="" />
         </div>
       </div>

      <h3>Equilibrium #3429</h3>

      <div class="description">
        Our Equilibrium collection promotes balance and calm.
      </div>

      <div class="price-days">
        <div class="price">
          <img src="images/icon-ethereum.svg" alt="" />
          0.041 ETH
        </div>

        <div class="days">
          <img src="images/icon-clock.svg" alt="" />
          3 days left
        </div>
      </div>

      <div class="creator">
        <img src="images/image-avatar.png" alt="" class="avatar" />
        Creation of <span>Jules Wyvern</span>
      </div>

  </div> // Close the .main-card class here 

</main>

<footer>
      <div class="attribution">
            Challenge by
            <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
            >Frontend Mentor</a
            >. Coded by <a href="mailto:[email protected]">Zaw Seng</a>.
      </div>
</footer>

Sorry for the really long comment! I hope this helps,

Above all, your solution is looking great! Well done!

Marked as helpful

zawseng13•80

@zawseng13Posted 12 months ago

Thank you very much for the tips.I will try them on my next challenge. @Deanogit

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