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

Mobile-first solution using HTML/SASS/CSS

@DkP-Consult

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello,

I do my second challenge on Frontend Mentor. But, it was difficult to do the :hover section. I'know, had a littre difference for the icon in price & clock. I'll fix that soon.

Code review appreciate !

Thanks !

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hi DkP!

I would recommend you to eliminate the margin in the div with the class .card because it is not a good way to center an element, because at the end it is not centered vertically for all type of screen only for the one you occupy, so to the body you can add the following:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

With this you center it both vertically and horizontally and set a minimum height so that it is always centered in the middle vertically.

This is the only thing I can recommend, if you can generate a new report after you have made the changes written in the previous comment so that you do not get any errors in the report.

Good Coding!

Marked as helpful

0
Ahmed Bayoumi 6,740

@Bayoumi-dev

Posted

**Hey!**Congratulations on completing this challenge... You have some accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.
<main>
   <div  class="container">
      //...
   </div >
</main>
  • Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document.
  • All page content should be contained by landmarks, Contain the attribution with <footer>.
<footer>
   <div class="attribution">
      //...
   </div>
</footer>

I hope this is useful to you... Keep coding👍

Marked as helpful

0
Abdul 8,540

@Samadeen

Posted

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

  • You should use <main class="card"> instead of <div class="card">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
  • You can wrap your attribution section in a footer tag to avoid accessibility issues.

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

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