CodePen

HTML

            
              <div id="afui"> 

            <div id="content">

                <div id="home" class="panel" selected="true" data-header="homeheader">

                    <h3>home</h3>

                    <p>Home panel

                    </p>

                </div>

                <div id="sketch" class="panel" data-header="sketchheader" >

                     <h3>Sketch Pad</h3>

                     <p>Sketch Pad panel

                    </p>

                </div>

                 <div id="picture" class="panel" data-header="pictureheader">

                     <h3>Pictures</h3>

                     <p>Pictures panel

                    </p>

                </div>

            </div>

           

            <header id="homeheader">

                <h1>Home</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

             <header id="sketchheader">

                <h1>Sketch</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

            <header id="pictureheader">

                <h1>Picture</h1>

                <a id="backButton" href="javascript:;" class="button" ></a>

            </header>

            <div id="navbar">

                <a href="#home" id='navbar_home' class='icon home'>Home</a>

                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>

                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>

            </div>

        </div>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................