Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="//builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="assets/slider-start.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic2ModernGaming</title>
    
    <body>
​
        <script type='text/x-handlebars' data-template-name='application'>
            <nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
                <div class='container'>
                    <div class='navbar-header'>
                        <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
              </button>
              <a href='#'><img {{bind-attr src='logo'}} alt="logo" style='width: 120px;' /></a>
                    </div>
                    <div id='navbar' class='navbar-collapse collapse'>
                        <ul class='nav navbar-nav'>
                            {{#link-to 'index' tagName='li'}}<a>Home</a>{{/link-to}}
                            {{#link-to 'games' tagName='li'}}<a>Games</a>{{/link-to}}
                            {{#link-to 'about' tagName='li'}}<a>About Us</a>{{/link-to}}
                            {{#link-to 'contact' tagName='li'}}<a>Contact</a>{{/link-to}}
                        </ul>
                    </div>
                </div>
            </nav>
            <div>{{outlet}}</div>
            <footer class='container'>
            <hr/>
            </footer>
        </script>
​
        <script type='text/x-handlebars' data-template-name='index'>            
        
        {{ x-revolution }}
            
        </script>
​
        
​
        <script type='text/x-handlebars' data-template-name='games'>
            <h1>Hey</h1>
        </script>
    
    <script type='text/x-handlebars' data-template-name='components/x-revolution'>
    <div class="tp-banner-container">
                <div class="tp-banner" >
                    <ul>
                    <!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->
                     
                     <li data-transition="boxslide" data-slotamount="7">
                       <img src="http://placehold.it/1200x720">
                       <div class="caption sft medium_grey"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
                       <div class="caption sfb medium_grey"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
                       <div class="caption lfr medium_grey"  data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
                     </li>
                     <li data-transition="boxslide" data-slotamount="7">
                       <img src="http://placehold.it/1200x720">
                       <div class="caption sft medium_grey"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
                       <div class="caption sfb medium_grey"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
                       <div class="caption lfr medium_grey"  data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
                     </li>
                    </ul>
                </div>
        </div>
    
    </script>
​
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kalmanhpro
0viewers