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

3 Column Card Component with flex

@HenriqueDummer

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone!

Here is another chalenge completed, but i could not find a way to apply de border radius, if someone could help me i would be thankfull !

Community feedback

Ryan 290

@RJC26

Posted

hey man looked it over and you need to add the code border-radius to the card sedan div and apply it to the top left corner and the top right corner and the same for the card luxury and apply it to the bottom left corner and bottom right corner so example:

.radius-sedan{
border-radius: 15px 15px 0 0;
}

.radius-luxury{
border-radius: 0 0 15px 15px;
}

This will work for the mobile version, then you need to change the corners which the radius are applied to for the desktop version, so you just add the same code to the media query and change the corners example:

.radius-sedan{
border-radius: 15px 0 0 15px;
}
 .radius-luxury{
border-radius: 0 15px 15px 0;
}

dont forget to then add these classes to the divs on the html sheet! 

hope this helps looks great!

Marked as helpful

1

@HenriqueDummer

Posted

@RJC26 thanks man, really appreciate your help!

1

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