Untitled

//Refer this code

<!DOCTYPE html>
<html>
    <head>
       <script>
        (function()
        {
            if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
                var msViewportStyle = document.createElement("style");
                msViewportStyle.appendChild(
                    document.createTextNode("@-ms-viewport{width:auto!important}")
                );
                document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
            }
        })();
        </script>

        <title>test</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
        <link rel="stylesheet" type="text/css" href="appframework/icons.css" />
        <script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="plugins/af.slidemenu.js"></script>


        <!-- include af.desktopBrowsers.js on desktop browsers only -->
        <script>
            function onDeviceReady()
            {
                $.ui.launch();
            }
            document.addEventListener("device.ready", onDeviceReady, false);


        $.ui.autoLaunch = false;
        $.ui.useOSThemes = false;
        $.ui.backButtonText = "Back";

        $(document).ready(function(){
            $.ui.launch();

            // setup signin and signup button events
            $("#login").on("click", function(){
                signIn();
            });

            $("#register").on("click", function(){
                signUp();
            });
        });

        function signIn(){

            // sigin code here

            $.ui.loadContent("main", null, null, "fade");
        }

        function signUp(){

            // signup code here

            $.ui.loadContent("main", null, null, "fade");
        }

        function startApp(){
            // clears all back button history
            $.ui.clearHistory();

            // your app code here
        }


         function loadedPanel(what) {
                //We are going to set the badge as the number of li elements inside the target
                $.ui.updateBadge("#aflink", $("#af").find("li").length);
            }

        function unloadedPanel(what) {
            console.log("unloaded " + what.id);
        }

        if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
            var script = document.createElement("script");
            script.src = "plugins/af.desktopBrowsers.js";
            var tag = $("head").append(script);
        }
        </script>
</head>
<body>
<div id="afui">

    <!--Left Side Menu Navigation bar -->
    <nav>
        <ul class="list">
            <li><a href="#" class="icon home">Home</a></li>
            <li><a href="#" class="icon heart">Favorites</a></li>
            <li><a href="#" class="icon chat">Messages</a></li>
            <li><a href="#" class="icon user">Profile</a></li>
        </ul>
    </nav>

    <div id="content" style="">
        <!-- Welcome View -->
        <div class="panel" title="Welcome" id="page1" data-header="none" data-footer="none" selected="true">
            <div style="text-align:center">
            <br>
            <br>
            <img src='images/logo.png'/>
            <br>

            <br>
            </div>
            <ul class="list inset">
                <li><a href="#signup" class="icon pencil" style="text-align:center">Register</a></li>
            </ul>
        </div>

        <!-- Register View -->
        <div class="panel" title="Register" id="signup" data-footer="none">
            <div style="text-align:center">
            <br>
            <br>
            </div>
            <input name="name" type="text" placeholder="Name" />
            <input name="email" type="text" placeholder="Email" />
            <input name="username" type="text" placeholder="username" />
            <input name="password" type="password" placeholder="password" />
            <input name="password2" type="password" placeholder="confirm password" />
            <input name="name" type="text" placeholder="Name 1" />
            <input name="email" type="text" placeholder="Email 1" />
            <input name="username" type="text" placeholder="username 1" />
            <input name="password" type="password" placeholder="password 1" />
            <input name="password2" type="password" placeholder="confirm password 1" />
            <input name="name" type="text" placeholder="Name 2" />
            <input name="email" type="text" placeholder="Email 2" />
            <input name="username" type="text" placeholder="username 2" />
            <input name="password" type="password" placeholder="password 2" />
            <input name="password2" type="password" placeholder="confirm password 2" />
            <a class="button block customred" href="#" id="register">Register</a>
        </div>

    </div>

    <!--Footer with Tabs or Navigation bar -->
    <div id="navbar">
        <a href="#" id='tab1' class="icon home" data-transition="none">Home</a>
        <a href="#" id='tab2' class="icon heart" data-transition="none">Favorites</a>
        <a href="#" id='tab3' class="icon chat" data-transition="none">Messages</a>
        <a href="#" id='tab4' class="icon user" data-transition="none">Profile</a>
        <a href="#" id='tab5' class="icon user" data-transition="none">Login</a>
    </div>

</div>
</body>
</html>