Skip to content
Submitted 7 months ago

Responsive NFT card challenge using flexbox

Alan Matthews•120
@matthewsalan
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

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.

Community feedback

  • Sivaprasath•2,520
    @sivaprasath2004Posted 7 months ago

    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
    1
    Alan Matthews•120
    @matthewsalanPosted 7 months ago

    @sivaprasath2004

    Thanks for the tip. I had to change it a little to get the attribution to display correctly on Safari mobile.

    Tailwind CSS: relative md:absolute md:bottom-8 mt-3 md:mt-0

    0
  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 7 months ago

    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.

    1
    Alan Matthews•120
    @matthewsalanPosted 7 months ago

    @R3ygoski Thanks I'll keep this is mind for future challenges.

    0

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