Skip to content
Submitted over 4 years ago

The Profile Card Component (HTML & CSS only)

drallas•375
@Drallas
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

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>
Code

Please log in to post a comment

Log in

Community feedback

  • tomthestrom•165
    @tomthestrom

    Hi Drallas,

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

    1. remove the element with class="card-top"
    2. 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:

    1. setting a gradient from top to bottom
    2. setting a background image on the element
    3. applying an opaque color from 0-39%
    4. the background image is visible in the 0 - 39% horizontal range through the opaque color
    5. 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

    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

    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

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

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