vlkzmn / crazybaby_landing

Presentation landing page for Luna Eye speakers. Provides information about the product, its technical characteristics and advantages.

Crazybaby Landing Page

Presentation landing page for Luna Eye speakers. Provides information about the product, its technical characteristics and advantages.

LIVE DEMO

Technologies used

• HTML5
• CSS3
• Sass (SCSS)
• BEM methodology
• JavaScript

Features Overview

Layout is adaptive and responsive. It works correctly on all screen sizes (mobile, tablet and desktop). Is implemented using the mobile-first approach.

The code is valid HTML5 and CSS3. In order to decrease user load and avoid code duplication, styles are implemented using Sass (SCSS) including advanced features like mixins, extends etc. BEM methodology is used for naming classes. This naming convention makes the code more readable and understandable, helps to avoid naming conflicts and makes the code easier to maintain and reuse. The swiper library was used to implement the slider.

Semantic and meta tags are used. SEO optimization is done. Images are optimized. Accessibility is improved.

see google lighthouse report below (accessibility are not ideal because the lighthouse does not like the light fonts on a white background that the designer intended):

Preview

In Conclusion

This project aimed to improve my skills in HTML5, CSS3, Sass (SCSS), BEM methodology, JavaScript, responsive and adaptive layout and build the entire landing page positioning elements using all the tools such as flexbox, grid, media queries, etc.

The main challenge was to combine all the knowledge and skills I have acquired so far and implement a landing page from scratch.