Submitted almost 2 years ago

Social proof section solution

Cristina Z• 20

@C-ZLTV

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I build the social proof section taking the mobile first approach and mainly using Flexbox for the layout. The two parts, hero and cards, became flex containers on the desktop version while on the mobile version all the components fall in a column.

The star ratings layout was made with self-align applied to all three flex items. While the five starts are the svg background image applied to a div with background-repeat on space and a fixed width and height.

The cards have transform on translateY() for the scale effect.

This project helped me understand and play around with background properties and values and also got to implement translateY for the into an actual project and in a useful way.

I'm open to suggestions and corrections since I'm here to learn as much as possible.

Thank you for checking out my solution!

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey there! 👋 Here are some suggestions to help improve your code:

The profile images are not decorative. Their alt tag should not be blank. It should state the following; “Headshot of -person’s full name-“

More Info:📚

Headshot Alt Text

To improve the semantics of your component, you will want to wrap each individual testimonial component in a figure element, the individuals information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

Code:

<figure>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

More Info:📚

MDN Figure Element

Remove the comment out attribution from your HTML code. No need for it to be there if it is no longer being utilized.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Marked as helpful

Cristina Z• 20

@C-ZLTV

Posted almost 2 years ago

Thank you @vcarames, I really appreciate this feedback, especially regarding semantics. Will implement those improvements now!

Please log in to post a comment

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