## App HTML marcup

    <!DOCTYPE html>
    <html lang="zxx">

    <head>
        ...
    </head>

    <body>

        <!-- wrapper -->
        <div id="smooth-wrapper" class="mil-page-wrapper">

            <!-- cursor -->
            <div class="mil-cursor-follower"></div>
            <!-- cursor end -->

            <!-- preloader -->
            <div class="mil-preloader">
                ...
            </div>
            <!-- preloader end -->

            <!-- scroll progress -->
            <div class="mil-progress-track">
                ...
            </div>
            <!-- scroll progress end -->

            <!-- fixed elements -->
            <div class="mil-fixed">
                <div class="mil-top-panel">
                    ...
                </div>

                <div class="mil-menu-frame">
                    ...
                </div>
            </div>
            <!-- fixed elements end -->

            <!-- page transition -->
            <div class="mil-transition-fade" id="swup">
                <div class="mil-transition-frame">

                    <!-- content -->
                    <div id="smooth-content" class="mil-content">

                        <!-- hero -->
                        <div>
                            ...
                        </div>
                        <!-- hero end -->
                        ...
                        <!-- footer -->
                        <footer class="mil-footer mil-p-160-160">
                            ...
                        </footer>
                        <!-- footer end -->

                    </div>
                    <!-- content -->

                </div>
            </div>
            <!-- page transition -->

        </div>
        <!-- wrapper end -->

        ...

    </body>

    </html>

## CSS assets

Plugins

- Bootstrap grid
- Font awesome
- Swiper

Pixy scss

- _variables-friendly.scss
- _variables-stylish.scss
- _common.scss
- _hero.scss
- _components.scss
- style-friendly.scss (compiled in style-friendly.css)
- style-stylish.scss (compiled in style-stylish.css)

Pixy css

- style-friendly.css
- style-stylish.css

    <!DOCTYPE html>
    <html lang="zxx">

    <head>

        ...

        <!-- grid css -->
        <link rel="stylesheet" href="css/plugins/bootstrap-grid.css">
        <!-- font awesome css -->
        <link rel="stylesheet" href="css/plugins/fontawesome.min.css">
        <!-- swiper css -->
        <link rel="stylesheet" href="css/plugins/swiper.min.css">
        <!-- okai css -->
        <link rel="stylesheet" href="css/style-friendly.css">
        <!-- page title -->
        <title>Pixy</title>

    </head>

    <body>

        ...

    </body>

    </html>

## Js assets

Plugins

- Swup
- GSAP
- Smooth scroll
- ScrollTrigger
- ScrollTo
- Swiper
- Parallax

Pixy assets

- main.js

    <!DOCTYPE html>
    <html lang="zxx">

    <head>

        ...

    </head>

    <body>

        <!-- wrapper -->
        <div id="smooth-wrapper" class="mil-page-wrapper">
            ...
        </div>
        <!-- wrapper end -->

        <!-- swup js -->
        <script src="js/plugins/swup.min.js"></script>
        <!-- gsap js -->
        <script src="js/plugins/gsap.min.js"></script>
        <!-- scroll smoother -->
        <script src="js/plugins/ScrollSmoother.min.js"></script>
        <!-- scroll trigger js -->
        <script src="js/plugins/ScrollTrigger.min.js"></script>
        <!-- scroll to js -->
        <script src="js/plugins/ScrollTo.min.js"></script>
        <!-- swiper js -->
        <script src="js/plugins/swiper.min.js"></script>
        <!-- parallax js -->
        <script src="js/plugins/parallax.js"></script>

        <!-- pixy js -->
        <script src="js/main.js"></script>

    </body>

    </html>

## Fonts

- Anton
- Outfit

## Icons

- Font awesome