Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

testimonial-grid-with pure css

@papilo-cloud

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions to improve my css skill is welcomed

Community feedback

Byron 2,180

@byronbyron

Posted

Hey dude, here's a couple of suggestions:

  • I would stick a max-width and margin: 0 auto; on the .container as well as some padding:
  • Could put the background on the body instead of the .container
  • The quotation marks background may need a bit off attention as well on .item-1.
  • And the line height might be better off being 1.5 instead of 1.5rem
.container {
    max-width: 1158px;
    margin: 0 auto;
    padding: 4.375rem 1.5rem;
    background: none;
    line-height: 1.5;
}

body {
    background: hsl(210deg 46% 95%);
}

.item1 {
    background: url('images/bg-pattern-quotation.svg') no-repeat top 0px right 80px hsl(263, 55%, 52%);
}

You've got the grid template areas working nice!

Keep coding 👍

Marked as helpful

0

@papilo-cloud

Posted

@byronbyron Thanks man I really appreciate your feedback

0

@papilo-cloud

Posted

Thanks man I really appreciate your feedback

0

Please log in to post a comment

Log in with GitHub
Discord logo

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