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>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile -->
        <title>Simplified - High Quality - Images</title>
        
        <!-- CSS links -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <link rel="stylesheet" type="text/css" href="css/animation.css">
        <!----> 
        <!-- Javascript links -->
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <!---->
        <!-- some specific CSS style for this page only -->
        <style>
            html, body { 
                height: 100%;
                width: 100%;
            }
        </style>       
        <!---->
        
    </head>
    
    <body id="demo">
        <!-- Header/Navigation Bar ----------------------->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"><img src="img/logo_header.png" width="402" height="88" alt=""/></a>
                </div>
        </nav>
        
        <!-- Body ---------------------------------------->    
        <section id="demo_section">
        
            <!---------------- Left hand side texture ------------>
            <div class="texture"></div>
            <!---------------------------------------------------->
            
            <div id="demo_body" class="container">
                <div class="row col-lg-5">
                    <div class="row content_box">
                        <img class="img-cen img-circle img-responsive" src="img/1006.jpg" width="220" height="220" alt=""/>
                        <p class="p-align">
                            <br>
                            Suspendisse tincidunt efficitur hendrerit. Maecenas vel nibh quis nunc molestie sodales non at felis. Vestibulum urna ligula, dictum sed ex ut, commodo bibendum est. Pellentesque fringilla justo eget nunc fringilla, id facilisis ipsum blandit.
                        </p>
                    </div>
                </div>
                <div class="row col-lg-7">
                    <div id="demo_video">
                        <video width="82%" controls poster="video/Naughty Boy-screenshot.jpg">
                            <source src="video/Naughty Boy.mp4" type="video/mp4">
                            <source src="video/Naughty Boy.mp4" type="video/ogg">
                            Your browser does not support HTML5 video.
                        </video>
                    </div>
                </div>
            </div>
                    <!-- End of right-hand side panel --------->
        </section>
    </body>
</html>
​
​
 
var wink = new SpriteAnim({
  width: 14,
  height: 14,
  frames: 42,
  sprite: "http://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png",
  elementId : "anim1"
});
​
var monkey = new SpriteAnim({
  width: 18,
  height: 14,
  frames: 90,
  sprite: "http://mail.google.com/mail/im/emotisprites/monkey1.png",
  elementId : "anim4"
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers