CodePen

HTML

            
              <div id="afui"> 
            <div id="content">
                <div id="home" class="panel" selected="true" data-header="homeheader">
                    <header id="homeheader">
                        <h1>Home</h1>
                    </header>
                    <h3>home</h3>
                    <p>Home panel
                    </p>
                </div>
                <div id="sketch" class="panel" data-header="sketchheader" >
                     <header id="sketchheader">
                        <h1>Sketch</h1>
                        <a id="backButton" href="javascript:;" class="button" ></a>
                    </header>
                     <h3>Sketch Pad</h3>
                     <p>Sketch Pad panel
                    </p>
                </div>
                 <div id="picture" class="panel" data-header="pictureheader">
                    <header id="pictureheader">
                        <h1>Picture</h1>
                        <a id="backButton" href="javascript:;" class="button" ></a>
                    </header>
                     <h3>Pictures</h3>
                     <p>Pictures panel
                    </p>
                </div>
            </div>
           
            <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>
            
          
!

↑ Insert the most common viewport meta tag

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 ..................