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-card component using HTML and CSS

@OlamideAfunsho

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


I'd appreciate any feedback

Community feedback

@anderson-fndz

Posted

to make the container more like the design, try:

.container{
    width: 350px;
    height: 595px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(20, 37, 61);
    border-radius: 15px;
    box-shadow: 0px 20px 50px #00000080;
}

to make the container aligned try to use flexbox to make your project more responsive, using position would be more suitable for other functionalities

Marked as helpful

0

@OlamideAfunsho

Posted

@anderson-fndz how did you get the original measurements

0

@anderson-fndz

Posted

@OlamideAfunsho I used figma, exporting the original image and using the tools there, I used the rectangle and scaled it until it was the ideal size for the original project, it is a platform that will help you a lot to make your project more faithful to the original

0

@OlamideAfunsho

Posted

@anderson-fndz Thanks a lot, really helpful

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