
Four card feature section using Vue
Design comparison
Solution retrospective
I learned how to create a responsive layout with CSS Grid.
What challenges did you encounter, and how did you overcome them?It was a challenge to structure the responsive grid layout and to get its constraints right.
What specific areas of your project would you like help with?border-top
creates those curved borders.
How to create such straight borders like in the mockup?
Community feedback
- P@MikDra1Posted 8 months ago
Nice one @MichaHuhn 😀
If you are curious how you can do this straight lines here is a 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
If this comment was useful please mark it as helpful 💗
Good job and keep going 😁😊😉
Marked as helpful0 - P@JomagenePosted 8 months ago
@MikDra1, @Micha Huhn
Thank you for the tips. I found something similar but prefer it over creating a new element. It involves using the
::before
pseudo-class, which eliminates the need to add another HTML element. Here's an example:div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.25rem; background-color: $color; }
The parent of the
div
must be relative of course.What do you think?
0P@MikDra1Posted 8 months ago@Jomagene
You’re right, it is also a solution to the problem 😁😁😁
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