html css four card feature section

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. The desktop layout looks really great, though I noticed that the main tag is not occupying the full width thus not applying the background-color on the whole width. The site is responsive and the mobile state looks great.

  I don't know if you need one, but here are some suggestions:

  • Adding a max-width on the body tag would be nice. If you try to zoom out on your screen, you will see that the content is just stretching out along the screen, meaning users will wide screen will get this. Adding that max-width will prevent it as it will limit the layout's size. Just don't forget to add margin: 0 auto as well on the body so that it will be centered.
  • The header is not really needed on this one. Using the header inside the main just renders it as a normal element. You can replace it with div on this.
  • The text Reliable, efficient delivery Powered by Technology is not really a two text, it is a single phrase, meaning you will just need to use a single h1 to wrap it and use max-width on it so that it will placed the text on another row like in the design.
  • Change the section tag into just div. section is not informative when treated as landmark unless it is labelled by a heading tag with aria-labelledby. You can use also section when there is already a present visible heading tag where a section will nest.
  • Change each article into just div. article element is typically used when you want the element to be redistributed on another page because an article tag's content is independent on its own.
  • Use h2 for each of the card heading tag.
  • Adding an extra aria-hidden="true" on each of the card icon would be nice so that they will be skipped by screen-reader.

  Aside from those, great job again on this one.

  Marked as helpful

  2

  ---

  

  oussama ayadi•470

  @ayadi1Posted almost 3 years ago

  @pikapikamart thank you i will do that

  1