webslides

<!doctype html> <html lang="en" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">   <title>WebSlides Tutorial: Videos, Images, and Maps</title> <meta name="description" content="How to embed images, videos, and maps in your presentation.">    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">  <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">  <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">   <meta property="og:url" content="/" /> <meta property="og:type" content="article" /> <meta property="og:title" content="WebSlides Tutorial: Media" />  <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">  <meta property="og:updated_time" content="2017-01-04T17:25:31">  <meta property="og:image" content="../static/images/share-webslides.jpg" >   <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@webslides">  <meta name="twitter:creator" content="@jlantunez">  <meta name="twitter:title" content="WebSlides Tutorial: Media">  <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">  <meta name="twitter:image" content="../static/images/share-webslides.jpg">   <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png"> <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">  <meta name="mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#333333"> </head> <body> <header role="banner"> <nav role="navigation"> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <ul> <li class="github"> <a rel="external" href="https://github.com/webslides/webslides" title="Github"> <svg class="fa-github"> <use xlink:href="#fa-github"></use> </svg> <em>WebSlides</em> </a> </li> <li class="twitter"> <a rel="external" href="https://twitter.com/webslides" title="Twitter"> <svg class="fa-twitter"> <use xlink:href="#fa-twitter"></use> </svg> <em>@WebSlides</em> </a> </li>  </ul> </nav> </header> <main role="main"> <article id="webslides">  <section class="bg-black-blue aligncenter"> <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>  <div class="wrap"> <p class="text-subtitle">WebSlides Tutorial</p> <h1 class="text-landing">Media</h1> <p class="text-symbols">* * *</p> <p> <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides"> <svg class="fa-github"> <use xlink:href="#fa-github"></use> </svg> Free Download </a> </p> </div>  </section> <section class="aligncenter"> <div class="wrap"> <h2><strong>A quick reference guide for beginners</strong></h2> <p class="text-intro">Videos, images, maps, and charts.</p> <ul class="flexblock border"> <li>  <div> <h3><a target="_blank" href="#slide=3">Images</a></h3> <ol> <li><a target="_blank" href="#slide=4">Background Images</a></li> <li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li> <li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li> <li><a target="_blank" href="#slide=13">Logos</a></li> <li><a target="_blank" href="#slide=14">Avatars</a></li> <li><a target="_blank" href="#slide=15">Devices</a></li> <li><a target="_blank" href="#slide=16">Screenshots</a></li> </ol> </div> </li> <li>  <div> <h3><a target="_blank" href="#slide=17">Videos</a></h3> <ol> <li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li> <li><a target="_blank" href="#slide=22">Embedding YouTube videos</a></li> <li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li> <li> <a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a> <ol> <li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li> <li><a target="_blank" href="#slide=30">Fullscreen video</a></li> <li><a target="_blank" href="#slide=32">Background video with overlay</a></li> </ol> </li> </ol> </div> </li> <li>  <div> <h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3> <ol> <li><a target="_blank" href="#slide=35">Embedding maps</a></li> <li><a target="_blank" href="#slide=36">Embedding the map in a card</a></li> <li><a target="_blank" href="#slide=37">Fullscreen maps</a></li> <li><a target="_blank" href="#slide=38">Embedding charts</a></li> </ol> </div> </li> </ul> </div>  </section> <section> <div class="wrap aligncenter"> <h3> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Insert images wherever you want </h3> <p class="text-intro">15 different positions.</p> </div>  </section> <section> <div class="wrap"> <h3>15 Different Backgrounds</h3> <ul class="text-cols"> <li><strong>.background</strong> (fullscreen)</li> <li>.background-top (cover)</li> <li>.background-bottom (cover)</li> <li>.background.light (opacity)</li> <li>.background.dark (opacity)</li> <li>.background-center</li> <li>.background-center-top</li> <li>.background-center-bottom</li> <li>.background-left</li> <li>.background-left-top</li> <li>.background-left-bottom</li> <li>.background-right</li> <li>.background-right-top</li> <li>.background-right-bottom</li> <li>.background-anim (animated)</li> </ul> </div>  </section> <section> <div class="wrap size-50"> <h4> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> .background = Fullscreen Backgrounds </h4> <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? →</a></p> <pre><section> <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span> <div class="wrap"> <h1>Slide</h1> </div> </section></pre> <p> <svg class="fa-info"> <use xlink:href="#fa-info"></use> </svg> Position .background outside of .wrap container. </p> </div>  </section> <section> <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <div class="wrap"> <div class="content-left"> <h3>.background-(position)</h3> <p><code>.background-right-bottom</code></p> <ul class="flexblock specs"> <li> <div> <svg class="fa-wifi"> <use xlink:href="#fa-wifi"></use> </svg> <h2>Ultra-Fast WiFi</h2> Simple and secure file sharing. </div> </li> <li> <div> <svg class="fa-battery-full"> <use xlink:href="#fa-battery-full"></use> </svg> <h2>All day battery life</h2> Your battery worries may be over. </div> </li> <li> <div> <svg class="fa-life-ring"> <use xlink:href="#fa-life-ring"></use> </svg> <h2>Lifetime Warranty </h2> We'll fix it or if we can't, we'll replace it. </div> </li> </ul> </div> </div>  </section> <section> <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <div class="wrap"> <div class="content-right"> <h3>.background-(position)</h3> <p><code>.background-left-bottom</code></p> <ul class="flexblock specs"> <li> <div> <svg class="fa-wifi"> <use xlink:href="#fa-wifi"></use> </svg> <h2>Ultra-Fast WiFi</h2> Simple and secure file sharing. </div> </li> <li> <div> <svg class="fa-battery-full"> <use xlink:href="#fa-battery-full"></use> </svg> <h2>All day battery life</h2> Your battery worries may be over. </div> </li> <li> <div> <svg class="fa-life-ring"> <use xlink:href="#fa-life-ring"></use> </svg> <h2>Lifetime Warranty </h2> We'll fix it or if we can't, we'll replace it. </div> </li> </ul> </div> </div>  </section> <section class="aligncenter bg-black"> <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>  <div class="wrap"> <h2>.background.anim</h2> </div>  </section> <section class="bg-black aligncenter"> <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span> <div class="wrap size-50"> <h1 class="text-landing text-shadow">Opacity</h1> <p><code>[class*="bg-"] > .background.light</code></p> <pre><section class="bg-black"> <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span> <div class="wrap"> <h1>Slide</h1> </div> </section></pre> </div> </section> <section class="bg-black aligncenter"> <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span> <div class="wrap size-50"> <h1 class="text-landing text-shadow">Opacity</h1> <p><code>[class*="bg-"] > .background.dark</code></p> <pre><section class="bg-black"> <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span> <div class="wrap"> <h1>Slide</h1> </div> </section></pre> </div> </section> <section> <div class="wrap size-50"> <p class="text-subtitle">Optional · 500+ icons</p> <h2> <a href="http://fontawesome.io/icons/"> <svg class="fa-flag"> <use xlink:href="#fa-flag"></use> </svg> Font Awesome </a> as SVG icons </h2> <pre><svg class="fa-flag"> <use xlink:href="#fa-flag"></use> </svg></pre> <p>How to change icons?</p> <ol class="text-cols"> <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li> <li>Create a free account.</li> <li>Select new icons.</li> <li>Publish as SVG sprite.</li> <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li> </ol> </div>  </section> <section class="bg-green"> <div class="wrap"> <h3>ul.flexblock.metrics.border</h3>  <ul class="flexblock metrics border"> <li> Founded <span>2024</span> </li> <li> <span> <svg class="fa-users"> <use xlink:href="#fa-users"></use> </svg> </span> 24M Subscribers </li> <li> <span> <svg class="fa-line-chart"> <use xlink:href="#fa-line-chart"></use> </svg> </span> Revenue: $16M </li> <li> Monthly Growth <span>64%</span> </li> <li> <span> <svg class="fa-building-o"> <use xlink:href="#fa-building-o"></use> </svg> </span> 8 Offices </li> <li> <span> <svg class="fa-smile-o"> <use xlink:href="#fa-smile-o"></use> </svg> </span> 48 Employees </li> <li> <span> <svg class="fa-usd"> <use xlink:href="#fa-usd"></use> </svg> </span> EBITDA: $2,4M </li> <li> <span> <svg class="fa-university"> <use xlink:href="#fa-university"></use> </svg> </span> Bank: $32M </li> </ul> </div>  </section> <section> <div class="wrap"> <h2>Transparent Logos</h2> <p> Change the color of a .svg/.png image using CSS. Images are property of their respective owners. </p> <hr> <ul class="flexblock blink"> <li> <a href="#" title="Block Link = .blink"> <div> <img src="../static/images/logos/google.svg" alt="Google"> <p><strong>Height recommended</strong>: 48px</p> </div> </a> </li> <li> <a href="#" title="Block Link = .blink"> <div> <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb"> <p><code>img.blacklogo</code></p> </div> </a> </li> <li> <a href="#" title="Block Link = .blink"> <div> <img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft"> <p><code>img.graylogo</code></p> </div> </a> </li> <li class="bg-blue"> <a href="" title="Block Link = .blink"> <div> <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix"> <p><code>img.whitelogo</code></p> </div> </a> </li> </ul> </div>  </section> <section>  <div class="wrap"> <blockquote class="text-quote"> <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p> <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p> </blockquote> <hr> <p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p> </div>  </section> <section> <div class="wrap"> <div class="grid vertical-align"> <div class="column"> <h2>Devices</h2> <ul class="flexblock specs"> <li> <div> <svg class="fa-wifi"> <use xlink:href="#fa-wifi"></use> </svg> <h2>Ultra-Fast WiFi</h2> Simple and secure file sharing. </div> </li> <li> <div> <svg class="fa-battery-full"> <use xlink:href="#fa-battery-full"></use> </svg> <h2>All day battery life</h2> Your battery worries may be over. </div> </li> <li> <div> <svg class="fa-life-ring"> <use xlink:href="#fa-life-ring"></use> </svg> <h2>Lifetime Warranty </h2> We'll fix it or if we can't, we'll replace it. </div> </li> </ul> </div>  <div class="column"> <figure> <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"> </figure> </div>  </div>  </div>  </section> <section> <div class="wrap"> <div class="content-left"> <figure class="browser"> <img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg"> </figure> </div>  <div class="content-left"> <h2>Screenshots</h2> <p>HTML/CSS Browser.</p> <pre><figure class="browser"> <img alt="Screenshot" src="image.jpg"> </figure></pre> </div>  </div>  </section> <section class="bg-blue"> <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>  <span class="background frame"></span> <div class="wrap aligncenter"> <h2> Videos </h2> </div>  </section> <section> <div class="wrap size-60"> <h3>Background videos</h3> <pre><strong><section class="fullscreen"></strong> <div class="embed"> <video autoplay loop poster="image.jpg"> <source src="video.mp4" type="video/mp4"> </video> </div> <strong></section></strong> </pre> <p>.fullscreen > .embed (responsive) > video</p> </div>  </section> <section class="fullscreen aligncenter"> <div class="embed"> <video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> </video> </div> </section> <section> <div class="wrap size-60"> <h3>Background videos</h3> <p>Transparent overlay:</p> <pre><strong><section class="fullscreen bg-blue"></strong> <div class="embed <strong>dark</strong>"> <video autoplay muted loop poster="image.jpg"> <source src="video.mp4" type="video/mp4"> </video> </div> <strong></section></strong> </pre> <p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p> </div>  </section> <section class="fullscreen bg-blue aligncenter"> <div class="embed dark"> <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> </video> </div>  <div class="wrap"> <h2><strong>Muted</strong></h2> <p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p> </div>  </section> <section> <div class="wrap"> <div class="content-left"> <h3>Responsive Videos</h3> <p>Just copy and paste the code from YouTube to your slide.</p> <pre><div class="embed"> <strong><iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"> </iframe></strong> </div></pre> <p><code>.embed</code> (responsive)</p> </div>  <div class="content-left">  <div class="embed"> <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe> </div>  </div>  </div>  </section> <section> <div class="wrap size-60">  <div class="embed"> <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe> </div>  </div>  </section> <section> <div class="wrap size-60"> <h3>Fullscreen YouTube Video</h3> <pre><strong><section class="fullscreen"></strong> <div class="embed"> <iframe src="https://www.youtube.com/embed/iY05U7GaU5I"> </iframe> </div> <strong></section></strong> </pre> <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p> </div>  </section> <section class="fullscreen">  <div class="embed"> <iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe> </div>  </section> <section class="frame"> <p class="aligncenter"> <svg class="fa-thumbs-up large"> <use xlink:href="#fa-thumbs-up"></use> </svg> </p> <div class="wrap size-60 bg-white"> <h3> <a href="https://developers.google.com/youtube"> <svg class="fa-youtube"> <use xlink:href="#fa-youtube"></use> </svg> YouTube API </a> </h3> <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p> <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p> </div>  </section> <section> <div class="wrap"> <h3> <svg class="fa-youtube"> <use xlink:href="#fa-youtube"></use> </svg> YouTube API Parameters </h3> <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p> <hr> <div class="grid"> <div class="column"> <pre><div class="embed"> <strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop> </div></strong> </div></pre> <p>autoplay + loop</p> </div>  <div class="column"> <pre><div class="embed"> <strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls> </div></strong> </div></pre> <p>autoplay + mute + no controls.</p> </div>  </div>  </div>  </section> <section> <div class="wrap"> <div class="content-left"> <h3>YouTube API</h3> <p><code>autoplay + loop</code></p> <pre><div class="embed"> <div data-youtube data-youtube-id="_m67JbGjWnc" <strong>data-autoplay data-loop</strong>> </div> </div></pre> </div>  <div class="content-left">  <div class="embed"> <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div> </div>  </div>  </div>  </section> <section class="frame"> <div class="wrap size-60 bg-white"> <h3> <svg class="fa-info-circle large"> <use xlink:href="#fa-info-circle"></use> </svg> <strong>Autoplay Feature</strong> </h3> <p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p> </div>  </section> <section> <div class="wrap size-70"> <h3><strong>Let's make some magic with the YouTube API</strong></h3> <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p> <hr> <pre><strong><section class="fullscreen"></strong> <div class="embed"> <div data-youtube data-youtube-id="dmkwb2KfLW8" <strong>data-autoplay data-loop data-no-controls</strong></div> </div> <strong></section></strong> </pre> <p>The video will automatically play when the slide is loaded.</p> </div>  </section> <section class="fullscreen">  <div class="embed"> <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div> </div>  </section> <section> <div class="wrap size-70"> <h3><strong>Fullscreen YouTube video background</strong></h3> <p>Overlaying a transparent background on an embedded Youtube video:</p> <hr> <pre><strong><section class="fullscreen bg-black"></strong> <div class="embed dark"> <div data-youtube data-youtube-id="c9psfOxJysw" <strong>data-autoplay data-loop data-mute data-no-controls</strong></div> </div> <strong></section></strong> </pre> <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p> </div>  </section> <section class="fullscreen bg-blue">  <div class="embed dark"> <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div> </div>  <div class="wrap aligncenter"> <h2><strong>Overlay</strong></h2> <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p> </div>  </section> <section class="bg-primary"> <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span> <div class="wrap aligncenter"> <h3> <svg class="fa-map"> <use xlink:href="#fa-map"></use> </svg> Maps & Charts </h3> </div>  </section> <section class="bg-black-blue"> <div class="wrap size-50"> <p class="text-context">Status of Net Neutrality around the world.</p> <div class="embed"> <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe> </div>  </div>  </section> <section> <div class="wrap"> <div class="card-50 bg-white"> <figure> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe> <figcaption> <a href="https://maps.google.com" title="Google Maps"> <svg class="fa-map"> <use xlink:href="#fa-map"></use> </svg> Google Maps </a> </figcaption> </figure>  <div class="flex-content"> <h2> Discover Seville </h2> <p>.card-50.bg-white</p> <ul class="description"> <li> <strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup> </li> <li><strong class="text-label" title="Population">Population:</strong> 703,021</li> <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li> </ul> <p> There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies. </p> </div>  </div>  </div>  </section> <section class="fullscreen"> <div class="embed"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe> </div>  </section> <section> <div class="wrap size-60"> <h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>  <div class="embed">  <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div> <script src="https://www.theatlas.com/javascripts/atlas.js"></script> </div>  </div>  </section> <section class="aligncenter">  <div class="wrap"> <h2><strong>Start in seconds</strong></h2> <p class="text-intro">120+ prebuilt slides ready to use.</p> <p> <a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides"> <svg class="fa-cloud-download"> <use xlink:href="#fa-cloud-download"></use> </svg> Free Download </a> <span class="try"> <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)"> <svg class="fa-paypal"> <use xlink:href="#fa-paypal"></use> </svg> Pay what you want. </a> </span> </p> </div>  </section> <section class="bg-primary aligncenter"> <h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2> <h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3> </section> </article> </main>   <script src="../static/js/webslides.js"></script> <script> window.ws = new WebSlides(); </script>  <script defer src="../static/js/svg-icons.js"></script> </body> </html>