Design comparison
Solution retrospective
Still not satisfy with the solution :( I had trouble positioning the footer image and the hero image(s)
Community feedback
- @correlucasPosted about 2 years ago
👾Oi de novo Paula, tudo bem? Parabéns pelo desafio!
Pra fazer o blend da cor do bg e da foto é melhor usar
opacity: 30%;
pra deixar menos escuro a relação foto/bg. Nesse desafio eu usei um pseudo-element pra colocar esse background, mas se eu fosse fazer esse desafio hj eu usaria<footer>
e colocaria dentro sua classe que tem os dados do footer e como background do footer eu colocaria a imagem comdisplay: block
emax-width: 100%
pra deixar o footer responsivo e inseriria a imagem combackground-image: url ()
e pra fazer mudar de uma imagem do footer pra outra eu faria com uma media query ao invés de usar a tag picture.@media (min-width: 1440px) .download-image img { width: 100%; height: 308px; mix-blend-mode: multiply; object-fit: cover; opacity: 30%; object-position: 0 -150px; }
Aqui minha solução caso vc queira ver o footer:
https://www.frontendmentor.io/solutions/meet-landing-page-vanilla-css-logo-animation-easter-eggs-f0N4MR9dc9
👋 Espero ter ajudado e continue no foco!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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