Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section solution - HTML and CSS

@ClemenceTafforeau

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I didn't struggle much with this one ; the only difficulty I encountered was how to add the cards' colored top border without it following the curve. I added an empty div with a background color and it did the trick. Is there an easier/better way to achieve this? Thank you for your feedback.

Community feedback

Mtalafa 350

@Mtalafa

Posted

Hi,

You can add border-top to your card like this:

border-top: 4px solid #color;

0

@ClemenceTafforeau

Posted

Hi @Mtalafa! Thank you for your comment, however, as I tried to explain, adding border-top made the border 'follow' the curve of the border-radius, it did not stay straight as is shown in the design. So I had to find an alternative :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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