Four Card Feature Section with HTML & Sass

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

I used Flexbox layout mode to finish this project. By combining an outer Flexbox for horizontal layout and inner Flexboxes for vertical content, I achieved a structure similar to Grid. In my next project, I'll try to explore Grid instead.

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

One challenge I encountered was when trying to add colorful borders to the top of the cards while maintaining the cards' rounded corners. Initially, I used the border-top property. However, the border followed the curve of the card’s border-radius, which wasn’t the effect I wanted. To overcome this, I added a custom div directly to each card and applied different colors. This approach ensured the border remained straight and sharp, without being affected by the card’s border-radius. Additionally, by using overflow: hidden, I made sure that any part of the border extending beyond the card's edges was hidden, preserving the desired sharp edge.

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

For the card borders, if you have different solution, welcome to discuss! Also, I would appreciate any feedback or suggestions regarding my code. If you have any recommendations for improvement, I’d be happy to hear them.