Creating a Product Still Outline

At https://drive.google.com/open?id=1i_7_AKUSCEJTLx2DhAFQQBxwIbHs1Cjg

Keywords Product Still, Outline

Demo

Description

This tutorial will teach you how to create and animate a hamburger menu icon and then attach an event listener through jQuery for triggering a drop-down menu. I will be using Jade (Pug) and Sass instead of vanilla HTML and CSS.

This product still shows an outline; it is completely generated in pug and scss.

The html generation is specified via pug. It very well follows the visual outline of the product still image above.

body
    #container
        #header
        #body
            .content
                .left
                .right
                    - for (i=1; i <= 5 ; i++ )
                        div( id="text" + i )
            .content
                .left
                .right
                    - for (j=6; j <= 10 ; j++ )
                        div( id="text" + j )
            .content
                .left
                .right
                    - for (k=11; k <= 15 ; k++ )
                        div( id="text" + k )