Grid testimonials

Community feedback

• 

  Marzia Jalili•3,920

  @MarziaJaliliPosted about 2 months ago

  Congratulations on finishing the project!

  Some suggestion:

  • Using the :nth-child for selecting elements with the same class name will give you the abality to change colors of the elements according to there positiong in html, I mean which one comes first and which one is next.

  • Also, using the grid-template-areas can be a very concise approach, man.

  • In order for this property to work, you are required to set the grid-area in each testimonial element.

  Take the code below as an example for html:

  <ul class="testimonial-parent">
    <li class="testimonial">(the details of the Denail)</li>
    <li class="testimonial">(the details of the Janathan)</li>
    <li class="testimonial">(the details of the Jeanette)</li>
    <li class="testimonial">(the details of the Pattric)</li>
    <li class="testimonial">(the details of the Kira)</li>
  </ul>
  

  Then, apply the code below in css:

  
  /* give each child element a name for grid-area */
  
  .testimonial:nth-child(1) {
    grid-area: one;
  }
  
  .testimonial:nth-child(2) {
    grid-area: two;
  }
  
  .testimonial:nth-child(3) {
    grid-area: three;
  }
  
  .testimonial:nth-child(4) {
    grid-area: four;
  }
  
  .testimonial:nth-child(5) {
    grid-area: five;
  }
  
  /* set the grid-template-areas on the parent element*/
  
  /* for mobile */
  
  .testimonial-parent {
     display: grid;
     gap: 1rem;
     grid-template-areas: 
      "one"
      "two"
      "three"
      "four"
      "five"
     ;
  }
  
  /* for tablate */
  
  @media (min-width: 30em) {
    .testimonial-parent {
       grid-template-areas: 
         "one one"
         "two three"
         "four four"
         "five five"
       ;
    }
  }
  
  /* for desktop */
  
  @media (min-width: 60em) {
    .testimonial-parent {
      grid-template-areas: 
        "one one two five"
        "three four four five"
      ;
    }
  }
  

  • And, about the image with the quotes, you can use the background-image property to set it.

  • Take the code below as an example for that:

  /* select the first testimonial */
  .testimonial:nth-child(1) {
    /* set the image */
    background-image: url("path of the image");
  
    /* position the image */
    background-position: top right 10%; /* 10% is because of that space at the right of the image */
  
    /* prevent repeating of the image */
    background-repeat: no-repeat;
  }
  

  I hope I convied my ideas properly😁😁

  0

  ---

  

  P

  SKszymek•170

  @SKszymekPosted about 2 months ago

  @MarziaJalili Wow a lot to take in I will check that. Thanks for help.

  0