Order Summary Card with CSS Transform and CSS Flex

Community feedback

• 

  hitmorecode•6,340

  @hitmorecodePosted over 1 year ago

  Congratulations well done. I have a few suggestions

  • There is too much empty space at the bottom to the card, make it the same as the space above Order Summary
  • You forgot the underline in change
  • When the screen size is around 375px the card should be smaller to fit in a small screen
  • You forgot to add color change on hover
  • You can add transition: all 150ms ease-in-out; on the button, change and Cancel Order to make the hover animation smoother
  • The background image is not across the page, you can fix this, see solution below.

  
  #container{
  font-family: 'Fraunces', 'Roboto', serif; ## you don't have to add multiple font-family. You can write all fonts in one line. Just write them in the order you want the browser to detect them.
  font-size: 17px;
  text-align: center;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(./images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  background-size: contain; ## this will fit the image in the width of the page background
  background-color: hsl(225, 100%, 94%);
  }
  

  Good job, keep coding

  Marked as helpful

  0