
Design comparison
Solution retrospective
I'm happy that I make that grid correctly
What challenges did you encounter, and how did you overcome them?I have some troubles with changing the colors and backgrounds in the cards. I make the helper class for both. It worked but I know there is a better way to do this.
What specific areas of your project would you like help with?I need some feedback about the problem with changing the color in the specific cards. Also I don't know how to position the image with the quotes. I was trying but finally I left it without this image.
Community feedback
- @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😁😁
0P@SKszymekPosted about 2 months ago@MarziaJalili Wow a lot to take in I will check that. Thanks for help.
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord