Skip to content
Submitted about 4 years ago

Typemaster page - HTML/SASS

Rayane•1,935
@RayaneBengaoui
A solution to the Typemaster pre-launch landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone ! 🙂

Very cool challenge ! I love the work from the designer on this one !

I learned a few things such as using the <picture> tag to adjust images and the mix-blend-mode property to get the "orange" effect on one of the images. Also, I've used the new and recommended way of doing import with SASS with @use instead of @import which behave really differently because it's not a global scope anymore.

I would like to have any feedback on the project and especially on how I structured my SCSS files. I divided them by (abstracts | components | layout). But at the end, I didn't really used the components folder, thus , I could have simplified the layout folder.

Have a nice day ☀️

Code

Please log in to post a comment

Log in

Community feedback

  • drallas•375
    @Drallas

    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

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