All comments

Dom B• 190
@dombrga
Submitted almost 3 years ago
Hello. Here is my solution. It will be very helpful to me for any feedback.

I put the attribution at the bottom. I found it hard to center without having to add another height for the screen. I used position: absolute and right=left=0 but I did not understand it. (Please look at my "attribution" CSS class)

Thank you!
NFT Card component with Flexbox
1
Gabriel Cavalheiro• 60
@gccavalheiro
Posted almost 3 years ago
Hello Dom, you can do it in an easy way using this way

<footer> <p>Text Here</p> </footer>

footer { display: flex; align-items: center; justify-content: center; position: fixed; left: 0; bottom: 0; width: 100%; padding: 28px 0; text-align: center; line-height: 23px; } footer p { padding: 0 20px; }
Marked as helpful
0
👾 Ekaterine Mitagvaria 👾• 7,600
@catherineisonline
Submitted almost 3 years ago
Hello, Frontend Mentor community! This is my solution to the NFT preview card component.

I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

Thank you
NFT preview card component
16
Gabriel Cavalheiro• 60
@gccavalheiro
Posted almost 3 years ago
Good work! a fine tuning tip if you want to do it...

in your <div class="container-image"> add the following properties in css: border-radius: 5px;, overflow: hidden; and line-height: 0;

you can remove the "border-radius" from your tag <img class="main-image" />

the code I indicated will make the children respect the format of the parent div(container-image) with this both its overlay and the image have rounded edges, the "line-height" will make its image and its overlay have a better framing, thus removing that difference in sizes that is at the bottom, "a small space"
0

Albert Assan• 10

@atomia11

Submitted almost 3 years ago

Please need help with the active state for the image. Thanks

nft card design

Gabriel Cavalheiro• 60

@gccavalheiro

Posted almost 3 years ago

Here's an example, you could create an "overlay" div after the image and its initial state would be "opacity: 0" and when the user hovers over the container where the image is, you would apply the "opacity: 1"

HTML

<div class="card-img">
  <img src="./assets/images/image-equilibrium.jpg" alt="Image Equilibrium" />

  <div class="card-image-overlay">
    <img src="assets/images/icon-view.svg" alt="Icon View">
  </div>
</div>

.card-img {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.card-img img{
  object-fit: cover;
}

.card-image-overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  background-color: hsl(178, 100%, 50%, .5);
  transition: .3s;
}

.card-image-overlay img {
  width: 48px;
}

.card-img:hover .card-image-overlay {
  opacity: 1;
}

Nishant Sawant• 70
@Nishant-afk
Submitted almost 3 years ago
Please provide suggestion on writing efficient code:

I have used very basic of html/css to do the card.

I had a hard time trying to do the active states of images and the line with images + text(the 3 days left): is there a better way?

I did try to match everything as i can but i can't seem to make it fit in one page(the vertical height- tried using max-height and setting the height but no success) NEED HELP FOR THIS

nft-preview-card-component(html&css)
3
Gabriel Cavalheiro• 60
@gccavalheiro
Posted almost 3 years ago
Analyzing your code, in the part where you talk about coin and days, you could use the flex box,

Example:

HTML

<div class="body-info"> <div class="coin"> <img src="./assets/images/icon-ethereum.svg" alt="Icon Ethereum"> 0.041 ETH </div> <div class="days-left"> <img src="./assets/images/icon-clock.svg" alt="Icon Clock"> 3 days left </div> </div>

CSS

This code will make the child divs next to each other on the same "line", position the children to the far edge of the parent div, and center the children on the Y axis.

.body-info { display: flex; flex-direction:row; align-items: center; justify-content: space-between; }

This code will make the icons and text stay on the same "line" and centered on the Y axis, using "flex: 1" will make the divs take up all the remaining space, as we have 2 "coin" and "days" divs -left", both will have 50% occupation of the parent div

.body-info .days-left { display: flex; align-items: center; flex: 1 or width: 100%; }

to perform the separation line I advise using an empty div or using the <hr/>

<hr class="divider"/>

.divider { margin: 24px 0 16px; border-top: 2px solid #FFF; }

*The code above is a short syntax that means: margin-top: 24px; margin-right: 0; margin-bottom: 16px; margin-left: 0;

To create the avatar, using the same flex box technique makes it simple

<div class="card-avatar"> <div class="avatar-image"> <img src="./assets/images/image-avatar.png" alt="Image Avatar" /> </div> <div class="avatar-text"> Creation of<a href="#">Jules Wyvern</a> </div> </div>

.card-avatar { display: flex; align-items: center; width: 100%; } .card-avatar .avatar-image { width: 32px; min-width: 32px; height: 32px; min-height: 32px; border: 2px solid var(--white); border-radius: 50%; overflow: hidden; margin-right: 16px; } .card-avatar .avatar-image img { object-fit: cover; } .card-avatar .avatar-text { color: var(--primary-soft-blue); letter-spacing: .6px; }

*To make a good avatar icon, I advise using a div and inside that div insert the user's image, with that you can use the css property object-fit: cover, making the image fit according to the size of the div father
Marked as helpful
1

Gabriel Cavalheiro

All comments

NFT Card component with Flexbox

NFT preview card component

nft card design

nft-preview-card-component(html&css)