Skip to content
Submitted almost 3 years ago

responsive card using flex box

Nico Pomβ€’150
@NicoPom
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any advices guys please ?

Community feedback

  • Anosha Ahmedβ€’9,300
    @anoshaahmedPosted almost 3 years ago

    Hey good job on this challenge! Wrap everything in your body in <main> ... OR use semantic tags! .... you can also give role="" to the direct children of your <body> but that's a little frowned upon... Read more here

    Hope this helps :)

    Marked as helpful
    0
    Nico Pomβ€’150
    @NicoPomPosted almost 3 years ago

    @anoshaahmed alright thanks very much πŸ™‚

    1
  • Rio Cantreβ€’9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Awesome job with this one. Viewing your solution, you did well on coding the design. I would suggest the following for you...

    • Add a background color to the .card__plan rule set , set the value with the same as the example design.
    • Adjust the padding value into padding: 20px;
    • Wrap the card with main tag and attribution with footer tag
    • Add also a padding inside the attribution to add space in between.

    Overall, you did well in implementing the design and Keep up the good work!

    Marked as helpful
    0
    Nico Pomβ€’150
    @NicoPomPosted almost 3 years ago

    @RioCantre Thank you very much for your feedback. I'll look into it !

    1
    Rio Cantreβ€’9,690
    @RioCantrePosted almost 3 years ago

    @NicoPom Great! To emphasize what I mean..it's like this...

    .card__plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  margin: 15px;
  gap: 1rem;
  background: gray;
  border-radius: 5px;
  background: hsla(223, 10%, 83%, 0.79); (change the value of this one)
}

    And I would appreciate it if you mark this as helpful. Cheers!

    Marked as helpful
    0
    Nico Pomβ€’150
    @NicoPomPosted almost 3 years ago

    @RioCantre yes i see I completely forgot the background of the plan yes.

    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