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

HTML + CSS responsive page

@BernardoHollmann

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 would like to know how to replicate one particular image several times inside a single div.

Community feedback

@VCarames

Posted

Hey @BernardoHollmann, great job on this project!

Some suggestions to improve you code:

  • I would recommend adding an additional media query to in between mobile and desktop view. In between those two , your content is squished in together.

  • To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

It’ll look something like this:

:root {
  --primary-color: value;
  --secondary-color: value;
  --tertiary-color: value;
}

And to use the variables you’ll use the var() function. So it’ll look like this.

h1 {
color: var(—primary-color);
}

Heres are some articles regarding CSS Variables.

You can also take a look at my projects and see how I use it.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

https://www.w3schools.com/css/css3_variables.asp

Happy Coding!

Marked as helpful

1

@BernardoHollmann

Posted

@vcarames Thank you, friend! Yes, I tried using variables in my last challenge and it is really handy. I don't know why I skipped it in this one, but I will remember using this for the next. Thanks again for your feedback and tip!

0
Lucas 👾 104,420

@correlucas

Posted

Mto boa a solução Bernardo, parabéns. Acabei de ver aqui e uma coisa pra melhorar nesse e nos próximos projetos é quando tiver uma citação, vc pode usar <blockquote> ao invés de p como no card

Marked as helpful

1

@BernardoHollmann

Posted

@correlucas Obrigado, Lucas! Os seus comentários tem me ajudado muito a melhorar os meus códigos e a tentar novos métodos.

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