Loopstudios - landing page

🚀 This is a solution to the Loopstudios landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Note: The Frontend Mentor platform screenshot is not working very well because of the scrollreveal implementation. Many elements of the page might not be showing in this screenshot

Click on the image above to see in production 👆

🏆 The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

🔗 Links

• Live Site URL: Github pages

👾 Built with

• Semantic HTML5 markup
• CSS (SCSS)
• Flexbox
• CSS Grid
• Mobile-first workflow
• Jquery
• Scrollreveal lib

🤔 What I learned

Surely there must be a better way to create a responsive hamburger menu, but this was a solution that I found works reasonably well.

$('.mobileMenu, .navbar').click(() => {
	$('.navbar').animate({ width: 'toggle' }, 'fast')
	$('.close').toggleClass('hidden')
	$('.open').toggleClass('hidden')
})

🆙 Continued development

I will always be looking for better optimized and performing alternatives for my projects, and obviously implementing good coding practices.

🔗 Some resources

• Jquery - I know he's a little forgetful, but I thought it was interesting to use some of this knowledge for this project.
• Scrollreveal - A very complete and easy to use library to add scroll animations to your page

👨🏻‍💻 Author

• Linkedin - Kaique Matheus
• Frontend Mentor - @KaiqueMCR
• Twitter - @kaiquedev

📖 Acknowledgments

Having knowledge about the box model, CSS grid layout and Flexbox were crucial in this challenge

📄 License

MIT