Order summary card with pure HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. Layout in general looks great and it is adaptive for small screen-sizes.

  Some suggestions on the site would be:

  • overflow-y not needed on the body tag.
  • The vector/illustration being used in here is only a decorative image. You only want to include a descriptive alt value for images that are meaningful and add content to the site. If you look at this one, it doesn't really complement the site at all right. So using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • Also when using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • The annual-plan text could use a heading tag since it gives information on what the section would contain, hence the pricing plan. An h2 would be great.
  • Either using a tag or button on this one could be think of like this. If you are using a form, then button is your choice since button are for controlling. If not using form maybe a tag is fine since it will just redirect the user back whatever choice they made.

  Aside from those, the site is really great and the markup looks great as well. Nice solution on this.

  Marked as helpful

  1