Submitted about 3 years ago

The Profile Card Component (HTML & CSS only)

drallas• 375

@Drallas

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my 3rd newbie challenge submit and I enjoyed the process of hacking this card component together. Building such a 'simple' card component isn't easy for a 'Newbie' and it requires some time to think over before trying to do it properly.

Feedback would be welcome How is the responsive experience; what can / should I improve (*see Note)? I try to use BEM but still have doubt if i used it correctly Anything else that I missed or should improve.

Note: Related to BEM I recommend this video: https://www.youtube.com/watch?v=iyR6RXUZFQ8 it's quite good and explains it in visual detail.

Where I struggle is how should elements be named when there are multiple levels of nesting.

<div class="card__mid">
          <div class="card__text">
            <div class="card__name">Victor Crest <span> 26</span></div>
            <div class="card__location">London</div>
          </div>
        </div>

Community feedback

tomthestrom• 165

@tomthestrom

Posted about 3 years ago

Hi Drallas,

here is how you could do it with linear-gradient (and background layering):

remove the element with class="card-top"
apply this to the element with class="card": background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 39%, white 39% 100%), url(./images/bg-pattern-card.svg);

So basically you are:

setting a gradient from top to bottom
setting a background image on the element
applying an opaque color from 0-39%
the background image is visible in the 0 - 39% horizontal range through the opaque color
the background image is covered with white in the 39 - 100% range.

Let me know if it's not clear.

Have a good day,

Tom

drallas• 375

@Drallas

Posted about 3 years ago

@tomthestrom

Thanks a lot Tom!

Couldn't reply quick, i needed first to find a moment to research it good, play with the values and document it properly .

Eventually i set this to the .card class. : background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 37.5%, white 37.5% 100%), url(./images/bg-pattern-card.svg); removed the card-top class, the empty div and the redundant css.

I also updated the my solutions and documented it more detailed in the readme.md on GH -> https://github.com/Drallas/Profile-Card-Component

tomthestrom• 165

@tomthestrom

Posted about 3 years ago

@Drallas Glad it was helpful. :) Your repo looks really nice, I like how you go into details to explain what you're doing.

Take care,

Tom

drallas• 375

@Drallas

Posted about 3 years ago

Hi Tom

Thank you for your feedback on BEM.

My class="card-top" has background-image(s) background-image: url(./images/bg-pattern-card.svg); I'm not sure how i could replicated that with a 'linear gradient' or a :before pseudo element; but I'm learning so i will do some research it a bit, perhaps it opens my eyes.

The margin-right value is removed, this was the first time that i used transform so I'm still figuring out what works best.

tomthestrom• 165

@tomthestrom

Posted about 3 years ago

Hey, I think you're using BEM good, but since I already checked out the code a bit, I have something to add.

Creating the element with class="card-top" could be avoided by using linear gradient for the card background. That element (card-top) has no semantic value as it is now.

Alternatively in this case if you're styling and creating an element only for the purpose of implementing a design, try doing it with the before and after pseudo-elements.

margin-right: -50%; on the card is pointless, you're already positioning it via position and transform.

Good luck and have a good day,

Tom

Oleh Tovkaniuk• 505

@OlehTovkaniuk

Posted about 3 years ago

you could make width of your card block be "max-width", then it would look good at 350px screen resolution and lower

Please log in to post a comment

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