Submitted 8 months ago

Responsive testimonial page using grid template areas

Obiny• 150

@obinysol

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have enjoyed this project the most so far because I believe it best challenges my CSS and HTML skill levels.

However, I have never come across SVGs in tutorials and my previous practice projects.

In this project, I struggled with applying the z-index property to the background quotation marks, and I could hardly find an elaborate explanation online about SVGs, why they are important, and how to use them.

I will be highly appreciative of any insight and online resources regarding the same. Thank you :-)

Community feedback

nachoNota• 300

@nachoNota

Posted 8 months ago

what i did with the quotation marks was to put it as a background image, like this:

.card-1{
    background: var(--Moderateviolet);
    background-image: url('images/bg-pattern-quotation.svg');
    background-repeat: no-repeat; /*so it appears only one time and doesn't repeat itself*/
    background-position: 80% 0; /*the left one is for positioning it horizontally, and the right one is vertically */
}

my .card-1 is basically your section with id="daniel".

Marked as helpful

Obiny• 150

@obinysol

Posted 8 months ago

@nachoNota Gotcha... I don't know why I hadn't thought of that. Thanks

Please log in to post a comment

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