order-summary-component-main

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 1 year ago

  I'm afraid this looks pretty broken

  In HTML

  • The background image should be a background image property on the body, not in the html
  • the alt "waves" doesn't describe the top image
  • The alt attribute is missing from the icon image (it should always be there, even if left blank to indicate the img is decorative)
  • in a few places you have closed tags for elements in the wrong places or immediately after opening them. Check it carefully
  • why is change a link, proceed a button and cancel a link? That might be fine but I'm not sure you definitely understand when to use each element (links vs buttons)

  In the CSS

  • Use the exact background properties you need to, don't just use background shorthand property unless you're going to put everything in there. As said above the body should have a background color and image
  • never ever set font size in pixels or any other font related properties
  • the body will need a min height 100vh
  • the main must not be positioned absolutely
  • border radius should have a fixed value not %
  • don't try to use large margins for positioning
  • always use a modern css reset at the start of the styles. Amongst lots of other good things it would set img elements to display block and max-width 100%, which is all you need on that hero image
  • you can set overflow hidden on the card to crop off the corners of the hero image and reveal the cards border radius
  • there should be padding on the text part of the card. All of its child elements (including the Grey plan box should only have vertical margins)
  • nothing in this should have position properties (eg position relative top or left)
  • button padding should be in em or rem not %
  • the button box shadow does not look like the design at the moment.
  • make sure you are applying all the styles like font family, line height, colors etc to make your solution look like the design. You should be able to get this much closer

  Marked as helpful

  1
• 

  KingSky•190

  @KingSkyrosPosted over 1 year ago

  Added

  0