Pedro Pires• 55
@pedrotpo
Submitted
How do you get the overlay color correctly on the image?
Lucas Pedro
@Lusk1nha
All comments
- Lucas Pedro• 640
@Lusk1nha
Posted
You can use "mix-blend-mode: multiply" on your image to mix it with the purple background and thus get closer to the design.
I hope that's can help you. 😃👍
Marked as helpful
1 - pierre-pellegrino• 970
@pierre-pellegrino
Submitted
Hi. I'm not very proud on this one. I'm facing two issues :
-
Not responsive. I didn't now how to position the cards this way so I used position: absolute, and flexbox aren't flexible anymore. It just changes the way it displays if screen width is less than 1160px. I'm still wondering how to position it the right way.
-
I used "::before" to color each box but did not find a way to do it without rewriting the same piece of code four times.
Good luck to everybody on this challenge.
Edit : Changes have been made and everything's working good. Many thanks to you !
Lucas Pedro• 640@Lusk1nha
Posted
Nice work on this challenge.
I would recommend that you try to use the "display: grid;" to split the cards work better than using the position absolute to position each card. 😃👍
1 -
- Paulo Victor• 360
@paulovictor1997
Submitted
English : Hello everyone, one more challenge made, any feedback is welcome. Português : Fala pessoal, mais um desafio feito, toda contribuição é bem vinda.
Lucas Pedro• 640@Lusk1nha
Posted
Parabéns mano ficou bom
Sobre o erro que você relatou:
Está dando esse erro porque você escreveu "contanier" ou inves de "container" no parente do ícone de erro.
Devido isso o "Position: Relative;" não está funcionando nele, assim o ícone de erro acaba usando o a Position do Body como eixo.
É só mudar o nome da class que fica tranquilo.
Espero ter ajudado e qualquer duvida pode falar. 😃
0 - Victor Hugo• 30
@Victor-HM
Submitted
Challenge Finished
Lucas Pedro• 640@Lusk1nha
Posted
Ficou bom mano. 😃
Minha sugestão para consertar alguns erros:
Percebi que quando sua página está entre 400px até 700px, o texto começa a sair da sua classe "box" e assim quebrando sua aplicação.
Eu recomendaria deixar a classe "box" com "height: auto;" assim ela sempre tentará se ajustar a altura ao conteúdo de dentro.
Ou até mesmo mudar a página para a versão mobile quando estiver menos de 700px.
1 - Ketzali Flores• 110
@KetzaliF
Submitted
Hi! Any feedback is welcome.
Lucas Pedro• 640@Lusk1nha
Posted
Great work on this one, everything seems resizes well and the layout is good. 😃
1 - Jardel• 130
@Jarbass
Submitted
As it was a challenging project for me, I was unable to take the bonus challenge (for now). However, I really enjoyed coding this app, I learned a lot. I will later refactor it and implement the challenge.
Lucas Pedro• 640@Lusk1nha
Posted
Parabéns mano ficou legal. 😃
Eu gostei do modal que você criou.
De sugestão acho que o @RocTanweer já descreveu os pontos principais.
1 - kate• 355
@sunnyandkate
Submitted
any advice or suggestions welcome
Lucas Pedro• 640@Lusk1nha
Posted
Well done. I hadn't even thought about doing this challenge without using JavaScript you surprised me. As a tip I would recommend you to try to use Flexbox more, it would be a great help in the development process.
0 - Lucas Pedro• 640
@Lusk1nha
Submitted
If someone can take a look at the code and give some feedback I would be very grateful.
Lucas Pedro• 640@Lusk1nha
Posted
I noticed that if the images are passed through the CSS they get some rendering bug in Firefox, I'll try to fix it.
0
