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

Responsive page using grid

nomatter 110

@itsgonenow

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


Placing the quotation mark svg took the most time and I still could not figure it out. I am unsure whether articles giving a lot of bottom empty space when stretching vertically is normal.

Community feedback

Elaine 11,420

@elaineleung

Posted

Hi Nomatter, about the quote SVG, what I did was to use absolute positioning, just like what you did. I think the reason why you're experiencing difficulties is because right now, you don't have a position: relative on the element that you want the quote icon positioned with. All you need to do is to add position: relative to your .art1 card, and you should see the icon sitting inside the card, then just change top: 15% to top: 0. Hope this helps, and good luck!

Marked as helpful

1
Lucas 👾 104,580

@correlucas

Posted

Hey Nomatter, congratulations for your solution!

Your solution is just great, the design is amazing and match the challenge goals, even the semantics you did good with articles and main.

To improve even more your semantics, you can replace the paragraph with the quote content with <blockquote> that is a tag for this exact kind of content.

Keep it up 👏

Marked as helpful

1

@halderjoydeep

Posted

Hi, You've done great job!

Regarding that quotation mark, You can simply use it as background-image and position that image accordingly. Also, it's good practice to keep the images in a single folder.

background-image: url("images/bg-pattern-quotation.svg"); background-repeat: no-repeat; background-position: 90% 0;

Marked as helpful

1

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