<div class = "fallback-message"> <p>impress.js not supported</p> </div> <div id = "impress"> <div class = "step" data-scale="20"> Slide 1 </div> <div class = "step" > <h2> impress.js is awesome!</h2> <p> It can do a number of awesome things, such as: </p> <ul> <li>This thing</li> <li>That thing</li> <li>Another thing</li> <li>One more thing</li> </ul> </div> </div> <script src = "https://raw.github.com/bartaz/impress.js/master/js/impress.js"></script> <script>impress().init();</script>
.impress-supported .fallback-message { display: none; } .step { width: 400px; height: 300px; padding: 20px; margin: 10px; border: 4px solid black; font-size: 1.2em; line-height: 1.4em; } .step h2 { text-shadow: 4px 4px 3px #999999; font-size: 1.8em; line-height:1.9em; } .step ul { list-style-type: square; font-size: 1.4em; text-align: left; line-height: 1.5em; list-style-position: inside; }