Social Proof Section ~ FlexBox | Responsive Design

Hi,

you did a good job building semantic and accessible HTML.

Regarding the rating stars, I think the only way to avoid repetition is to merge the SVG images into one image. However, you could also do something like the following:

// HTML
<div class="rated review">
  <span class="star-icon"></span>
  <span class="star-icon"></span>
  <span class="star-icon"></span>
  <span class="star-icon"></span>
  <span class="star-icon"></span>
</div>

// CSS
.star-icon {
  width: 17px;
  height: 16px;
  background: transparent url("../images/icon-star.svg") center no-repeat;
}

According to MDN, the <section> element should usually contain a heading to indicate the content's purpose for SEO and assistive technologies. For the testamonials section I would consider replacing <section> with <div>, or alternatively adding a visually hidden <h2> element as a direct child of <section>.

Besides that, your code is well structured. Keep it up!

As far as i know that the Section tag is used when there is content that you want to show by order like for example consider a book it has headings,paragraph,diagrams Its default property is block

section{ display block; }

while the div tag does'nt have any special purpose you can put any content inside it.Consider you testamonial solution.You can use two parent div containers.One for the upper textual content and Another for the testamonial.

while the blockquote tag is used to reference a section quoted from another Page or Site

Does this help you in any way

I would appreciate it if someone can give some feedback on my HTML Semantics as well, like the use of <section> tags, <div> tags, and the use of HTML for testimonials. I used <blockquote> tags with headers.