948 lines
37 KiB
HTML
948 lines
37 KiB
HTML
|
<!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">
|
||
|
|
|
||
|
|
<!-- CLEAN MARKUP = GOOD KARMA.
|
||
|
|
Hi source code lover,
|
||
|
|
|
||
|
|
you're a curious person and a fast learner ;)
|
||
|
|
Let's make something beautiful together. Contribute on Github:
|
||
|
|
https://github.com/webslides/webslides
|
||
|
|
|
||
|
|
Thanks!
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- SEO -->
|
||
|
|
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
|
||
|
|
<meta name="description" content="How to embed images, videos, and maps in your presentation.">
|
||
|
|
|
||
|
|
<!-- URL CANONICAL -->
|
||
|
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
||
|
|
|
||
|
|
<!-- Google Fonts -->
|
||
|
|
<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">
|
||
|
|
|
||
|
|
<!-- CSS Base -->
|
||
|
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
|
||
|
|
|
||
|
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||
|
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
|
||
|
|
|
||
|
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||
|
|
|
||
|
|
<!-- FACEBOOK -->
|
||
|
|
<meta property="og:url" content="/" />
|
||
|
|
<meta property="og:type" content="article" />
|
||
|
|
<meta property="og:title" content="WebSlides Tutorial: Media" />
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta property="og:updated_time" content="2017-01-04T17:25:31">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
|
||
|
|
<!-- TWITTER -->
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="twitter:site" content="@webslides">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta name="twitter:creator" content="@jlantunez">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta name="twitter:title" content="WebSlides Tutorial: Media">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
<meta name="twitter:image" content="../static/images/share-webslides.jpg">
|
||
|
|
|
||
|
|
<!-- EDIT -->
|
||
|
|
|
||
|
|
<!-- FAVICONS -->
|
||
|
|
<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">
|
||
|
|
|
||
|
|
<!-- Android -->
|
||
|
|
<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>
|
||
|
|
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main role="main">
|
||
|
|
<article id="webslides">
|
||
|
|
|
||
|
|
<!-- Quick Guide
|
||
|
|
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||
|
|
- Vertical sliding = <article id="webslides" class="vertical">
|
||
|
|
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
||
|
|
-->
|
||
|
|
|
||
|
|
<section class="bg-black-blue aligncenter">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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 required = padding li or li>a-->
|
||
|
|
<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 required = padding li or li>a-->
|
||
|
|
<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 required = padding li or li>a-->
|
||
|
|
<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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter bg-black">
|
||
|
|
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.background.anim</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-green">
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.metrics.border</h3>
|
||
|
|
<!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
|
||
|
|
<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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- end .column-->
|
||
|
|
<div class="column">
|
||
|
|
<figure>
|
||
|
|
<img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<!-- end .column-->
|
||
|
|
</div>
|
||
|
|
<!-- end .grid-->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap-->
|
||
|
|
</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>
|
||
|
|
<!-- .end .content-left -->
|
||
|
|
<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>
|
||
|
|
<!-- .end .content-left -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-blue">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
|
||
|
|
<!-- background with a frame frame -->
|
||
|
|
<span class="background frame"></span>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2>
|
||
|
|
Videos
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>Muted</strong></h2>
|
||
|
|
<p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
<div class="content-left">
|
||
|
|
<!-- <div class="embed"> = Responsive -->
|
||
|
|
<div class="embed">
|
||
|
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
<!-- end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<!-- Responsive video/iframe... Add <div class="embed"> -->
|
||
|
|
<div class="embed">
|
||
|
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen">
|
||
|
|
<!-- Fullscreen Video -->
|
||
|
|
<div class="embed">
|
||
|
|
<iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .column -->
|
||
|
|
<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>
|
||
|
|
<!-- .end .column -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
<div class="content-left">
|
||
|
|
<!-- <div class="embed"> = Responsive -->
|
||
|
|
<div class="embed">
|
||
|
|
<div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
|
||
|
|
</div>
|
||
|
|
<!-- end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen">
|
||
|
|
<!-- Fullscreen Video -->
|
||
|
|
<div class="embed">
|
||
|
|
<div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen bg-blue">
|
||
|
|
<!-- Fullscreen Video -->
|
||
|
|
<div class="embed dark">
|
||
|
|
<div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Overlay</strong></h2>
|
||
|
|
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- end 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>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
</div>
|
||
|
|
<!-- end .card-50-->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
|
||
|
|
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
||
|
|
<div class="embed">
|
||
|
|
<!-- I love Quartz's charts -->
|
||
|
|
<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>
|
||
|
|
<!-- end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!-- .wrap = container width: 90% -->
|
||
|
|
<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>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>
|
||
|
|
<!--main-->
|
||
|
|
<!-- Required -->
|
||
|
|
|
||
|
|
<script src="../static/js/webslides.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.ws = new WebSlides();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||
|
|
<script defer src="../static/js/svg-icons.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|