Submitted 3 months ago

grid, flex box, html, css

Văn Thinh•80

@vanthinh01052001

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I understood more deeply than about grid template

What challenges did you encounter, and how did you overcome them?

At start, I was difficult with template grid, I searched on Google and I resolved it

What specific areas of your project would you like help with?

Nothing, but I like frontend mentor more and more

Community feedback

MikDra1•6,980
@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 😁😊😉
0
Văn Thinh•80
@vanthinh01052001Posted 3 months ago
@MikDra1 thanks so much. I resolved it by way is border-top: 3px solid (#color) and I have result sample my template. I wanna resolve it by way most simple
0
MikDra1•6,980
@MikDra1Posted 3 months ago
@vanthinh01052001

Yeah, you can use border-top but then if you zoom in you will see that the border-radius gets applied to this border as well. If you use some other element you won't get that border radius and the line at the top will be straight.
0

Please log in to post a comment

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