Social proof section

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello again Osama , congratulations for your new solution!

  🎯 Your solution its almost done and I’ve some tips to help you to improve it:

  Hey Osama, I've fixed the background svg images, all I have do was do to a new import for the images and add min-height: 100vh to make the body have 100% of the screen height, see the code changed below:

  body {
      background-repeat: no-repeat;
      font-family: 'League Spartan', sans-serif;
      font-size: 15px;
      min-height: 100vh;
      background-image: url(../images/bg-pattern-top-desktop.svg), url(../images/bg-pattern-bottom-desktop.svg);
      background-position: left -185px top -236px, right 10px bottom -300px;
      background-repeat: no-repeat, no-repeat;
      background-attachment: fixed, fixed;
      background-size: contain, contain;
  }
  

  You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @correlucas Thanks Bro 😊

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @osamanazakat,

  Good job on the challenge just a few small things set a max-width: 1440px to prevent the content from getting to wide on large screens.

  Add the following rule to center the content on the page:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  you can also use this on the other challenges to center elements like cards. Increase the font size of the .testimonials-header h1 and set flex: 1; on both the .testimonials-header and .ratings-container. Also add align-items: center; on the .ratings-header to center the content vertically. These are all for desktop.

  Hope these are helpful.

  1

  ---

  

  osama•270

  @osamanazakatPosted about 2 years ago

  @hyrongennike Thanks Bro, I have a little problem with min and max width. I can't understand these properties. Can you explain little bit, how these properties work?

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @osamanazakat Hi below is link to a post with examples.

  https://www.freecodecamp.org/news/css-properties-examples/

  0