Submitted 28 days ago

Responsive Testimonial Landing Page Using CSS Grid

pure-css

keftajnr•240

@keftajnr

A solution to the Testimonials grid section challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am glad about the work and effort I put into building this project. It may not be perfect or exactly how the design site is, but I am content about my work.

This particular project helped me to learn more about CSS Grid and its diverse functionalities. I was open to this through Youtube videos, and I saw easy yet efficient ways of building various layouts.

Next time, I would result to much greater research and study, and put all I know into the upcoming challenges.

What challenges did you encounter, and how did you overcome them?

I had issues with the layout of the site, how to place specific containers, which videos and research on them helped make them even more better than I had imagined.

I sort of went about the responsiveness of the site in a different way than I use to, as I had some little hiccups on them. In resolving them, I had major help from tutors and guides.

What specific areas of your project would you like help with?

Definitely, with the accurate placing of the containers in the site.

I feel I got the sizes including the fonts wrong and well greater than it should be, which can be attributed to my non accessibility to the design file.

Help as to go about the right proportion would be immensely appreciated.

Code

Please log in to post a comment

Community feedback

P
Ivo•170
@ijerkov
Posted 27 days ago
I noticed that the quote image in your solution is covering text. You can easily fix this by adding isolation: isolate on the div that's a parent of the image and then setting z-index: -1 on img. This will position the quote image behind the text but in front of the background color. There is a good article about it here: https://css-tricks.com/almanac/properties/i/isolation/

But in this case, you can use a simpler method, remove the img tag completely and use a good old background image like this:
```
    .quote-decoration{
        --quote-width: 6.5rem;
        background-image: url("./images/bg-pattern-quotation.svg");
        background-repeat: no-repeat;
        background-position: top right 15%;
        background-size: var(--quote-width);
    }
```

Join 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