Skip to content
Submitted 10 months ago

Responsive testimonial page using grid template areas

Obiny•150
@obinysol
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

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
    @nachoNotaPosted 10 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
    1
    Obiny•150
    @obinysolPosted 10 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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