Responsive nft priview card

Hello @Lawrencekalaw!

Your project looks great!

It's quite a challenge to add that hover effect with the overlay image properly. Here's how you can do it:

HTML

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

CSS

.pic {
   width: 300px;
   background: url('images/icon-view.svg') center center no-repeat;
   background-color: $Cyan-hover;
   background-size: cover;
   margin: auto;
   border-radius: 10px;
}
.icon {
   display: grid;
   justify-content: center;
   align-items: center;
   position: absolute;
   opacity: 0;
   background-color: $Cyan-hover;
   width: 300px;
   height: 300px;
   border-radius: 10px;
}
icon:hover {
   opacity: .5;
   cursor: pointer;
}

Just don't forget to change the class names to match yours.

I hope it helps!

Other than that, you did an excelent job!

Great work on this solution!

I noticed upon opening your site that the fonts don't match the ones shown in the design.

You've imported the correct font at the top of your styles.css file, but you haven't used it in any of the font-family properties.

To center the card on the page, you could use flexbox on the body element like so:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 50px;
  box-sizing: border-box;
}

.container {
  margin-top: 32px; ❌
}

min-height: 100vh sets the height to 100vh initially, but allows it to expand beyond that if the content requires it.

Then we use flexbox to center the content on the page.

I reset the margin to 0 and added some padding because whitespace is important for a page's visual balance and readability, which makes for a better user experience.

Alongside the padding, I added box-sizing: border-box as this allows you to have whitespace surrounding the card on smaller screen sizes and not run into an issue where the page scrolls even when there's enough space to fit all the content on the page.

This is because border-box makes it so that the padding and border of an element are included in the height and width calculations.

In order for your page to be more responsive, I would recommend against hard-coding the widths of the .container and .image1 elements.

Instead, you could set a max-width on the .container element and then add width: 100% to the image to make it take up all the available space inside the container:

.container {
  max-width: 300px;
}

.image1 {
  width: 100%;
}

I also noticed that you've hard-coded a height for the .container element.

I would recommend removing this height property and allowing the card to grow as much as it needs to.

While using margin-left: 59px works for the exact container width that you've coded this webpage with, it isn't responsive and doesn't change as the card width changes.

Instead, you could remove this margin and use flexbox to achieve the same effect:

.days {
  margin-left: 59px; ❌
}

.etherium {
  justify-content: space-between;
  flex-wrap: wrap;
}

By changing the justify-content property's value to space-between, you make it so that the two flex items are as far apart from each other as the container allows them to be.

If the viewport's width shrinks to the point where there is no longer any space left for both these items to fit on the same axis, the time left item moves below the cost of the NFT due to flex-wrap: wrap.

Other than that, this was a very good solution to this challenge, and I wish you good luck on your future projects!

Hope this has been helpful! :)