Skip to content
Submitted about 3 years ago

using css flex and postions properties

prakhar•130
@Prakhar-99
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hii I learn many intresting thing in this challenge. please give my guidence regard this challenge it help me to improve my way of handle a nice code

Code

Please log in to post a comment

Log in

Community feedback

  • Purnima Kumar•390
    @purnimakumarr

    Hi Prakhar

    Congratulations 🙌, your solution looks quite good. I would suggest a few things.

    1. The font-family specified on the elements is not correct. You have specified the font-family: "Outfit" on the body but it is not being rendered correctly. It is beacuse of the import statement. The URL that you have specified is not correct. Its is actually an address which you can paste in you web browser and it will lead you to the page of Outfit font at Google fonts website and then you can select this font from there. The correct import statment would look something like this @import url('https://fonts.googleapis.com/css2family=Outfit:wght@300;400;600&display=swap');

    2. Also, you can define transition: all 0.3s on the .nft-img element so when someone hover over the image the transition is smooth rather than sudden.

    3. Lastly, the .nft-name and .author-name elements have hover effects on them as can be seen in the active-states.jpg in the design folder. You can implement that as well to improve you solution.

    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