Build with HTML, SCSS and Vanilla JS.

Solution retrospective
Hi guys, I think I went a bit too far with regards to folder structure on this project but hey hahaha. If possible would someone be able to feedback on how I could make the hero images responsive (and fix the z-index for mobile mock up images), as I found this was the most challenging part of the challenge.
I also wanted to know if there was better way to simplify my 'toggleMobileNav function) which is below: I tried using a classList.toggle but it caused problems when I was toggling the document.body.style for the overflow
toggleMobileNav = (e) => { if (!isOpen) { line.classList.add('active') overlay.classList.add('is-modalOpen') mobileNav.classList.add('is-mobileOpen') document.body.style.overflow = 'hidden' isOpen = true } else { line.classList.remove('active') overlay.classList.remove('is-modalOpen') mobileNav.classList.remove('is-mobileOpen') document.body.style.overflow = 'initial' isOpen = false } }
Please log in to post a comment
Log in with GitHubCommunity feedback
- @abhik-b
Hello Che Kin To 👋
Great job on this challenge , it is responsive and it looks great. I really liked the menu btn changing to a cross and reverting back animations 👌
Just Some Opinions
- How I would have approached hero section is :
- put the
bg-intro
tobackground-image
of herosection
and then position it withbackground-position
- give the section a grid or flex
display
and position the.container
and anotherdiv
- and inside that
div
I would place aimg
with mockups image( later I can animate theimg
while page loads😅 ) - then position them according to the
media-queries
- How I would have approached mobile nav :
- I would not have created a different nav for mobile
- I would have hidden that nav for mobile screen, (like you do) but will give that different styles
- and then display it when the menu btn is clicked
** That's the way I would have approached , I hope this is useful to you **
Overall Great Job 💯💯, Keep contributing these amazing solutions and Happy Coding 😇
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