NFT preview card using CSS

Hi Cristina Kelly, I saw your design, it was very well designed, but there are a few small issues that you can fix to help make your design better.

as follows:

• Create a folder called 'assets' and put all the files related to the challenge inside it.
• Define your web fonts inside css, by doing this you have helped the HTML code to be seen better, and in addition, the challenge you have designed will load faster because the fonts will be loaded after the design is fully loaded، and until then it uses the system font for display.
• It is better to use the 'a' tag for texts that can be hovered.
• Use the 'table of content' above your css code, this will help your css codes to be better seen and clean.
• Challenge design for mobile resolution.
• Adding design screenshots to challenge files.
• Do not ignore the 'README' file, because it displays information about your design.
• ...

By the way, I have created a fork in your repository, you can add all the changes to your project this way.

These are some of the tips that help to improve your design, you can see all the changes in the commits section.

Don't forget to practice, because the more you practice, the better and faster you will design.

Happy coding :)

👾Hello Cristina K., congratulations for your new solution!

Your solution is just great, you've a really good work wrapping everything and using semantic tags, nice also the you've used rem values.

Here's my tips for you:

Here's how to fix the responsivity for the card:

.card {
    max-width: 35rem;
}

This is the correct value for the box-shadow

.card {
    box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);
    /* box-shadow: -1.5rem 2rem 0 hsl(217deg 52% 10%), 1.5rem 2rem 0 hsl(217deg 52% 10%); */
}

Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

👋 I hope this helps you and happy coding!

Hi Christina!

That looks fantastic! I noticed that you're using the BEM naming convention. It was recommended to me that I start using it as well. How have you liked using it and how does it compare with anything you've used in the past?

Thanks!

Dan