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

I took 10 hours to make this challenge include measuring and coding!

dungnope 170

@Dungnope

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 had tried my best to make this landing page but with DIY ways, i have a few struggles with title and rating section. First time, I can not align rating column and title and description column like the design. But luckily, I fixed and it had a little same as design, however I don't remember why 'it works :))))', hope you can find out. This is really the best newbie challenge, if you can find any issues and have the improvement please comment for me, I'm really appreciative, thanks you!

I forgot that in <html> element in css, I made them a specific font-size: 62.5%, so my text look smaller than the desgin and I do not understand All page content should be contained by landmarks as well, in this code: <img src="./assets/css/images/bg-pattern-bottom-desktop.svg" alt="background" class="app__bottomground">, hope you can explain my mistake, thanks for your contribution. You can use your phone with max-width: 375px to see my responsive on phone, I'm too lazy to create more breakpoints

✨Update: I don't know why my screenshot solution has a little different from design so you should go to Preview Site to get it more clearly.✨

Community feedback

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