Skip to content
Submitted almost 3 years ago

NFT preview card

Volodymyr Balashov•510
@volod-one
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

Hello community of front end mentor. It's been a while. Here is my solution for this small challenge. I tried to focus on correct naming for classes and use BEM. And one more important thing, our components have to be clean enough to be able insert in section or other component without change our styles or do minimum of changes. This is one of the most important things which I've learned for last half year. So if you will try to inceare number of this cards, just uncomment some styles for parent component and our cards will display better. Please feel free to keep your comment and your doubts about my solution. And see you next time.

Community feedback

  • Stefan•730
    @stfnpczkPosted almost 3 years ago

    Looks great Volodymyr!

    Your code is nicely structured and well done in seeking a modular component approach.

    If you mind getting rid of the accessibility warnings in the report, you can do so by adding a main tag.

    Have a good one!

    1
    Volodymyr Balashov•510
    @volod-onePosted almost 3 years ago

    @stfnpczk Thank you for your feedback!

    Yes you was right. Adding main tag really helps to remove all those warnings about accessibility problems. Thank you.

    0
  • tst32•0
    @tst32Posted almost 3 years ago
    <details> skip this for EN <summary>RU version comment</summary> Посмотрел задание, там видно, что при hover как-то меняется задник, вы не обратили внимание? Я еще не понял баг это или фича. (может оно и не нужно?) короче у вас этого нет. </details>

    Not sure that all hover actions are applied as task prescribe

    0
    Volodymyr Balashov•510
    @volod-onePosted almost 3 years ago

    @tst32 Спасибо за отзыв! Не совсем понятно о каком именно элементе идет речь. Вроде, если смотреть на задание, то все моменты учтены и все hover эфекты работают корректно. Возможно у Вас в браузере что-то отображается некоррекно. С другой стороны, если речь идет о box-shadow для карточки, то да, её я сразу не заметил и буду поправлять.

    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