Skip to content
Submitted 7 months ago

testimonials Grid Section

muiruri3000•400
@muiruri3000
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

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

best project I have done so far, I now have a better understanding of Grid. would love to use the figma file more. just used the width and height.

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

have the grid elements scale to the changing screen. divided the columns to two then to one and maintained the grid parent's with to 100%

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

how to better use figma to create closely looking websites from images.

Please log in to post a comment

Log in with GitHub

Community feedback

  • vendy0•110
    @vendy0

    To add an svg, you don't need to insert it into an img tag, you can simply copy the svg and drop it directionally into the html file.

    To put an image in the background, like on the first card, you can use the syntax 'background: var(--clr-moderate-violet) url(./images/bg-pattern-quotation.svg) no-repeat top right 14%;'

    Then, you really need to manage your paddins and margins, otherwise the result will not be the same at all.

    And then you have to put the font in the body, not in the html. In your page, the font was not integrated because you forgot to put a space between the 'barlow' and the 'serif'.

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