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

Social proof section - Responsive site using CSS Flexbox

Anna 545

@NitaLewska

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • 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

P
tediko 6,680

@tediko

Posted

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! 💪

1

Anna 545

@NitaLewska

Posted

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

0
Anna 545

@NitaLewska

Posted

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

1
P
tediko 6,680

@tediko

Posted

@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!

1
P
Patrick 14,265

@palgramming

Posted

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

1

Anna 545

@NitaLewska

Posted

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

1
Anna 545

@NitaLewska

Posted

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

1
P
Patrick 14,265

@palgramming

Posted

@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

1
Anna 545

@NitaLewska

Posted

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

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