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

NFT preview card component

DawidMTXโ€ข 170

@DawidMTX

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


Please, check my code and let me know what you think about it

Community feedback

Travolgi ๐Ÿ•โ€ข 31,420

@denielden

Posted

Hi DawidMTX, Great job!

You can use height: 100vh to set height equal to screen height.

Viewport Height manages the dimensioning of an element in relation to the height of the browser window.

Keep it up!

Marked as helpful

0
Web Wizardโ€ข 5,690

@rsrclab

Posted

Hi, @DawidMTX ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like the way you did image overlay here.

Here are some of the tips I like to provide.

  1. I hope you to add transition on heading and creator name.
  2. I suggest you to try BEM for classing the elements.
  3. About positioning elements on screen, limiting body width isn't good I think. Using flex and align-items, justify-content will solve the issue effectively.

https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

Cheers ~

0

DawidMTXโ€ข 170

@DawidMTX

Posted

Hi, @tymren608

Thanks for the advice, I will definitely use it and review your code also. Have a nice day!

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