@Drallas
Posted
Hello Rayane
Congrats on finishing this Challenge! 👍
I think your solution looks pretty close to the Figma design with a nice transition between when you switch over to / from desktop layout. Not sure if shrinking the images itself is the best solution, i opted myself to keep them 'static'.
I finished this one yesterday evening and used your solution as an inspiration to refactor mine. The tip for the 'mix-blend-mode property to get the "orange" effect' was very helpful since i struggled to get that right and with a linear-gradient I couldn't get it look as the Figma design. I also refactored to get rid of @import using @use now. Btw I noticed that your SCSS is showing in FF Inspector, mine isn't; how does that work?
I used SASS for the first time this challenge and went 'all in' on structure; perhaps too much when i look at your SASS folder structure that's a bit simpler. I think it's ok to split up the SASS CSS into small components, not having to search so much to find a specific piece of code.
I hope it helps!
Enjoy coding the next one.
Greetings, Drallas
@RayaneBengaoui
Posted
Hello @Drallas,
Thanks for your feedback !
I'm glad to hear that my solution helped you ! 🙂 I also didn't know about mix-blend-mode but thanks to google I found out haha.
I don't know much about the FF inspector as I'm not using it. For the SASS part I'm not an expert either, but I think that the main point is just to simplify your CSS code. You want to make it as simple and generic as possible, so it's easier to read/work with it for you and other people. I guess it's all about balance between efficacy/simplicity of the structure .
Happy coding !
@Drallas
Posted
@RayaneBengaoui
Yes you're solution helped me a lot..
Couldn't copy mix-blend-mode because I had set the images in the background, but mdn also mentioned background-blend-mode, si i created this.
background-image: url(../../assets/tablet/image-phone-and-keyboard.jpg);
background-color: hsla(22, 89%, 52%, 1);
background-blend-mode: multiply ;
You can see for yourself what i mean with Firefox Devtools inspector. https://drive.google.com/file/d/1OYreF6-2-aLRSzRQtkWs-zOmQ0rdb79_/view?usp=sharing
It shows .scss files, never saw that before; i guess it related to build tools?
