Created
July 25, 2013 11:51
-
-
Save mihai-vlc/6078969 to your computer and use it in GitHub Desktop.
HTML: DemoPage Template
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet"> | |
| <style> | |
| /* Sidenav for Docs | |
| -------------------------------------------------- */ | |
| .bs-docs-sidenav { | |
| position: fixed; | |
| width: 228px; | |
| margin: 30px 0 0; | |
| padding: 0; | |
| background-color: #fff; | |
| -webkit-border-radius: 6px; | |
| -moz-border-radius: 6px; | |
| border-radius: 6px; | |
| -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); | |
| -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); | |
| box-shadow: 0 1px 4px rgba(0,0,0,.065); | |
| } | |
| .bs-docs-sidenav > li > a { | |
| display: block; | |
| width: 190px \9; | |
| margin: 0 0 -1px; | |
| padding: 8px 14px; | |
| border: 1px solid #e5e5e5; | |
| } | |
| .bs-docs-sidenav > li:first-child > a { | |
| -webkit-border-radius: 6px 6px 0 0; | |
| -moz-border-radius: 6px 6px 0 0; | |
| border-radius: 6px 6px 0 0; | |
| } | |
| .bs-docs-sidenav > li:last-child > a { | |
| -webkit-border-radius: 0 0 6px 6px; | |
| -moz-border-radius: 0 0 6px 6px; | |
| border-radius: 0 0 6px 6px; | |
| } | |
| .bs-docs-sidenav > .active > a { | |
| position: relative; | |
| z-index: 2; | |
| padding: 9px 15px; | |
| border: 0; | |
| text-shadow: 0 1px 0 rgba(0,0,0,.15); | |
| -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); | |
| -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); | |
| box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); | |
| } | |
| </style> | |
| </head> | |
| <body data-target="#navparent" data-spy="scroll"> | |
| <header> | |
| <h1 class='text-center'> | |
| Some Nice Title | |
| </h1> | |
| </header> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="span3 bs-docs-sidebar" id="navparent"> | |
| <ul class="nav nav-list bs-docs-sidenav navex" data-spy="affix"> | |
| <li><a href="#one"><i class="icon-chevron-right"></i> Option one</a></li> | |
| <li><a href="#two"><i class="icon-chevron-right"></i> Option two</a></li> | |
| <li><a href="#three"><i class="icon-chevron-right"></i> Option three</a></li> | |
| </ul> | |
| </div> | |
| <div class="span8"> | |
| <section id="one"> | |
| <h3>Option one</h3> | |
| <div> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae aliquam dolore fugiat minus atque laboriosam. Vero, qui, enim earum doloremque mollitia deserunt possimus ea consequatur cupiditate nobis. Sed, doloremque. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae aliquam dolore fugiat minus atque laboriosam. Vero, qui, enim earum doloremque mollitia deserunt possimus ea consequatur cupiditate nobis. Sed, doloremque. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae aliquam dolore fugiat minus atque laboriosam. Vero, qui, enim earum doloremque mollitia deserunt possimus ea consequatur cupiditate nobis. Sed, doloremque. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae aliquam dolore fugiat minus atque laboriosam. Vero, qui, enim earum doloremque mollitia deserunt possimus ea consequatur cupiditate nobis. Sed, doloremque. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae aliquam dolore fugiat minus atque laboriosam. Vero, qui, enim earum doloremque mollitia deserunt possimus ea consequatur cupiditate nobis. Sed, doloremque. | |
| <pre class="prettyprint linenums"> | |
| // some code here | |
| class CLS { | |
| function foo() { | |
| return "sample"; | |
| } | |
| } | |
| </pre> | |
| </div> | |
| </section> | |
| <section id="two"> | |
| <h3>Option two</h3> | |
| <div> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, aliquid, fugit ipsa eaque sequi quaerat doloremque ullam laboriosam vitae porro dolores modi saepe numquam cum repudiandae adipisci harum praesentium provident! | |
| </div> | |
| </section> | |
| <section id="three"> | |
| <h3>Option three</h3> | |
| <div> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, commodi, error, voluptatum esse amet delectus aspernatur quibusdam vel mollitia eos non consequuntur optio sit tempora iure aliquid quam quo impedit. | |
| </div> | |
| </section> | |
| </div> | |
| </div><!--/row--> | |
| </div><!--/container--> | |
| <footer> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugiat, odit, assumenda officia vel autem natus magni nulla voluptate facere aliquid molestiae enim. Esse, ex placeat ipsam assumenda ad animi. | |
| </footer> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> | |
| <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script> | |
| <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-affix.js"></script> | |
| <script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script> | |
| <script> | |
| // @prettify | |
| !function ($) { | |
| $(function(){ | |
| window.prettyPrint && prettyPrint() | |
| }) | |
| }(window.jQuery); | |
| // #prettify | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment