Skip to content
Submitted about 4 years ago

Single Page HTML CSS Flexbox

Fahad Khan•180
@fahadkhanpakistan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The container inside the HTML page is not border-radius, because when I was trying to make border-radius the children elements of the container looks in a square shape, and then I tried to make them border-radius accordingly but the bottom corners of the container's children element became radius too. Because of this, I left this style. Can anyone suggest me how to counter it?

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    Hey, Fahad Khan! 👋

    Good work on this challenge! 👍

    I also think it would be a good idea to add a hover state to the button on the component and to set a fixed width (or a `max-width) on the entire card component so that it doesn't grow too wide when the width of the screen increases. 😉

    Keep coding (and happy coding, too)! 😁

    0
    Fahad Khan•180
    @fahadkhanpakistanPosted about 4 years ago

    @ApplePieGiraffe Signup button is fixed as per your suggestion! Thanks

    0
  • Anna Leigh•5,135
    @brasspetalsPosted about 4 years ago

    I believe if you add overflow: hidden along with your border-radius to the container it should work.

    0
    Fahad Khan•180
    @fahadkhanpakistanPosted about 4 years ago

    @brasspetals Thanks for the suggestion. Bug is fixed!

    0

Please log in to post a comment

Log in with GitHub

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