This project is the challenge from Frontend-mentor. This is a single page application of e-commerce website. Layout is responsive on all devices, including responsive mobile navigation and a carousel slider. Also in application you can find onscroll animations of different elements which are done using Intersection Observers API.
Naming of classes is done using BEM naming convention. BEM is Block-Element-Modifier model, where blocks are supposed to be independent and reusable. Element of the block is marked with '__' (e.g. slider__image means that image is the element of the slider block). Modifiers are used to make elements more adaptive for special contexts. Modifiers are made with '--' as a separate class (e.g. 'button button--footer', where button is the general class and --footer is modifier which adapts button for the footer context).
- HTML5/CSS3
- Javascript
- Intersection Observers API
- BEM