Skip to content
Submitted over 1 year ago

Responsive NFT card challenge using flexbox

parcel, tailwind-css
Alan Matthews•120
@matthewsalan
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Most proud of finishing the challenge within a few hours and getting the final design fairly close to pixel perfect.

What challenges did you encounter, and how did you overcome them?

The overlay with the hover/opacity effect was a challenge and I had to Google for some example solutions to get it to work.

What specific areas of your project would you like help with?

I'm more of a back end developer so any advice on how to improve the CSS is appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Sivaprasath•2,500
    @sivaprasath2004

    Hello, I would like to extend my congratulations on completing this challenge.

    • I will give some suggestion i believe its used for improve your skill.
    • In .attribution tag to add challenge by and coded by it's not perfect in the mobile site.
    • Use this following code to change that will be proper work in the mobile devices.
    • In HTML <body><main></main><footer><div class='attribution'></div></footer></body> change to following structure . ` change the following CSS in your solution
    body{
position:relative;
}
.attribution {
    position: absolute;
    bottom: 0;
}
    Marked as helpful
  • Bernardo Poggioni•7,030
    @R3ygoski

    Hello Alan, your project is very good, and it's almost similar to the proposed design.

    One tip that can help bring your project even closer is to use a browser extension called PerfectPixel. I highly recommend it.

    I have just one suggestion. Instead of creating a <div>to center everything, try using just the body, as the body already has the primary role of being the background. So, using it for centering is highly recommended, and this way, you avoid having some extra tags in your project.

    I also noticed that you directly used an <svg>,tag in your HTML code. While this isn't wrong, we typically do this when we want to modify some properties of the svg, The more correct approach would be to import it using an <img/> tag.

    Another thing related to HTML is to focus on using semantic tags, as this greatly improves the accessibility of the page. It's a good practice to use them whenever possible.

    In my opinion, your CSS is very good. I didn't see any major errors or redundancies. Keep practicing and improving on the frontend; I'm sure you'll become a fullstack developer in no time.

    If anything I've said isn't clear, please comment below, and I'll try to help in the best way possible.

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