Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive css using flex

@Mirna-Latif

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Be free to comment or add any advise.

Community feedback

@AasishSapkota

Posted

You should increase the size of container it's too small use this : container{ min-width: 350px; min-height:400px; }

I've find out you have removed the attribution tag. The attribution tag can sometimes be a nuisance/eye-sore to the rest of the design but it does allow a developer signature of some-sort if exercised...I usually give it a position of absolute and bottom:0 which should kick it to the bottom of the screen and then give it width of 100% and text-align:center so it's just centered at the bottom and generally out of the way.

You haven't built active features of the site or hover features consider adding those you can take help from my solution also.

You've done preety good job congrulations for your project.

Marked as helpful

0

@Mirna-Latif

Posted

@AasishSapkota Thanks very much for your comment, I really needed it. I am just a beginner and I want to ask about the report, it tells me that I should have one main landmark, what should I do?

0

@Christ-Kevin

Posted

@Mirna-Latif Hello congrats on uploading your solution.

my suggestion is that you should use only one main tag as the only child of the body to get rid of the warning "All page content should be contained by landmarks". Then you'll put all the tags you actually have inside this main tag. I also noticed that you forgot the hover state on Equilibrium and Jules Wyvern. But in general your work is great.

Keep coding

Christ

Marked as helpful

0

@Christ-Kevin

Posted

@Christ-Kevin you also need a hover state on the image. Do not forget it :)

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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