Responsive Four Cards Grid Layout using HTML and Vanilla CSS
Design comparison
Solution retrospective
Proud that I could complete it.
What specific areas of your project would you like help with?Looking for useful and constructive feedback!
Community feedback
- @MikDra1Posted 3 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@hamzafrontendPosted 3 months ago@MikDra1 Hi, thank you for your detailed explanation, but I think the top border is the simplest one, what do you say?
0@MikDra1Posted 3 months ago@hamzafrontend
Yeah of course, but at the design the top line is straight. On the border-top property you have applied the border-radius and if you create another element without the border radius that is the look that we want to achieve 😄😄😄
1@hamzafrontendPosted 3 months ago@MikDra1 now I got your point, thank you for your valueable feedback.
0 - @VirshreePosted 3 months ago
Hi @@hamzafrontend, Great job!! Looks exactly similar as design requirements.Keep it up...
2
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