Design comparison
Solution retrospective
Color Banner on each card
Instead of using-border, I learned form @MikDra1
-
Create a Wrapper Element for Each Card: Ensure each card is positioned relatively. This allows for absolute positioning of child elements.
-
Add a Decorative Element for the Line: Inside each card, create an additional element (e.g., ``).
-
Style the Decorative Element:
- Set the
position
toabsolute
. - Apply the following styles:
height: 3px;
width: 100%;
top: 0;
left: 0;
background-color: [desired color];
(e.g.,black
)
- Set the
-
Positioning and Sizing:
- Ensure the card has
position: relative;
to serve as a reference point for the absolute positioning of the decorative element.
- Ensure the card has
-
Alternative with Pseudo-Elements:
- If preferred, use
::before
or::after
pseudo-elements to create the line:.card { position: relative; } .card::before { content: ""; position: absolute; height: 3px; width: 100%; top: 0; left: 0; background-color: [desired color]; }
- If preferred, use
This approach ensures that each card has a straight line at the top, and the use of relative and absolute positioning keeps the layout organized and consistent.
Community feedback
- @hellcsabaPosted about 2 months ago
Hi edpau,
I really like your solution, you did a great job. Your code is clearly understandable and you used the BEM notation perfectly.
The only difference I managed to notice compared to the design is that your card's background color is not exact the same white.
Happy coding!😊
1
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