<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="container360"></div> <div class="info"> <h1>NPM kaleidoscope package</h1> <a href="https://github.com/thiagopnts/kaleidoscope" target="_blank">kaleidoscope</a> </div> <h1 id="info"><a href="http://www.aarhus2017.dk/en/">City of #Aarhus</a></h1> <script> (function() { var viewer = new Kaleidoscope.Image({ source: 'https://dl.dropboxusercontent.com/u/3260327/cdn/Fil%2009-05-2017%2011.09.12.jpeg', containerId: '#container360', height: window.innerHeight, width: window.innerWidth, }); viewer.render(); window.onresize = function() { viewer.setSize({height: window.innerHeight, width: window.innerWidth}); }; })(); </script>

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700); html, body, #container360 { font-family: 'Inconsolata', monospace ; padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } .info { pointer-events: none; user-select: none; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-shadow: 0 0 7px black; height: 4.5em; color: white; position: absolute; bottom: 0; background: hsla(120,100%,100%,.1); box-sizing: border-box; padding: .5em; } a { color: white; pointer-events: all; transition: all .4s; } h1 { margin: 0; padding: 0; } #info { position: absolute; top: .5em; left: .5em; } #info a { text-decoration: none; color: hsla(120,100%,100%,.7); } #info a:hover, .info a:hover { color: yellow; }