Skip to content
Submitted over 2 years ago

NFT preview card component

Luis Philip Cuenca•110
@CuencaGIT
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I think it's not quite the same as the example of how it should look, but I did my best and I'm still learning HTML and CSS hope that I can make this look alike as the reference suggests if I do learn more.

Community feedback

  • Account deleted

    It is good, but you are having the same issue I used to have, which is figuring out what the actual size of the elements in the design file are. Here's what you should do:

    1. If you are using Firefox, open the JPG design file in the Firefox browser.
    2. Right click anywhere on the site and select "Inspect".
    3. Select the "Responsive Design Mode" button which is the 3rd button in the top right corner.
    4. Alter the width size of the page to match the size that the design file is supposed to represent.
    5. Now you can start creating your site by mirroring the dimensions of the design file in the browser.

    Hope that helps. Cheers.

    Marked as helpful
    1
  • lilKriT•380
    @lilKriTPosted over 2 years ago

    You did well. Maybe it's not pixel perfect, but that's impossible without getting the actual design files. The website looks good enough :)

    One quick advice - you can line up the icon and text on the left using flexbox.

    1

Please log in to post a comment

Log in with GitHub

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