Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FrontendMentor | NFTCARD Results

willians45ā€¢ 20

@Willians45

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@DreamCoder7

Posted

great job, Willians;

But I see some issue with your styling and structuring your HTML file. First separating your style from HTML or ignoring inline style is way better for reading your code. Second you have a lot of accessibility issue because of your HTML structure.

Here are some changes I made in browser that should help with accessibility issue:

/*
<a href="">
  <img class="img" src="/images/image-equilibrium.jpg" alt="" />
</a>
*/
// The alt attribute is a semantic html (means a certain element have actually meaning and purpose attached to them)so don't ignore it. it's use full for accessibility and also SEO 
<a href="#">
  <img class="img" src="/images/image-equilibrium.jpg" alt="some image" />
</a>

<div class="lado">
   // why bothering using (<h4></h4>) and also even if you want to use you should use (<h3></h3>) tag because Heading levels are important!
   /*<h4><img class="img1" src="/images/icon-ethereum.svg" alt="">0.041ETH</h4>*/
  // you can fix like this:
  <img class="img1" src="/images/icon-ethereum.svg" alt="ethereum Icon">
  <p>0.041ETH</p>
</div>

 /* hr {
        background-color: hsl(215, 32%, 27%);
        border-color: hsl(215, 32%, 27%);
        height: 1px;
        width: 90%;
      } */

      // instead of using <hr /> tag you can do it like this. but still if you prefer using <hr /> tag you can use but it better to use like this
      .lado2 {
        border-top: 2px solid hsl(215, 32%, 27%);
      }

      /* Why?? 
      img.img2 {
           vertical-align: middle;
      }*/

    // Instead do this
   .im2 {
       vertical-align: middle;
    }

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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