Web Ninja 101 | Profile card component with BEM (I'm trying)

Hey, Papa Elhadj Abdoulaye NDOYE! 👋

Good work on this challenge! Your solution looks good! 👍

I suggest using CSS background images to add and position the two background SVGs since they are... background images! That'll make your HTML markup a little cleaner. Here's a helpful article on using multiple CSS background images, if you'd like to take a look. 😉

Keep coding (and happy coding, too)! 😁

Naming can be so tricky sometimes! Good effort on the BEM so far, however I did notice one thing:

Lines 27 and 32 card__content__top and card__content__bottom are quite different and going by your css they don't have many styles in common for them to be considered the same element of __content. I would personally call them card__main and card__footer. Or if it was a section at the top card__header.

In the instance that you did have styles that were mostly the same, just a different positioning you would use a BEM class like so: class="card__content card__content--top" and class="card__content card__content--bottom" and this is where using SASS really helps with using BEM classes because of the nesting:

.card
    *card styles here*

    &__content
        *card__content styles here*

        &--top
            *Unique styles for the top*

        &--bottom
            *Unique styles for the bottom*