Submitted over 3 years ago

Nft Card Component

@suatcg

A solution to the NFT preview card component challenge

Solution retrospective

I've been trying to put the left side to .author div element but I could not via flex-box. I supposed it has to work but it is centered on the card component.

Meanwhile, I didn't add to media querries out of it works responsively correct likewise I expected. I believe works due to accommodating the center of the body. If you look at it. I would be appreciated. then you could give your advice.

The last thing I would like to say, I will add a hover state later. I haven't done it yet.

Code

Please log in to post a comment

Community feedback

Nakoya Wilson•1,530
@nakoyawilson
Posted over 3 years ago
If you add align-self: flex-start to the .author div the content should align to the left.
```
.author {
  display: flex;
  align-items: center;
  align-self: flex-start;
}
```
Marked as helpful
jul_julham•210
@zulhamsy
Posted over 3 years ago
great work!, its so close to original design! I've some notes for you :D
- I think banner-image's height is a little bit shorter, it will be nice if you could increase it a little
- price info (0.041 ETH) should be a little bolder, I think its semibold (600 Weight) or so
- for 'author' section, I think you could use 'justify-self: start' for avatar image or 'justify-content: start' in author container, hope it helps
btw it still great work! keep it up!
Marked as helpful

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