Responsive four card selection using BEM notation, transition
Design comparison
Solution retrospective
I managed to use transitions for hovering the cards, BEM notation and also a layout for tablet view.
What challenges did you encounter, and how did you overcome them?It was difficult to make the layout for the desktop design. I used to CSS Grid Garden resource that was provided in the learning path to get familiar with grid properties. Then I could easily implement the layout.
Community feedback
- @MikDra1Posted about 2 months ago
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
Marked as helpful1@hellcsabaPosted about 2 months agoHi, thank you for the kind words!
To be honest, I didn't noticed that the top colored lines are full straight and my current solution has a slight curve. I appreciate the help, I'm gonna take a look on it.
Have a nice day!😊
0 - @StroudyPosted about 2 months ago
Looking at your code aswell I learned another way, On the
.features__icon
I usedmargin-left: auto;
and you usedalign-self: flex-end;
Same job different way, This is why I like looking at other peoples solutions.Marked as helpful1 - @StroudyPosted about 2 months ago
Hey, I'm not doing any deep dive code reviews at the moment but I took a quick look at the code and noticed that removing the
max-width: 20%;
property from the.features__icon
class seems to improve the visual presentation. The icon appears less constrained and more proportionate without the shrink effect.1@hellcsabaPosted about 2 months agoHi, thank you for your comment. I'm not gonna lie, I checked the difference on the live site with and without the max-width: 20%; propery but I don't see any difference at all. I checked it different screensizes as well. Can you elaborate it what shall I experience?
1@StroudyPosted about 2 months ago@hellcsaba, Between 230px - 422px and 640px - 830px, the icon size decreases, while the text size remains static, creating a visual imbalance between the icon and the text. It is a small difference but removing that
max-width: 20%
from.features__icon
solves that issue.0
Please log in to post a comment
Log in with GitHubJoin 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