Design comparison
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
- @tomthestromPosted over 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
1@DrallasPosted over 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
1@tomthestromPosted over 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
0 - remove the element with
- @DrallasPosted over 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.
1 - @tomthestromPosted over 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
beforeandafterpseudo-elements.margin-right: -50%;on the card is pointless, you're already positioning it viapositionandtransform.Good luck and have a good day,
Tom
1 - @OlehTovkaniukPosted over 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
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