Submitted 3 months ago

NFT Card Component

Drishti Saraf•120

@drishti1920

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of the clean and interactive design I achieved with my NFT card component. It was exciting to see how small details like hover effects, smooth transitions, and overlay elements brought life to the card.

Next time, I’d focus more on animations by using libraries like GSAP to make the interactions more dynamic and visually engaging. I’d spend more time testing the component for accessibility on different devices and with assistive technologies to ensure a more inclusive experience.

What challenges did you encounter, and how did you overcome them?

One of the challenges I faced was ensuring that the overlay and icon were perfectly aligned on top of the image during the hover state. It required fine-tuning the position, flexbox alignment, and z-index to make everything look seamless.

I used a combination of position: absolute and flexbox to center the overlay content and tested the layout iteratively to make sure it worked across different resolutions.

What specific areas of your project would you like help with?

Although I’ve added some basic accessibility features, such as semantic HTML tags and alt text for images, I’m not entirely confident in how well the component will be understood by screen readers. I would appreciate advice on best practices for improving accessibility for users who rely on screen readers, especially with interactive elements like the hover effect and icons.

Community feedback

Marzia Jalili•4,250

@MarziaJaliliPosted 3 months ago

Hey there!

Some sort of suggestion:

set the code below in the body selector to center the card:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Make sure that the card is the only child element of the <body>.

If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

<body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

Other than this your solution is spot on!

Keep up the grind🫡

Marked as helpful

Aakash Verma•9,500

@skyv26Posted 3 months ago

Hi @drishti1920,

I have a few suggestions for improving the responsiveness of your design:

Card Width:
Instead of restricting the width of your card, I recommend using max-width to make it responsive on smaller screens. This way, the card will adapt better to different screen sizes, especially on mobile.
Example:

.nft-card-container {
    max-width: 288px;
    margin: 4rem auto 0 auto;
    background-color: var(--card-bg);
    padding: 12px;
    border-radius: 10px;
}

Image Width:
When you apply the above suggestion, ensure the image width is set to 100% for better adaptability. This will allow the image to scale based on the card size.
Example:

.nft-image-container {
    width: 100%;
    border-radius: inherit;
    cursor: pointer;
    position: relative;
}

Unnecessary Width on Details Container:
Remove the fixed width from the .nft-details-container. This will help it adjust to the card’s width more naturally.
Example:

.nft-details-container {
    /* width: 270px; */
    padding: 1rem 0 0 0;
}

JavaScript Code:
I believe the JavaScript code you've used may not be necessary. You can achieve the same behavior purely with CSS, which could simplify your code and improve performance. 😊

Hope this helps! Let me know if you need further clarification. 🚀

Marked as helpful

Drishti Saraf•120

@drishti1920Posted 3 months ago

@skyv26 Thankyou for your feedback. Will try adding classes from CSS next time.

Aakash Verma•9,500

@skyv26Posted 3 months ago

@drishti1920 I have re-write your CSS to avoid using javascript

:root {
  --main-bg: hsl(217, 54%, 11%);
  --card-bg: hsl(216, 50%, 16%);
  --dark-blue: hsl(215, 32%, 27%);
  --soft-blue: hsl(215, 51%, 70%);
  --active-color: hsla(178, 100%, 50%, 0.596);
  --text-color: hsl(0, 0%, 100%);
  --paragraph-font: 18px;
}

.outfit-light {
  font-family: "Outfit", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.outfit-regular {
  font-family: "Outfit", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.outfit-bold {
  font-family: "Outfit", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--main-bg);
  color: var(--text-color);
  display: grid;
  place-content: center;
  min-height: 100vh;
}

.nft-card-container {
  max-width: 288px;
  background-color: var(--card-bg);
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nft-image-container {
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.bft-image {
  width: 100%;
  display: block;
}


.nft-image-container::after {
  content: '';
  background: url('./images/icon-view.svg') no-repeat center;
  background-color: var(--active-color);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  /* display: flex;
  align-items: center;
  justify-content: center; */
  /* border-radius: inherit; */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nft-image-container:hover.nft-image-container::after {
  opacity: 1;
  transition: opacity 0.3s ease;
}


.nft-details-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.heading {
  font-size: 21px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-active {
  color: var(--active-color);
}

.descripiton {
  font-size: var(--text-color);
  color: var(--soft-blue);
}

.specs {
  display: flex;
  justify-content: space-between;
}

.value {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--active-color);
}

.time {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--soft-blue);
}

.nft-owner-container {
  display: flex;
  align-items: center;
  border-top: 0.5px solid var(--soft-blue);
  padding-top: 1rem;
  gap: 10px;
}

.owner-image-container {
  width: 25px;
  border: 1px solid var(--text-color);
  border-radius: 50%;
}

.owner-image-container img {
  width: 100%;
}

.credits {
  font-size: 12px;
  color: var(--soft-blue);
}

.author {
  color: var(--text-color);
  transition: color 0.3s ease;
  cursor: pointer;
}

.author-active {
  color: var(--active-color);
}

.attribution {
  transform: translateY(1rem);
  font-size: 11px;
  text-align: center;
  width: 100%;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

And also re-write the HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | NFT preview card component</title>

    <link rel="stylesheet" href="style.css" />
    <!-- External font link ( Outfit ) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="nft-card-container">
      <div id="nft-image" class="nft-image-container">
        <img src="./images/image-equilibrium.jpg" alt="equilibrium-nft-image" class="bft-image">
      </div>

      <div class="nft-details-container">
        <h1 id="nft-name" class="heading outfit-bold">Equilibrium #3429</h1>
        <p class="descripiton outfit-light">
          Our Equilibrium collection promotes balance and calm.
        </p>
        <div class="specs outfit-regular">
          <strong class="value">
            <img src="./images/icon-ethereum.svg" alt="icon-ethereum" /> 0.041
            ETH
          </strong>
          <strong class="time">
            <img src="./images/icon-clock.svg" alt="icon-clock" /> 3 days left
          </strong>
        </div>
        <div class="nft-owner-container">
          <img class="owner-image-container" src="./images/image-avatar.png" alt="jules-wyvren-image" />
          <p class="credits outfit-light">
            Creation of <span class="author" id="author-name"> Jules Wyvern</span>
          </p>
        </div>
      </div>

    </div>

    <footer class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a
        href="https://github.com/drishti1920/Frontend-Mentor-Challenges"
        target="_blank"
        >Drishti Saraf</a
      >.
    </footer>


    <!-- 
  </body>
</html>

Marked as helpful

Drishti Saraf•120

@drishti1920Posted 3 months ago

@skyv26 Thankyou so much for your help.

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