Submitted

Social Proof section

@BramMortier

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

3

Accessibility Issues

0

HTML Issues

View Report

Bram Mortier’s questions for the community

Another easy challange. I did this one to teach some other students basic HTML and CSS.

Community Feedback

P

@Remus432

Posted

Hey @BramMortier

Good job on completing the challenge. Overall, it looks pretty good and the responsive design works as expected.

Just some suggestions:

  • The background images need some tweaking - refer to the original design

  • The three cards and the star rating cards aren't supposed to have the same line base line. They all need a slight offset - refer to the original design

  • Add spacing between the users' name and the "Verified Buyer" text

Marked as helpful

1


@BramMortier

Posted

@Remus432 I did make the card sit on a diagonal axis but this only goes for large Desktops. For laptops and smaller i simplified the design a bit. Thanks for the other suggestions will certainly fix those.

0

darryncodes 5,170

@darryncodes

Posted

Hi Bram,

Awesome solution, well done.

I think at 1000px it might be cool to add max-width: 30rem; to .info-container and .review-container so that the design doesn't stretch across the whole viewport.

All the best!

Marked as helpful

1


@BramMortier

Posted

@darryncodes thanks for the tip man!

0

Give some feedback to @BramMortier about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!