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 Preview Card Component using SCSS

Byte 260

@YonutDev

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


What should be improved?

Community feedback

@VCarames

Posted

Congrats on completing this challenge!

I noticed that you're using the Line Break Element <br> incorrectly. This element is used for making a line break in texts.

https://www.w3schools.com/tags/tag_br.asp

To create the space between the main text and the author section, you should use margin.

Marked as helpful

0
Lucas 👾 104,440

@correlucas

Posted

👾Hello Ionut Patrascu, congratulations for your new solution!

Your card component is just perfect, all the design specs are matching, one thing you can improve is the responsiveness, in this challenge you don't even need a media query, to manage the responsiveness of the card all you need to do is replace the properties width and max-width and you'll not how you card will behave.

Here's some changes I did for your code:

@media only screen and (max-width: 600px)
.card {
    max-width: 15rem;
}
.card {
    max-width: 20rem;

    padding: 1rem;
    border-radius: 15px;
    background-color: hsl(216deg, 50%, 16%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

👋 I hope this helps you and happy coding!

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