Submitted over 3 years ago

Social proof section - Responsive site using CSS Flexbox

Anna• 545

@NitaLewska

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 liked this challenge a lot, especially that stuff about two background images and aligning/justifying elements=)

Community feedback

tediko• 6,680

@tediko

Posted over 3 years ago

Hello, Anna! 👋

Well done on this challenge! Here's a few things I'd suggest you to take a look at:

You repeat your HTML code with stars images which is unnecessary. Find the way to use only one star image for a .rating_card. You can do it easily by using background-repeat approach in your css. Your approach is perfectly fine. I just want to show you a different path to achieve this.

Keep up the good work! 💪

Anna• 545

@NitaLewska

Posted over 3 years ago

Thanks, I'll use this idea in the next projects =)

Anna• 545

@NitaLewska

Posted over 3 years ago

@tediko I also thought about editing svg, so 5 stars could be a one image, but ended with the easiest solution =)

tediko• 6,680

@tediko

Posted over 3 years ago

@NitaLewska Editing svg is also a way but, if you ever wanted to add one star or half-star you have to edit that svg and copy one star, or create half star which is a lot of work to me. In this approach all you have to do if you want add another or edit current is one line of code, and more precisely width of container with background-image sets on. Have a good day!

Patrick• 14,265

@palgramming

Posted over 3 years ago

Looks good but you need to bring Anne back to life. Use web development tools for fun to change your code in the browser to get it to work. You can inspect you two other profile photos that are working if you get stuck. Then you can go and edit the file on the server

But good job so far

Anna• 545

@NitaLewska

Posted over 3 years ago

Thank you, I've found that mistake by myself=) already fixed it)

Anna• 545

@NitaLewska

Posted over 3 years ago

@palgramming I also always redo some things after uploading, this design-solution tool is amazing

Patrick• 14,265

@palgramming

Posted over 3 years ago

@NitaLewska well I will upload something thinking I got it good then a month will pass and I will look at someone else's and wondered why they did something go back to mine and see similar problems

Anna• 545

@NitaLewska

Posted over 3 years ago

@palgramming I think that's just how studying WebDev/IT is working))

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