Submitted about 1 year ago

nft-preview-card-component-main

Esraa Fadlyan•130

@esraa-web

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Atif Iqbal•3,200

@atif-devPosted about 1 year ago

Hi, congrats🎉 on completing the challenge. Better take care about following points.

You must be seeing some accessibility issues generated by FEM Report Generator. To avoid accessibility issue "All page content should be contained by landmarks" use code as :

<body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. So that someone can see project live after opening code.
For better preview, centered and responsive card, modify code as:

body {
  background: var(--very-dark-blue-main);
  font-family: var(--ff-Outfit);
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.container {
  color: var(--white);
  padding: .8em 1em;
  border-radius: 15px;
  background: var(--Very-dark-blue-card);
  width: 310px;
}

.card-img {
  height: 280px;
  border-radius: 10px;
  background-image: url(./images/image-equilibrium.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

Remove following blocks of code:

@media (max-width: 378px) {
  .container {
    width: 90%;
  }
}
@media (max-width: 420px) {
  .container {
    width: 85%;
  }
}
@media (max-width: 688px) {
  .container {
    width: 50%;
  }
}
@media (max-width: 1024px) {
  .container {
    width: 35%;
  }
}
@media (max-width: 378px) {
  .card-img {
    height: 280px;
  }
}
@media (max-width: 420px) {
  .card-img {
    width: 100%;
    height: 290px;
  }
}

--Got any questions, REPLY--

Hope you will find this Feedback Helpful.

Let's connect for learning📝 and sharing🤝. Twitter , LinkedIn , GitHub

Marked as helpful

Esraa Fadlyan•130

@esraa-webPosted about 1 year ago

@atif-dev

I appreciate your feedback on my code. I will use it to make the code better, and I have been helped greatly by it.

Thanks ..

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