Beats Landing page

Landing page inspired by the 'Beats' brand, with some of its products, responsive and modern layout and scroll animations, for a unique and striking customer experience. Project made based on a tutorial to learn the Scss tool.

Stacks

Features

Scroll appearance animations throughout the application
Pre-made animations for styling through Scss and JavaScript
Superset Scss to style these animations
Navbar that shows the section the user is in
Sessation of items for purchase
Stylized footer and send email button
Responsive UX/UI design for mobile devices

Learnings

Taking into account that this Superset is a Sass syntax which in turn is an extension language, facilitating the use of CSS, I believed it to be difficult in terms of syntax and complexity but I was surprised by its simplicity. The organization, despite being different, didn’t take long to make sense, It facilitates the use of what makes Scss an advantage over basic CSS, which are its variables, grouping of rules, mixis, inheritance and even functions. The code becomes much cleaner and easier to maintain, promoting the reuse of styles and the reduction of redundancy that is common in CSS. Because it is compiled into normal CSS, any navegos can play Scss, which made me much more excited to learn even more about the possibilities of this Superset.

In this project I was able to learn about how to relate JavaScript to SCSS for scroll animations, it was difficult at first to understand how modifying SCSS from JavaScript worked but it was a great introduction to these possibilities in the language for styling more customized and unique applications for each customer.