vesper/slides20211003
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

created slides

Browse source
This commit is contained in:
sven 2021-10-01 12:02:03 +02:00
commit c8cc4fc95c
47 changed files with 23158 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2017 José Luis Antúnez
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

105
README.md Normal file
View file

@ -0,0 +1,105 @@
# WebSlides = Create stories with Karma
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
* * *
### Download
Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
* * *
### What's in the download?
The download includes demos and images (devices and logos).
All content is for demo purposes only. Images are property of their respective owners.
```
webslides/
├── index.html
├── css/
│ ├── base.css
│ └── colors.css
│ └── svg-icons.css (optional)
├── js/
│ ├── webslides.js
│ └── svg-icons.js (optional)
└── demos/
└── images/
```
## Features
- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
- Slide counter.
- Permalinks: go to a specific slide.
- Autoslide.
- Click to nav.
- Simple CSS alignments. Put content wherever you want (vertical centering...)
- 40+ components: background images/videos, quotes, cards, covers...
- Flexible blocks with auto-fill and equal height.
- Fonts: Roboto, Maitree (Serif), and San Francisco.
- Vertical rhythm (use multiples of 8).
## Markup
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
- Each parent `<section>` in the `#webslides` element is an individual slide.
```html
<article id="webslides">
<section>
<h1>Slide 1</h1>
</section>
<section class="bg-black aligncenter">
<!-- .wrap = container 1200px -->
<div class="wrap">
<h1>Slide 2</h1>
</div>
</section>
</article>
```
### Vertical Sliding
```html
<article id="webslides" class="vertical">
```
### CSS Syntax (classes)
- Typography: `.text-landing`, `.text-data`, `.text-intro`...
- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
- Background Images: `.background`,`.background-center-bottom`...
- Cards: `.card-50`, `.card-40`...
- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
### Extensions
You can add:
- [Unsplash](https://unsplash.com) photos
- [animate.css](https://daneden.github.io/animate.css)
- [particles.js](https://github.com/VincentGarreau/particles.js)
- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
- [pt](http://williamngan.github.io/pt/)
### Dive In!
- Do not miss [our demos](https://webslides.tv/).
- Want to get techie? Read [our wiki](wiki):
- [FAQ](https://github.com/webslides/WebSlides/wiki)
- [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
- [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
- [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
### Credits
- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

1943
demos/classes.html Normal file
View file

File diff suppressed because it is too large Load diff

3148
demos/components.html Normal file
View file

File diff suppressed because it is too large Load diff

265
demos/index.html Normal file
View file

@ -0,0 +1,265 @@
<!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,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides Demos</title>
<meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
<!-- 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&amp;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="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides Demos"> <!-- EDIT -->
<meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- 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 Demos"> <!-- EDIT -->
<meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- 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> <!-- Slideshow? 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>
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h1><strong>WebSlides Demos</strong></h1>
<p class="text-intro">All of these presentations are free and responsive.<br>
40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
<p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<ul class="flexblock gallery">
<li>
<a href="../demos/why-webslides.html" title="Why WebSlides?">
<figure>
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
<figcaption>
<h2>Why WebSlides?</h2>
<time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/landings.html" title="Landings">
<figure>
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
<figcaption>
<h2>Landings</h2>
<time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/portfolios.html" title="Portfolios">
<figure>
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
<figcaption>
<h2>Portfolios</h2>
<time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/keynote.html" title="Apple Keynote">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
<figcaption>
<h2>Apple Keynote</h2>
<time datetime="2017-01-05T20:13:48-08:00">Jan 05, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/netflix-culture.html" title="Netflix's Culture">
<figure>
<img alt="Thumbnail Netflix's Culture" src="https://webslides.tv/static/images/demos-netflix.png">
<figcaption>
<h2>Netflix's Culture</h2>
<time datetime="2017-04-16T20:16:48-08:00">Mar 16, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/longforms.html" title="Longform Articles">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
<figcaption>
<h2>Longforms</h2>
<time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/interviews.html" title="Interviews">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
<figcaption>
<h2>Interviews</h2>
<time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h2 class="aligncenter">General Questions</h2>
<p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> &middot; <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
<div class="grid">
<div class="column">
<h6>Why WebSlides? Good karma</h6>
<p>There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.</p>
<h6>Is WebSlides a framework?</h6>
<p>We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic <a href="../demos/components.html" title="WebSlides Components">structural components</a> and a scalable <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
</div>
<!-- end .column -->
<div class="column">
<figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
</div>
<!-- end .column -->
<div class="column">
<h6>What can you do with WebSlides?</h6>
<p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
</p>
<h6>How easy is WebSlides?</h6>
<p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
</div>
<!-- end .column -->
</div>
<!-- end .grid -->
</div>
<!-- end .wrap -->
</section>
<section class="bg-white aligncenter">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button" 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="Good karma :)">
<svg class="fa-paypal">
<use xlink:href="#fa-paypal"></use>
</svg>
Pay what you want.
</a>
</span>
</p>
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!-- end 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>

358
demos/interviews.html Normal file
View file

@ -0,0 +1,358 @@
<!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 Demo: Longform Interviews</title>
<meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
<!-- 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&amp;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="http://your-url.com/permalink">
<!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides Demo: Longform Interviews" />
<!-- EDIT -->
<meta property="og:description" content="Create longform interviews with ease. Just the essentials.">
<!-- EDIT -->
<meta property="og:updated_time" content="2017-03-28T12:17:24">
<!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT -->
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="429">
<!-- 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 Demo: Longform Interviews">
<!-- EDIT -->
<meta name="twitter:description" content="Create longform interviews with ease. Just the essentials.">
<!-- 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>
<section class="bg-black">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span>
<!--.wrap = container width: 90% -->
<div class="wrap">
<p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a>.</p>
<h1>
<strong>Designing Interviews</strong>
</h1>
<p>All content is for demo purposes only.</p>
<p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David Yang"> By David Yang. Nov 8th, 2024.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
<div class="wrap longform">
<h2><strong>The Art of the Interview</strong></h2>
<p class="text-intro">The stories you tell, whether in text form, by way of video or through audio, are only as good as the information you gather.</p>
<p>Interviewing is the cornerstone of journalism. Interviews usually take place face to face and in person, although modern communications technologies such as the Internet have enabled conversations to happen in which parties are separated geographically, such as with videoconferencing software, and of course telephone interviews can happen without visual contact.</p>
<hr>
<dl class="text-interview">
<dt>David:</dt>
<dd>
<p><strong>Hi, this is a WebSlides Demo, where we interview the people who make us happy. I’m your host, David González. This week I interviewed lawyer Sheryl Hadid. Hi Sheryl!</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>Hi David!</p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>Are interviews copyrighted? When does an interview become copyrightable?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>The answer is it depends. Copyright of speech given during an interview relies heavily on the "fixation" element of copyright law. When a work is fixed in a copy or recording, the work is created. This gives the work its copyright. Therefore, when an interview is physically recorded it becomes copyrighted.</p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>How could the person being interviewed own the copyright to an interview?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>This may be a surprise but there are moments when the person being interviewed could in fact have copyright ownership in their words. For example, if the person being interviewed receives a list of questions from the interviewer and records their calculated responses, they could have copyright ownership in their answers because they not the interviewer actually wrote down or otherwise recorded their response.</p>
</dd>
<dd>
<blockquote class="text-quote">
<p>People want to be smart. So, if you ask smart questions and show an interest in a particular subject they love sharing their insight.<code>.text-quote</code>.</p>
</blockquote>
</dd>
<dd>
<p>However, courts are hesitant to apply this concept broadly to spoken interviews because of the impact it could have on the First Amendment and the heavy caseload it would bring to an already overloaded court system. See Falwell v. Penthouse Intern., Ltd. This also opens the door for other legal arguments such as fair use. Furthermore, there are times when contractual releases could affect the copyright and alter default copyright rules. </p>
</dd>
</dl>
<hr>
<div class="text-pull embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&amp;controls=0" allowfullscreen></iframe>
</div>
<!--.text-pull.embed (responsive video) -->
<hr>
<dl class="text-interview">
<dt>David:</dt>
<dd>
<p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>Most often when problems with interview ownership arise it’s because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation. Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
</dd>
<dd>
<p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others. And if you truly don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
</dd>
</dl>
</div>
</section>
<section>
<!--.wrap = container width: 90% -->
<div class="wrap size-50 aligncenter">
<h3><strong>Things you can do with WebSlides</strong></h3>
<p class="text-intro"><a href="/demos/why-webslides" title="Why WebSlides?">Presentations</a>, <a href="/demos/landings" title="Landings">landings</a>, <a href="/demos/portfolios" title="Portfolios">portfolios</a>, and <a href="/demos/longforms" title="Longforms">longforms</a>.</p>
<div class="bg-white shadow">
<ul class="flexblock reasons">
<li>
<h2>An opportunity to engage.</h2>
<p><a href="https://webslides.tv" title="WebSlides">WebSlides</a> is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
</li>
<li>
<h2>Work better, faster.</h2>
<p>Designers, marketers, and journalists can now focus on the content. Simply <a href="https://webslides.tv/demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
</li>
</ul>
</div>
<!-- .end .bg-white shadow -->
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<!--.wrap = container width: 90% -->
<div class="wrap longform">
<dl class="text-interview">
<dt>David:</dt>
<dd>
<p><strong>Is a web address (a domain name) subject to copyright law?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>No, for a variety of reasons web addresses (also known as a domain names or URLs) aren't protected by copyright. Even though copyright doesn’t protect domain names, that doesn’t mean domain names are entirely unprotected. Trademark law protects web addresses. And for a variety of reasons, companies are often more apt to go after individual instances of trademark infringement than individual copyright infringers. </p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>Are there easier alternatives than copyright?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>Some persons and organizations hope to make the rules about using and reusing work more user-friendly. These groups may make their work freely available under <a href="https://creativecommons.org/">Creative Commons</a> licenses or expressly abandon them into the public domain. </p>
</dd>
<dd>
<p>But just because an author employs either of these copyright alternatives, that doesn’t mean that they are completely free of legal issues. For example, imagine you’re an advertising designer for Virgin Mobile, and you need a photo of a pretty teenage girl for your latest ad. You find a photo on Flickr that is free to use under a Creative Commons Attribution license. You use the photo in your ad campaign and plaster the photo on bus stops across Australia. This is exactly what happened, and since the photographer was adequately credited and copyright issues were non-existent everybody lived happily ever after, right?</p>
</dd>
<dd>
<p>If you have any questions about alternatives to the standard copyright scheme or how these alternatives are being utilized by thousands of artists every day, feel free to contact <a href="https://www.newmediarights.org/about_us/contact_us">New Media Rights</a>.</p>
</dd>
</dl>
<p><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">"Are interviews copyrighted"</a> by NewMediaRights is licensed under CC BY NC 3.0.</p>
<hr>
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
<p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
<form action="/" class="bg-light user" method="post">
<input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
<button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
</form>
</div>
<!-- .end .wrap -->
</section>
<section>
<!-- .wrap = container width: 90% -->
<div class="wrap aligncenter">
<h2><strong>Ready to start?</strong> </h2>
<p class="text-intro">Create your stories instantly.</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button" 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>
</article>
</main>
<!--main-->
<footer role="contentinfo">
<div class="wrap">
<div class="grid">
<div class="column">
<h3>Company</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Support</h3>
<ul>
<li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Legal</h3>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Community</h3>
<ul>
<li>
<a href="#">
<svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use>
</svg>
Facebook
</a>
</li>
<li>
<a href="#">
<svg class="fa-youtube">
<use xlink:href="#fa-youtube"></use>
</svg>
YouTube
</a>
</li>
<li>
<a href="#">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
Twitter
</a>
</li>
</ul>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
</div>
<!-- .end .wrap -->
</footer>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

858
demos/keynote.html Normal file
View file

@ -0,0 +1,858 @@
<!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 Keynote: Make a Keynote presentation using HTML</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS.">
<!-- 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&amp;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="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="Make a Keynote presentation using HTML"> <!-- EDIT -->
<meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- 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="Make a Keynote presentation using HTML"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- 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-apple aligncenter">
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h1>Make a Keynote presentation using HTML</h1>
<p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p>
<p><code>.bg-apple</code></p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h2>HTML presentations can be easy</h2>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<h2>Features</h2>
<ul class="flexblock features">
<li>
<div>
<h2>
<span>&rarr;</span>
Simple Navigation
</h2>
with arrow keys and swipe.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-link">
<use xlink:href="#fa-link"></use>
</svg>
Permalinks
</h2>
Go to a specific slide.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-clock-o">
<use xlink:href="#fa-clock-o"></use>
</svg>
Slide Counter
</h2>
Current/Total number
</div>
</li>
<li>
<div>
<h2>
<span>40<sup>+</sup></span>
Beautiful Components
</h2>
Covers, cards, quotes...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-text-height">
<use xlink:href="#fa-text-height"></use>
</svg>
Vertical Rhythm
</h2>
Use multiples of 8.
</div>
</li>
<li>
<div>
<h2>
<span>500<sup>+</sup></span>
SVG Icons
</h2>
Font Awesome Kit.
</div>
</li>
</ul>
</div>
</section>
<section class="bg-apple">
<div class="wrap">
<div class="content-left">
<h2>WebSlides was made to inspire people.</h2>
</div>
<!-- end .content-left -->
<div class="content-left">
<p>WebSlides is a wonderful way to showcase your company. All content is for demo purposes only. Images are property of their respective owners.</p>
</div>
<!-- end .content-left -->
<ul class="flexblock">
<li>
<div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
</div>
</li>
<li>
<div>
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
</div>
</li>
<li>
<div>
<img class="whitelogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="content-left">
<h2>WebSlides help you build a culture of excellence.</h2>
</div>
<!-- end .content-left -->
<div class="content-left">
<p>The art of storytelling. Hypertext, clean code, and beauty as narrative elements. Just essential features and lovely CSS. All content is for demo purposes only. </p>
</div>
<!-- end .content-left -->
<ul class="flexblock metrics">
<li> Founded
<span>1976</span>
</li>
<li>
<span>
<svg class="fa-users">
<use xlink:href="#fa-users"></use>
</svg>
</span>
524M 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>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<!--.wrap o <nav> = container 1200px -->
<div class="wrap">
<ul class="flexblock metrics border">
<li> Founded
<span>1976</span>
</li>
<li>
<span>
<svg class="fa-users">
<use xlink:href="#fa-users"></use>
</svg>
</span>
524M 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>
6 Offices
</li>
<li>
<span>
<svg class="fa-smile-o">
<use xlink:href="#fa-smile-o"></use>
</svg>
</span>
14K Employees
</li>
<li>
<span>
$4M
</span>
EBITDA
</li>
<li>
<span>
<svg class="fa-university">
<use xlink:href="#fa-university"></use>
</svg>
</span>
Bank: $76B
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/pb_lF8VWaPU/')"></span>
<div class="wrap">
<h2 class="text-data">3,456,789</h2>
<h3>iPhone 7 in first 24 hours</h3>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h2 class="text-data">$48 Billion</h2>
<h3>Revenue in Q4 2024</h3>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple slide-bottom">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/Y5Tjb62cxl8/')"></span>
<div class="wrap">
<div class="content-left">
<p>
<svg class="large fa-tree">
<use xlink:href="#fa-tree"></use>
</svg>
</p>
<h2>1,000,000</h2>
<h3>We're working to protect up to a million acres of sustainable forest.</h3>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="card-50">
<figure><img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"></figure>
<div class="flex-content">
<h2>
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
iPhone 7
</h2>
<p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
<p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
</div>
<!-- end .flex-content-->
</div>
<!-- end .card-50-->
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h2>
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
iPhone 7
</h2>
<p class="text-intro">We worked closely with the very talented people at Acme and created a new website. Content demo. </p>
<ul class="description">
<li>
<span class="text-label">
Client:
</span>
Apple (2016)
</li>
<li>
<span class="text-label">
Services:
</span>
Web Design
</li>
<li>
<span class="text-label">
Website:
</span>
<a href="https://apple.com/iphone/">apple.com/iphone</a>
</li>
</ul>
</div>
<!-- end .column-->
<div class="column">
<figure>
<img src="../static/images/iphone.png" alt="iPhone">
</figure>
</div>
<!-- end figure-->
</div>
<!-- end .grid-->
</div>
<!-- end .wrap-->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="card-50">
<div class="flex-content">
<ul class="flexblock specs">
<li>
<div>
<svg class="fa-wifi">
<use xlink:href="#fa-wifi"></use>
</svg>
<h2>Ultra-Fast WiFi</h2>
Faster LTE with the best worldwide roaming.
</div>
</li>
<li>
<div>
<svg class="fa-camera">
<use xlink:href="#fa-camera"></use>
</svg>
<h2>Two cameras that shoot as one.</h2>
12MP wide angle.
</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 .flex-content-->
<figure>
<img class="aligncenter" src="../static/images/iphone.png" alt="iPhone 6">
</figure>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<div class="wrap zoomIn">
<h1>
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
Pay
</h1>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
<div class="wrap">
<div class="content-right">
<h2>
Redesigning
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
Pay
</h2>
<p>We've been working with the Acme team over the last three months to build a new app.</p>
<p>
<a href="#" class="button" title="Case study">Case study &rsaquo;</a>
<a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site &rsaquo;</a>
</p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="content-left">
<h2>Payments Made Simple</h2>
<p>Apple Pay is so easy. Pay with your debit cards and credit cards with just a touch.</p>
<div class="content-left">
<h3>Secure</h3>
<p>Your card is never stored. Apple Pay uses a device-specific number and unique transaction code.</p>
</div>
<!-- .end .content-left -->
<div class="content-left">
<h3>Universal</h3>
<p>Apple Pay works with most major credit and debit cards from nearly all banks.</p>
</div>
<!-- .end .content-left -->
</div>
<!-- .end .content-left -->
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
<div class="wrap">
<div class="content-right">
<ul class="flexblock specs">
<li>
<div>
<svg class="fa-bolt">
<use xlink:href="#fa-bolt"></use>
</svg>
<h2>Incredibly fast</h2>
Just hold your iPhone near the reader.
</div>
</li>
<li>
<div>
<svg class="fa-globe">
<use xlink:href="#fa-globe"></use>
</svg>
<h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels...
</div>
</li>
<li>
<div>
<svg class="fa-lock">
<use xlink:href="#fa-lock"></use>
</svg>
<h2>The safer way to pay</h2>
Your card number is never stored.
</div>
</li>
</ul>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
<div class="wrap">
<div class="content-left">
<h1>
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
Pay
</h1>
<p>Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch. See where you can use Apple Pay:
</p>
<form class="user" action="/" method="post">
<input type="text" name="location" placeholder="Stores in your city..." required>
<button type="submit" title="Search">Search &rsaquo;</button>
</form>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<blockquote class="text-quote">
<p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p>
<p>
<cite>
<!-- <img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> --> Steve Jobs.
</cite>
</p>
</blockquote>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
<div class="wrap">
<div class="content-left">
<blockquote>
<p>&ldquo;We see that privacy is a fundamental human right that people have. We are going to do everything that we can to help maintain that trust.&rdquo;</p>
<p><cite>Tim Cook, CEO of Apple.</cite></p>
</blockquote>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<header>
<!--.wrap o <nav> = container 1200px -->
<div class="wrap">
<p>Header <span class="alignright">.alignright</span></p>
</div>
</header>
<div class="aligncenter fadeInUp">
<h2>Simple CSS Alignments</h2>
<p>Put content wherever you want.</p>
</div>
<footer class="bg-trans-dark">
<div class="wrap">
<p>
<span class="alignleft">
Footer
</span>
<span class="alignright">
<a href="#" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
@username
</a>
</span>
</p>
</div>
</footer>
</section>
<section class="bg-apple slide-top">
<div class="wrap">
<div class="content-left">
<h3>1/9 left top</h3>
<p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
<p><code>.slide-top and .content-left</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple slide-top">
<div class="wrap">
<div class="content-center">
<h3>2/9 center top</h3>
<p>Apple I was designed and hand-built by Steve Wozniak. Steve Jobs had the idea of selling the computer.</p>
<p><code>.slide-top and .content-center</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple slide-top">
<div class="wrap">
<div class="content-right">
<h3>3/9 right top</h3>
<p>The Apple II is one of the first highly successful computers.</p>
<p><code>.slide-top and .content-right</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="content-left">
<h3>4/9 left center</h3>
<p>The Apple III is a business-oriented personal computer that was intended as the successor to the Apple II series.</p>
<p><code>.content-left</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="content-center">
<h3>5/9 center</h3>
<p>Apple Lisa was one of the first personal computers to offer a graphical user interface.</p>
<p><code>.content-center</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="content-right">
<h3>6/9 right center</h3>
<p>The Macintosh was the company's first mass-market personal computer featuring a GUI and mouse.</p>
<p><code>.content-right</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple slide-bottom">
<div class="wrap">
<div class="content-left">
<h3>7/9 left bottom</h3>
<p>The iBook was a line of laptop computers designed and marketed by Apple Inc. from 1999 to 2006.</p>
<p><code>.slide-bottom</code> and <code>.content-left</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple slide-bottom">
<div class="wrap">
<div class="content-center">
<h3>8/9 center bottom</h3>
<p>Apple introduced the first generation iPod on October 23, 2001, with the slogan "1,000 songs in your pocket".</p>
<p><code>.slide-bottom</code> and <code>.content-center</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple slide-bottom">
<div class="wrap">
<div class="content-right">
<h3>9/9 right bottom</h3>
<p>The original iPhone was introduced by Steve Jobs on January 9, 2007. Jobs introduced the iPhone as a combination of three devices.</p>
<p><code>.slide-bottom</code> and <code>.content-right</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap size-50">
<h2>CSS Animations</h2>
<p>Fadein transition to all slides.</p>
<pre>&lt;article id="webslides"&gt;
&lt;section&gt;
&lt;div class="wrap fadeInUp"&gt;
&lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;</pre>
<p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-black aligncenter">
<span class="background light" style="background-image:url('https://source.unsplash.com/UxtIESWxLh8/')"></span>
<div class="wrap">
<h2>Embedding Media</h2>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<div class="wrap">
<div class="content-left">
<h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
<p>Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.</p>
<pre>&lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt;
&lt;/div&gt;</pre>
<p><code>.embed</code> (responsive)</p>
</div>
<!-- end .content-left -->
<div class="content-left">
<!-- <div class="embed"> = Responsive -->
<div class="embed">
<div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-no-controls></div>
</div>
<!-- end .embed -->
</div>
<!-- end .content-left -->
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple fullscreen">
<!-- Fullscreen Video -->
<div class="embed">
<div data-youtube data-youtube-id="lvOKBQvbLhg" data-autoplay></div>
</div>
<!-- .end .embed -->
</section>
<section class="fullscreen bg-apple aligncenter">
<div class="embed">
<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><!-- .embed -->
<!-- .wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>Be Awesome</strong></h2>
</div>
</section>
<section class="fullscreen bg-black 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><!-- .embed -->
<!-- .wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>Think Different</strong></h2>
<p>Overlay: <code>fullscreen.bg-black > .embed.dark</code> or .light</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
<div class="wrap">
<h1>One more thing...</h1>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<div class="wrap">
<div class="cta">
<div class="number">
<p><span>Ag</span></p>
</div>
<!--end .number -->
<div class="benefit">
<p class="text-subtitle">San Francisco</p>
<h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>1234567890(,.;:?!$&*)</p>
</div>
<!--end .benefit -->
</div>
<!--end .cta -->
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple 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" 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="Good karma :)">
<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-apple aligncenter">
<h2 class="text-emoji zoomIn">😎</h2>
<h3><strong>Thank you!</strong></h2>
<p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
</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>

1933
demos/landings.html Normal file
View file

File diff suppressed because it is too large Load diff

415
demos/longforms.html Normal file
View file

@ -0,0 +1,415 @@
<!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 Demo: Longforms</title>
<meta name="description" content="WebSlides is about telling stories. Create longform articles with ease.">
<!-- 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&amp;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="https://webslides.tv/demos/why-webslides">
<!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides Demo: Longforms" />
<!-- EDIT -->
<meta property="og:description" content="Create longform articles with ease. Just the essentials.">
<!-- EDIT -->
<meta property="og:updated_time" content="2017-03-28T18:24:48">
<!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT -->
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="429">
<!-- 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 Demo: Longforms">
<!-- EDIT -->
<meta name="twitter:description" content="Create longform articles with ease. Just the essentials.">
<!-- 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>
<section>
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background-bottom" style="background-image:url('https://webslides.tv/static/images/nyc.jpg')"></span>
<!--.wrap = container width: 90% -->
<div class="wrap aligncenter">
<h1 class="text-landing">
<strong>Longform Demo</strong>
</h1>
<p class="text-intro">How to engage readers with longform journalism?<br> All content is for demo purposes only.
</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free" class="button zoomIn">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>
WebSlides
</a>
</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
<div class="wrap longform">
<h2><strong>The Art of Storytelling</strong></h2>
<p><a href="https://twitter.com/webslides" title="David Yang"><img class="avatar-40" src="../static/images/avatar.jpg" alt="David Yang"></a> David Yang. Nov 16th, 2032.</p>
<p class="text-intro">
WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
</p>
<p>People share content that makes them feel inspired. WebSlides is free and open source. We built it because we need a platform for beautiful storytelling. Longform journalism has grown in popularity over the past several years, with blogs and media organizations including <a href="https://medium.com">Medium</a>, <a href="http://highline.huffingtonpost.com/">The Huffington Post</a>, and <a href="http://nytimes.com">The New York Times</a> creating or expanding longform coverage and new companies such as <a href="https://atavist.com/">The Atavist</a>, <a href="https://longreads.com/">Longreads.com</a> and <a href="https://longform.com/">Longform.org</a> being founded to capitalize on the new interest.</p>
<hr>
<p class="aligncenter"><code>.wrap.longform</code> = 72rem (720px). <br>
Why? Reading efficiency is highest at <a href="http://uxmovement.com/content/how-margins-and-line-lengths-affect-user-reading/">90-95 characters per line</a>.
</p>
<hr>
<p>Longform journalism is a branch of journalism dedicated to longer articles with larger amounts of content. Typically this will be between 1,000 and 20,000 words.</p>
<p>Storytelling is the social and cultural activity of sharing stories, often with improvisation, theatrics, or embellishment. Stories or narratives have been shared in every culture as a means of entertainment, education, cultural preservation and instilling moral values.</p>
<p>Crucial elements of stories and storytelling include plot, characters and narrative point of view. The term 'storytelling' is used in a narrow sense to refer specifically to oral storytelling and also in a looser sense to refer to techniques used in other media to unfold or disclose the narrative of a story.</p>
<p>Storytelling predates writing, with the earliest forms of storytelling usually oral combined with gestures and expressions. In addition to being part of religious rituals, some archaeologists believe rock art may have served as a form of storytelling for many ancient cultures.</p>
<h2><strong>Alignments</strong></h2>
<p>This is an image of a Nao (robot), aligned to the right. It also has a small caption.</p>
<figure class="alignright">
<img src="https://source.unsplash.com/2EJCSULRwC8/600x400" alt="Robot">
<figcaption>
<p><code>figure.alignright</code></p>
</figcaption>
</figure>
<p>For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text.</p>
<p>Nao (pronounced now) is an autonomous, programmable humanoid robot developed by Aldebaran Robotics, a French robotics company headquartered in Paris. The robot's development began with the launch of Project Nao in 2004. On 15 August 2007, Nao replaced Sony's robot dog Aibo as the robot used in the RoboCup Standard Platform League (SPL), an international robot soccer competition. The Nao was used in RoboCup 2008 and 2009, and the NaoV3R was chosen as the platform for the SPL at RoboCup 2010.</p>
<hr>
<figure class="text-pull-left">
<img src="https://source.unsplash.com/cr6RJblqjyo/600x400" alt="Skater">
<figcaption>
<p><code>.text-pull-left</code></p>
</figcaption>
</figure>
<p>This is an image of a skate, aligned to the left. It also has a small caption. For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text</p>
<p>Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.</p>
<hr>
<p>The story was then told using a combination of oral narrative, music, rock art and dance, which bring understanding and meaning of human existence through remembrance and enactment of stories. People have used the carved trunks of living trees and ephemeral media (such as sand and leaves) to record stories in pictures or with writing. Complex forms of tattooing may also represent stories, with information about genealogy, affiliation and social status.</p>
<blockquote class="text-pull-right">
<p>"The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories." &mdash; <code>.text-pull-right</code>.</p>
</blockquote>
<p>With the advent of writing and the use of stable, portable media, stories were recorded, transcribed and shared over wide regions of the world. Stories have been carved, scratched, painted, printed or inked onto wood or bamboo, ivory and other bones, pottery, clay tablets, stone, palm-leaf books, skins (parchment), bark cloth, paper, silk, canvas and other textiles, recorded on film and stored electronically in digital form. Oral stories continue to be created, improvisationally by impromptu storytellers, as well as committed to memory and passed from generation to generation, despite the increasing popularity of written and televised media in much of the world.</p>
<hr>
<h3>Center aligned</h3>
<figure class="aligncenter">
<img src="https://source.unsplash.com/BnQULvE2mEA/800x600" alt="Scene from the Women’s March on Washington, DC.">
<figcaption>
<p><code>figure.aligncenter</code></p>
</figcaption>
</figure>
<p>This is a center aligned image. It also has a small caption. The sky (or celestial dome) is everything that lies above the surface of the Earth, including the atmosphere and outer space. The intensity of the sky varies greatly over the day, and the primary cause of that intensity differs as well. </p>
<hr>
<figure class="text-pull">
<img src="https://source.unsplash.com/9bdt03k4ujw/800x400" alt="Japan">
<figcaption>
<p><code>figure.text-pull</code></p>
</figcaption>
</figure>
<p>When the sun is well above the horizon, direct scattering of sunlight (Rayleigh scattering) is the overwhelmingly dominant source of light. However, in twilight, the period of time between sunset and night and between night and sunrise, the situation is more complicated.</p>
</div>
</section>
<section>
<div class="wrap size-80">
<h3><strong>Building a platform for storytelling</strong></h3>
<p><code>.text-cols (2 columns)</code>.</p>
<div class="text-cols">
<p>The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories.</p>
<p>Human knowledge is based on stories and the human brain consists of cognitive machinery necessary to understand, remember and tell stories.</p>
<p>Humans are storytelling organisms that both individually and socially, lead storied lives. Stories mirror human thought as humans think in narrative structures and most often remember facts in story form. </p>
<p>Facts can be understood as smaller versions of a larger story, thus storytelling can supplement analytical thinking. Because storytelling requires auditory and visual senses from listeners, one can learn to organize their mental representation of a story, recognize structure of language and express his or her thoughts.</p>
<h4><strong>Stories with karma</strong></h4>
<p>For many multi-media communication complex institutions, communicating by using storytelling techniques can be a more compelling and effective route of delivering information than that of using only dry facts. Uses include:</p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<div class="wrap longform">
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
<hr />
<h3>Ordered List</h3>
<ol>
<li>Medium = Beautiful articles.</li>
<li>Typeform = Beautiful forms.</li>
<li>WebSlides = Beautiful presentations and longforms.</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h3>Mixed List</h3>
<ol>
<li>
List Item 1
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ol>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<hr />
<h3>Table Styles</h3>
<table>
<tbody>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>
<hr>
<h2>Blockquote</h2>
<p>The blockquote tag can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:</p>
<blockquote>
<p>"Women, like men, should try to do the impossible. And when they fail, their failure should be a challenge to others."</p>
<p><cite>Amelia Earhart.</cite></p>
</blockquote>
<p>Modern storytelling has a broad purview. In addition to its traditional forms (fairytales, folktales, mythology, legends, fables etc.), it has extended itself to representing history, personal narrative, political commentary and evolving cultural norms. Contemporary storytelling is also widely used to address educational objectives.</p>
<blockquote class="text-pull">
<p>"Without freedom of thought, there can be no such thing as wisdom - and no such thing as public liberty without freedom of speech." <code>.text-pull </code> </p>
<p><cite>Benjamin Franklin.</cite></p>
</blockquote>
<p>Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.</p>
<p>A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.</p>
<blockquote class="text-quote">
<p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place.</p>
<p><cite>Sheryl Sandberg.</cite></p>
</blockquote>
<p>Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. <strong>Stories are universal in that they can bridge cultural, linguistic and age-related divides</strong>. Storytelling can be adaptive for all ages, leaving out the notion of age segregation.
</p>
<p>Storytelling can be used as a method to teach ethics, values and cultural norms and differences. Learning is most effective when it takes place in social environments that provide authentic social cues about how knowledge is to be applied. Stories function as a tool to pass on knowledge in a social context. So, every story has 3 parts. First, The setup (The Hero's world before the adventure starts). Second, The Confrontation (The hero's world turned upside down). Third, The Resolution (Hero conquer's villain, but it's not enough for Hero to survive. The Hero or World must be transformed). Any story can be framed in such format.</p>
<hr>
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
<p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
<form action="/" class="bg-light user" method="post">
<input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
<button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
</form>
</div>
</section>
<section>
<!-- .wrap = container width: 90% -->
<div class="wrap aligncenter">
<h2><strong>Ready to start?</strong> </h2>
<p class="text-intro">Create your stories instantly.</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button" 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>
</article>
</main>
<!--main-->
<footer role="contentinfo">
<div class="wrap">
<div class="grid">
<div class="column">
<h3>Company</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Support</h3>
<ul>
<li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Legal</h3>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Community</h3>
<ul>
<li>
<a href="#">
<svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use>
</svg>
Facebook
</a>
</li>
<li>
<a href="#">
<svg class="fa-youtube">
<use xlink:href="#fa-youtube"></use>
</svg>
YouTube
</a>
</li>
<li>
<a href="#">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
Twitter
</a>
</li>
</ul>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
</div>
<!-- .end .wrap -->
</footer>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

947
demos/media.html Normal file
View file

@ -0,0 +1,947 @@
<!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&amp;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? &rarr;</a></p>
<pre>&lt;section&gt;
&lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
&lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;</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>&lt;section class="bg-black"&gt;
&lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
&lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;</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>&lt;section class="bg-black"&gt;
&lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
&lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;</pre>
</div>
</section>
<section>
<div class="wrap size-50">
<p class="text-subtitle">Optional &middot; 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>&lt;svg class="fa-flag"&gt;
&lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
&lt;/svg&gt;</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>&lt;figure class="browser"&gt;
&lt;img alt="Screenshot" src="image.jpg"&gt;
&lt;/figure&gt;</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>&lt;section class="fullscreen"&gt;</strong>
&lt;div class="embed"&gt;
&lt;video autoplay loop poster="image.jpg"&gt;
&lt;source src="video.mp4" type="video/mp4"&gt;
&lt;/video&gt;
&lt;/div&gt;
<strong>&lt;/section&gt;</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>&lt;section class="fullscreen bg-blue"&gt;</strong>
&lt;div class="embed <strong>dark</strong>"&gt;
&lt;video autoplay muted loop poster="image.jpg"&gt;
&lt;source src="video.mp4" type="video/mp4"&gt;
&lt;/video&gt;
&lt;/div&gt;
<strong>&lt;/section&gt;</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>&lt;div class="embed"&gt;
<strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt;</strong>
&lt;/div&gt;</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>&lt;section class="fullscreen"&gt;</strong>
&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
&lt;/iframe&gt;
&lt;/div&gt;
<strong>&lt;/section&gt;</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>&lt;div class="embed"&gt;
<strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
&lt;/div&gt;</strong>
&lt;/div&gt;</pre>
<p>autoplay + loop</p>
</div>
<!-- .end .column -->
<div class="column">
<pre>&lt;div class="embed"&gt;
<strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
&lt;/div&gt;</strong>
&lt;/div&gt;</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>&lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
&lt;/div&gt;
&lt;/div&gt;</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>&lt;section class="fullscreen"&gt;</strong>
&lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
&lt;/div&gt;
<strong>&lt;/section&gt;</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>&lt;section class="fullscreen bg-black"&gt;</strong>
&lt;div class="embed dark"&gt;
&lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
&lt;/div&gt;
<strong>&lt;/section&gt;</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>

388
demos/netflix-culture.html Normal file
View file

@ -0,0 +1,388 @@
<!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>Netflix's Culture &middot; WebSlides</title>
<meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley.">
<!-- 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&amp;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 -->
<!-- EDIT -->
<meta property="og:url" content="http://your-url.com/permalink">
<!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides: Netflix's Culture" />
<meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
<!-- EDIT -->
<meta property="og:updated_time" content="2017-04-16T16:24:56">
<!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT -->
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="429">
<!-- 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: Netflix's Culture">
<!-- EDIT -->
<meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
<!-- 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-red">
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter">
<h1>
<strong>Netflix's Culture</strong>
</h1>
<p class="text-symbols">* * * </p>
<p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg> WebSlides</a>
</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-50 bg-white">
<h2>
<svg class="fa-info-circle large">
<use xlink:href="#fa-info-circle"></use>
</svg>
<strong>A bit of context</strong>
</h2>
<hr>
<p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3><strong>We seek excellence</strong></h3>
</div>
<div class="column">
<p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
</p>
</div>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-red">
<span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter fadeInUp">
<h3><strong>Diversity & Inclusiveness</strong></h3>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>7 Aspects</strong> of our Culture</h2>
<hr>
<ol class="text-cols">
<li><strong>Values are what we Value</strong></li>
<li>High Performance</li>
<li>Freedom & Responsibility</li>
<li>Context, not Control</li>
<li>Highly Alined, Loosely Coupled</li>
<li>Pay Top of Market</li>
<li>Promotions & Development</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50 bg-white">
<h3><strong>1/7 Values are what we value</strong></h3>
<p class="text-intro">Make your values mean something.</p>
<hr>
<p>Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went <strong>bankrupt from <a href="https://www.youtube.com/watch?v=jrEf8uabe7E">fraud</a></strong> had these values displayed in their lobby: <strong>integrity, communication, respect, and excellence</strong>.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>9 Behaviors</strong></h2>
<p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
<hr>
<ol class="text-cols">
<li>Judgment</li>
<li>Communication</li>
<li>Impact</li>
<li>Curiosity</li>
<li>Innovation</li>
<li>Courage</li>
<li>Passion</li>
<li>Honesty</li>
<li>Selflessness</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2><strong>7 Aspects</strong> of our Culture</h2>
<hr>
<ol class="text-cols">
<li><strong>Values are what we Value</strong></li>
<li><strong>High Performance</strong></li>
<li>Freedom & Responsibility</li>
<li>Context, not Control</li>
<li>Highly Alined, Loosely Coupled</li>
<li>Pay Top of Market</li>
<li>Promotions & Development</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-black">
<span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
<div class="wrap">
<h3><strong>2/7 High Performance</strong></h3>
<ul class="flexblock features">
<li>
<div>
<h2>
<svg class="fa-users">
<use xlink:href="#fa-users"></use>
</svg>
We're a team
</h2>
not a family.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-trophy">
<use xlink:href="#fa-trophy"></use>
</svg>
We're a pro sports team
</h2>
not a kid's recreational team.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-star">
<use xlink:href="#fa-star"></use>
</svg>
We have stars
</h2>
in every position.
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
<div class="wrap size-60 bg-trans-dark">
<h4><strong>Why are we so manic on high performance?</strong></h4>
<p class="text-intro">In procedural work, the best are 2x better than the average.</p>
<hr>
<p class="text-intro">In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
<div class="wrap aligncenter">
<h2><strong>Content that people love</strong></h2>
</div>
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<div class="embed">
<video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
<source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
</video>
</div>
<!-- .end .embed -->
</section>
<section>
<div class="wrap size-50">
<h3><strong>3/7 Freedom & Responsibility</strong></h3>
<p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
<hr>
<p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
<ul class="flexblock border">
<li>
Expense only what you would otherwise not spend.
</li>
<li>
Travel as you would if it were your own money.
</li>
<li>
What gifts you can accept?
Disclose non-trivial vendor gifts.
</li>
<li>
Take from Netflix only when it is inefficient to not take (calls...)
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-50 bg-white">
<h4><strong>Summary of Freedom & Responsibility</strong></h4>
<hr>
<ol>
<li>As we grow, minimize rules.</li>
<li>Inhibit chaos with ever more high performance people.</li>
<li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
</ol>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="grid">
<div class="column">
<p class="text-context">
This is a homage.
</p>
<p class="text-intro"><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> wrote <strong>"Netflix Culture: Freedom & Responsibility"</strong>. Go to <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> to read the whole document.</p>
</div>
<div class="column">
<div>
<div class="embed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&amp;controls=0" allowfullscreen></iframe>
</div>
<!-- normalize flexbox -->
</div>
<!-- end .embed -->
</div>
<!-- end .column -->
</div>
<!-- end .grid -->
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<footer>
<div class="wrap">
<p>
<span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
</p>
</div>
</footer>
<!-- Required -->
<script src="../static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

1874
demos/portfolios.html Normal file
View file

File diff suppressed because it is too large Load diff

351
demos/why-webslides.html Normal file
View file

@ -0,0 +1,351 @@
<!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: Why WebSlides is so inspiring?</title>
<meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials.">
<!-- 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&amp;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="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="Why WebSlides? Good karma" />
<meta property="og:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T16:27:50"> <!-- EDIT -->
<meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT -->
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="429">
<!-- 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="Why WebSlides? Good karma"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
<meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.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" class="vertical">
<!-- 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>
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter">
<h1 class="text-landing">Good Karma</h1>
<p class="text-intro">
<strong><a href="http://webslides.tv/">WebSlides</a></strong> &mdash; HTML presentations made easy. <br>
Hypertext and beauty as narrative elements.
</p>
<nav>
<ul>
<li><a href="https://twitter.com/webslides">Twitter</a></li>
<li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
<li><a href="https://github.com/webslides/webslides">Github</a></li>
</ul>
</nav>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-black aligncenter">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
<!-- background with a frame frame -->
<span class="background frame"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap fadeInUp">
<h1>
Everyone
<svg class="fa-heart-o">
<use xlink:href="#fa-heart-o"></use>
</svg>
Stories
</h1>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<!-- alignment [class*="content-"] = container max-width:50% = 600px -->
<div class="content-center">
<h2><strong>Why WebSlides?</strong></h2>
<blockquote>
<p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made <a href="https://twitter.com/search?q=%23webslides&amp;src=typd">#WebSlides</a>."</p>
<p><cite> <img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a>.</cite></p>
</blockquote>
</div>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide. </p>
<p>Code is clean, scalable, and well documented. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<!-- .end .column -->
<div class="column">
<pre>&lt;article id="webslides"&gt;
<span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
&lt;section&gt;
&lt;h1&gt;Design for trust&lt;/h1&gt;
&lt;/section&gt;
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;
</pre>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="content-left">
<h2>WebSlides was made to inspire people.</h2>
</div>
<div class="content-left">
<p>There are excellent presentation tools out there. WebSlides is <strong>an open source solution</strong> for telling stories. Hypertext and beauty as narrative elements.</p>
</div>
<ul class="flexblock features">
<li>
<div>
<h2>
<span>&rarr;</span>
Keyboard navigation
</h2>
with arrow keys.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-link">
<use xlink:href="#fa-link"></use>
</svg>
Go to a specific slide
</h2>
URL: #slide=number
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-clock o">
<use xlink:href="#fa-clock-o"></use>
</svg>
Slide counter
</h2>
Current/Total number.
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<ul class="flexblock features">
<li>
<div>
<h2><span>100<sup>%</sup></span> customizable</h2>
Well documented.
</div>
</li>
<li>
<div>
<h2>
<span>40<sup>+</sup></span>
Beautiful Components
</h2>
Covers, cards, quotes...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-list">
<use xlink:href="#fa-list"></use>
</svg>
Flexible blocks
</h2>
with auto-fill and equal height.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-text-height">
<use xlink:href="#fa-text-height"></use>
</svg>
Vertical rhythm
</h2>
Use multiples of 8.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-language">
<use xlink:href="#fa-language"></use>
</svg>
Fade transition
</h2>
to all slides.
</div>
</li>
<li>
<div>
<h2>
<span>500<sup>+</sup></span>
SVG Icons
</h2>
Font Awesome Kit.
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3>Support</h3>
<p>Making a beautiful HTML presentation has never been so rewarding.</p>
<ul class="description">
<li><strong>Demos:</strong> <a href="../demos/landings.html">Landings</a> &middot; <a href="../demos/portfolios.html">Portfolios</a></li>
<li><strong>Docs:</strong> <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a></li>
<li><strong>Tags:</strong> <a href="https://dribbble.com/tags/webslides" title="WebSlides Screenshots">Dribbble</a> &middot; <a href="https://instagram.com/webslides" title="WebSlides Screenshots">Instagram</a></li>
</ul>
</div>
<div class="column">
<a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
</div>
<div class="column">
<h3>Extensible</h3>
<p>The best way to inspire with your content is to connect on a personal level:</p>
<ul class="description">
<li>
<strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
Animate.css</a>.
</li>
<li>
<strong>Images:</strong> <a href="http://unsplash.com" title="Unsplash">Unsplash</a>.
</li>
<li>
<strong>Videos:</strong> <a href="https://pixabay.com/en/videos" title="Pixabay"> Pixabay</a>.
</li>
</ul>
</div>
</div>
<!-- end .grid-->
</div>
<!-- end .wrap-->
</section>
<section class="bg-apple aligncenter">
<span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
<div class="wrap">
<h2>One more thing...</h2>
<p class="fadeInUp"><a href="../demos/keynote.html">Make your keynote &mdash; <code>.bg-apple</code></a></p>
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<!-- Required -->
<script src="../static/js/webslides.js"></script>
<!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
<script>
window.ws = new WebSlides({ autoslide: 5000 });
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

86
error.html Normal file
View file

@ -0,0 +1,86 @@
<!doctype html>
<html lang="en-US" 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,
@jlantunez.
-->
<!-- SEO -->
<title>Page not found (404) - WebSlides</title>
<meta name="description" content="Unfortunately, this page does not exist.">
<!-- 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&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
<!-- 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">
<!-- 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>jlantunez</em></a></li> -->
</ul>
</nav>
</header>
<main role="main">
<section class="aligncenter">
<div class="wrap">
<h1>Page not found!</h1>
<p class="text-symbols">* * *</p>
<p>Please check your URL or <a href="index.html">return to the Home Page</a>.</p>
</div>
<!-- end .wrap -->
</section>
<!-- end section -->
</main>
<!-- end main -->
<!-- svg-icons.js is optional (fontastic.me - Font Awesome as svg icons) -->
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>

407
index.html Normal file
View file

@ -0,0 +1,407 @@
<!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">
<!-- SEO -->
<title>Beer and Open Source</title>
<meta name="description" content="Presentation about Beer and Open Source">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://freibier.cc/"> -->
<!-- CSS WebSlides -->
<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">
<!-- 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="Beer and Open Source">Beer and Open source</a></p>
</nav>
</header>
<main role="main">
<article id="webslides" class="vertical">
<section>
<div class="wrap aligncenter">
<h1><strong>Beer and Open Source</strong></h1>
<p class="text-intro">
Sven Wagner
</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap aligncenter">
<h2>Who Am I?</h2>
<p class="text-intro">
Sven Wagner
</p>
</div>
<div class="wrap alignleft">
<ul>
<li>
<h3>Open Source</h3>
<ul>
<li>Linux User >20years</li>
<li>Running several web, mail, XMPP server</li>
<li>After many trials, nearly every computer runs Debian</li>
</ul>
</li>
<li>
<h3>Beer</h3>
<ul>
<li>Started apprenticeship in a small brewery in 1996</li>
<li>TU München Weihenstephan from 1998 - 2002 </li>
<li>Nearly 20 years commissioning of brewerys world wide</li>
<li>2017 Co-founder of Waschraumbrauerei</li>
<li>2020 Co-founder of freibier.cc </li>
</ul>
</li>
</ul>
</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap aligncenter">
<h2>How all began?</h2>
<p class="text-intro">
It all began with planned MiniDebConf Regensburg 2020
</p>
</div>
<div class="wrap alignleft">
<ul>
<li>Plan to make beer, company founded, but no idea at all about a concept.</li>
<li>On day, Cold Tobi asked, if we can brew a beer forr his planned MiniDebConf, we agreed.</li>
<li>On week later, Tobi mentioned, that if we brew a beer for the MiniDebConf, it has to comply with the DFSG</li>
</ul>
</p>
</div>
</section>
<section>
<div class="wrap aligncenter">
<h2>License for beer recipes</h2>
<p class="text-intro">
Why we use CC-0
</p>
</div>
<div class="wrap alignleft">
<ul>
<li>In germany recipes have no threshold of originality by law</li>
<li>Only possible way was to hide it or release it to the public domain</li>
</ul>
</p>
</div>
</section>
<section>
<div class="wrap aligncenter">
<h2>Open Knowledge and Hobby Brewer</h2>
<p class="text-intro">
Everybody shares everything
</p>
</div>
<div class="wrap alignleft">
<ul>
<li>If you ask, everybody will tell you his recipe.</li>
<li>A lot of people publish there recipes in billboards, blogs, recipe databeses.</li>
<li>Even on tournaments and championships, everybody is explainign you to the detail, how he made his beer</li>
</ul>
</p>
</div>
<div class="wrap aligncenter">
<h2>Open Knowledge and Pro-Brewer</h2>
</div>
<div class="wrap alignleft">
<ul><li>If you ask, everybody will tell you his recipe.</li></ul>
</div>
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50 aligncenter">
<h2><strong>Why WebSlides?</strong></h2>
<p class="text-intro"><a href="demos/why-webslides.html" title="Why WebSlides?">Presentations</a>, <a href="demos/landings.html" title="Landings">landings</a>, <a href="demos/portfolios.html" title="Portfolios">portfolios</a>, and <a href="demos/longforms.html" title="Longforms">longforms</a>.</p>
<div class="bg-white shadow">
<ul class="flexblock reasons">
<li>
<h2>An opportunity to engage.</h2>
<p>WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
</li>
<li>
<h2>Work better, faster.</h2>
<p>Designers, marketers, and journalists can now focus on the content. Simply <a href="demos/index.html" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
</li>
</ul>
</div>
<!-- .end .bg-white shadow -->
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide. </p>
<p>Code is clean and scalable. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. <strong>Making an HTML presentation has never been so fast</strong>.</p>
</div>
<!-- .end .column -->
<div class="column">
<pre>&lt;article id="webslides"&gt;
<span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
&lt;section&gt;
&lt;h1&gt;Design for trust&lt;/h1&gt;
&lt;/section&gt;
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;
</pre>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>Features</h2>
<ul class="flexblock features">
<li>
<div>
<h2>
<span>&rarr;</span>
Simple Navigation
</h2>
with arrow keys, presenter...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-link">
<use xlink:href="#fa-link"></use>
</svg>
Permalinks
</h2>
Go to a specific slide.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-clock-o">
<use xlink:href="#fa-clock-o"></use>
</svg>
Slide Counter
</h2>
Current/Total number.
</div>
</li>
<li>
<div>
<h2>
<span>40<sup>+</sup></span>
Beautiful Components
</h2>
Covers, cards, quotes...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-text-height">
<use xlink:href="#fa-text-height"></use>
</svg>
Vertical Rhythm
</h2>
Use multiples of 8.
</div>
</li>
<li>
<div>
<h2>
<span>500<sup>+</sup></span>
SVG Icons
</h2>
Font Awesome Kit.
</div>
</li>
</ul>
</div>
</section>
<section>
<div class="wrap">
<h2><strong>WebSlides Demos</strong></h2>
<p>Contribute on <a href="https://github.com/webslides/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all &rsaquo;</a></span></p>
<ul class="flexblock gallery">
<li>
<a href="demos/why-webslides.html" title="Why WebSlides?">
<figure>
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
<figcaption>
<h2>Why WebSlides?</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="demos/landings.html" title="Landings">
<figure>
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
<figcaption>
<h2>Landings</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="demos/portfolios.html" title="Portfolios">
<figure>
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
<figcaption>
<h2>Portfolios</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="demos/keynote.html" title="Apple Keynote">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
<figcaption>
<h2>Apple Keynote</h2>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h4>
<svg class="fa-life-ring">
<use xlink:href="#fa-life-ring"></use>
</svg>
<strong>Guides</strong>
</h4>
<p>If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:</p>
<ul class="description">
<li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
<li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
<li><a href="demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
</ul>
</div>
<div class="column">
<figure><img class="aligncenter" src="static/images/setup.png" alt="WebSlides Files"></figure>
</div>
<div class="column">
<h4>
<svg class="fa-cubes">
<use xlink:href="#fa-cubes"></use>
</svg>
<strong>Built to expand</strong>
</h4>
<p>The best way to <strong>inspire with your content</strong> is to connect on a personal level:</p>
<ul class="description">
<li>Background images: <a href="http://unsplash.com">Unsplash</a>.</li>
<li>CSS animations: <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</li>
<li>Longforms: <a href="http://michalsnik.github.io/aos/"> Animate on scroll</a>.</li>
</ul>
</div>
</div>
<!--end .grid -->
</div>
</section>
<section class="aligncenter">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Ready to Start?</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button" 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="slide-bottom">
<div class="wrap">
<div class="content-right text-serif">
<h2>
<strong>Thanks.</strong>
<a target="_blank" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=Finally,%20everything%20you%20need%20to%20make%20HTML%20presentations%20in%20a%20fast/beautiful%20way.%20@WebSlides%20=%20Good%20karma%20&mdash;%20https://webslides.tv">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
</a>
</h2>
<p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p>
<p>Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>, <a href="https://twitter.com/belelros">@belelros</a>, and <a href="https://twitter.com/luissacristan">@luissacristan</a>.</p>
</div>
<!-- .end .content-right -->
</div>
<!-- .end .wrap -->
</section>
</article>
<!-- end article -->
</main>
<!-- end main -->
<!-- A global footer
<footer role="contentinfo">
<div class="wrap">
<p>An <a href="https://github.com/webslides/webslides">open source solution</a>, by <a href="https://twitter.com/webslides">@webslides</a>.</p>
</div>
</footer> -->
<!-- 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>

2350
static/css/svg-icons.css Normal file
View file

File diff suppressed because it is too large Load diff

3791
static/css/webslides.css Normal file
View file

File diff suppressed because it is too large Load diff

BIN
static/images/android.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
static/images/avatar.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
static/images/bt-appstore.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/bt-playstore.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/images/davinci.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
static/images/favicons/favicon-120.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 425 B

BIN
static/images/favicons/favicon-152.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 527 B

BIN
static/images/favicons/favicon-180.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 618 B

BIN
static/images/favicons/favicon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 656 B

BIN
static/images/favicons/favicon-32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 B

BIN
static/images/favicons/favicon-76.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 335 B

BIN
static/images/favicons/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 153 B

BIN
static/images/iphone-hand.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
static/images/iphone.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

89
static/images/logos/airbnb.svg Normal file
View file

@ -0,0 +1,89 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="156px" height="48px" viewBox="0 0 156 48" enable-background="new 0 0 156 48" xml:space="preserve"> <image id="image0" width="156" height="48" x="0" y="0"
xlink:href="data:image/png;base64,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" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

68
static/images/logos/apple.svg Normal file
View file

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="240px" height="240px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve"> <image id="image0" width="240" height="240" x="0" y="0"
xlink:href="data:image/png;base64,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" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

46
static/images/logos/facebook.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="245px" height="48px" viewBox="0 0 245 48" enable-background="new 0 0 245 48" xml:space="preserve"> <image id="image0" width="245" height="48" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPUAAAAwCAMAAAD+SsxQAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEUAAABIaKtIaKtIaKtI
aKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtI
aKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtIaKtI
aKtIaKtIaKv///+RH1H9AAAALHRSTlMAFWGSu9Xq2sinVgkfOU1phJ215SwlP26i4A+M7jLzsfis
eMHPGX6Y6EZbchNowKkAAAABYktHRC3N2kE9AAAAB3RJTUUH4AoIAxIe1SlyhQAAB3VJREFUaN7l
muu2ojoMgLmJIIIIgoKoKOCV93++Q7kkaSl65qxx1py182sLoenXpmmabkUhomq6MTNNc27ZC+V7
4ixdb+Wvg1m4+aKRKF5s/Z2R2O/1Ut2sQYIvUu+zwcrhazai5NjbMN7qeUlNZPdF6tNgJP/eXLtA
cnqntqjrP0W9+wPUh39Fvcx/IvW5/oHUGwG6tv+9gf8v9eVHUhsEuLh4rvfFnfTvoS5BKde+yPt3
UTszUNp+HfrvoYa5PlY/hzqdDzrm8udQbzKgjn4k9Q+a6yWctkxVfKe6cex+GIsqYkqbcUxwlhET
5y119M6Aw5qOD6oyKctWQWjgA7VtBMHZgCw8N85BEJyKa29TO4fscWZc0ubXfrdmstvF2EDq3Yyw
Pdbld+Pmke4d/HNp5sdjfizPF7JykLo5aaq+xYxn1u0hAVrZZde15OS7kt6ri53V+alZ3DwyuBLq
SHt2omlKLZdO18N9vE6eigODA/ubekn4D0M/7d48Le55bsNhGqjrpbK6k/TI45Fc+8g1UTzFQdmH
nMLslU5Tp9jRs3KvpbJnilf+2UqBbX1IZbzZ+NPWD6rz6PlxK1JnqpAJ+9S19XHTARdrtXCkUMaT
1Nhcpk5RXxq9/eghTF9PvZV8mTAf3ySyRn2B2jREjT0uHEvWQkbcXJcpNFMjp8YyQ924zAR182ZV
T4s2CV2v2UxPtLoVPHxKo4Eu5e+zw3voAVukJtknK45N9M9Vlsd6WjRh+IiwOmMw8dkx+kSd97F4
PaWQ9CFLm2ziIKP2+T7cpz6dtAvUM9kbM+WrUbPbrcBfu0/UvY+7nxRUc1LBklCT+kHrCxOfqikp
KeXGTT9xJSZG7dEHxU6/ncueC5dk8mRTc8D6YCVS3886HZY+YaDOUqz1E2HsvIEG2nKn2zSOLMbU
2KN2TNr9OjhBNDRPzc/AsJUnabUNjC4NPYya/D51QcZxNaMxGcHzcIi5Af2QUq9bhgdxG9ZnbKGe
t9t4RL658H6Wa2xgVTIMwYiahCiaDq6pTiu488yHzZ9galx9USiybalaH1IH5RtPrY83U53rZTLk
ezY3WwhVD8nNC54clwJ1hSGK7o3YEaj+YwyFaxCyOBocdIaQTziVG5jHRG041BkcdQJfYnCyOEQw
7kAAYi6OA6uDCVwVT4EaFlg947oKZoabgg0MTwL5DnErje7mPg+NblIqoy7NU0p9g/fLjNqDhU4G
FHcqjxrH65MF7RClJgEo5jo6osYmCokWo8YfYgINfZ4tFl3mu1gMrhNWlPqFH0G8aZJzPO6T6xr0
rQsxTk5LCBrQHzcHU7i18p76SZsYuS6jBjbxvIh9lkgeUWpyh3giD6NMYvxBPQSM4xpRlkA346jR
ScSlOKLWqI2xk2lkcjL1d1Cj6zzJbk0mBx/aSgprjVCrYLeJv0hNEhLhdDOmxmPBFbUwwfk91NRL
cM/YKjH87aMCPrSVCvZvsgQqsMvNNYqufKJeyQzLqc3/PtfkJhepX2RaiXE61yo4s4UK6idqYVW/
Xddkrv+Uh9NpBfHIQzzdEA+vYM/nPJykdR89HKnJuuaiGeYs7i9Qs9xoJ+sGjWZITco/tEcqABJq
yITYjonU+i9Es4fMMLdzYd8vwhBCgM2urwsv14s68SXuXC5JFsiyXdGv0AQ6Gi6ByZ1L/0AdgWPM
UYvLUnCRlwI1TFumSAWpEQqzlFAl3kJmh/MQHH8MDVwoolkKOVLwbjmiJhkpVKvI8U/jjpPC1RiX
Rb2lxl5gimlRb8GmKxgWdj2DQ44hisuhuYwUFyM/QWNq7NpwMUDLG01nVEzpj5idVaqYU1NxROqk
LyKgT7fnZzxA3YfNDbNsg1uAEBHxG1M8fZACyfU9NXGLRGOp+IMWstgU0Hqg3nYujf3wwp3GzqRM
vVkFtkjdHSQdWvdjD8g5J2yN4wm9KzI55Dy9ZzYijLT1WRFPmph9cInkmFqlBaSkMPg6lsaPd9Na
aRhW0hshXcxuTy+OveflPG/GIldF6mZzNQpaEujOtadp4138osXVzDIs2lt3RE28v3hLPa6QitRK
IXvDVl08+d1iTC1IdyA5TCt01UAnmVSwlTH1Qfx+ilr9WC3c5LJXT9qcKPtP1GEqrlJBhrl6TCmY
lYSazGFWvaOmK3sQwOxC60JmlRVW0rCWS/mJ+jHqES9z2J+nCtexIqNW6M3HO2qyPfSyEm8BnpLZ
bvsVSeundbe94ukjG1lA69IabUmioxQ76zfLETXxDdhPIXrQxS7+Z9J2fOPjStZ2O13qrZZJFlPq
zOW18hW1vho7zC6lCvH4esQakpbxjQ96GKQ+0rluBohAJQvFgR9YBFkU3Hxngdb7YLwWA87R2rZr
CpOGStkStEAoT6hXPqM/8fWfRjR+Zylx1DCjGnIGEqeGWkUUu63E4j167BuJaYbWesVucrVXL1Rt
s10XiXk3zbmha/Qa2Ym3elCG5v1u3stA14Yy8WNo5VWx/85el2ZjwZDd1DoP/2Q1DZiJtbtI/8HY
vdrFvPk+Kc9XWslSwQb4cwyPXv8AhQGklqRWlo8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMTAt
MDhUMDM6MTg6MzAtMDc6MDC0bo77AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTEwLTA4VDAzOjE4
OjMwLTA3OjAwxTM2RwAAAABJRU5ErkJggg==" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

102
static/images/logos/google.svg Normal file
View file

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="142px" height="48px" viewBox="0 0 142 48" enable-background="new 0 0 142 48" xml:space="preserve"> <image id="image0" width="142" height="48" x="0" y="0"
xlink:href="data:image/png;base64,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
QmCC" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.8 KiB

82
static/images/logos/instagram.svg Normal file
View file

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="169px" height="48px" viewBox="0 0 169 48" enable-background="new 0 0 169 48" xml:space="preserve"> <image id="image0" width="169" height="48" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKkAAAAwCAQAAADAtZIvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN
RQfgCggDEyLjXT9DAAAQUElEQVRo3t2bfbxVZZXHv+vZ+9zLBVQkg9EA8bwB0jDoNUZUDAzCoAln
MMvCF1DTsbBJe9VKa9LI0V5gZDCtbHR0zLCxEZUkJWsSmaxkFLnnvoyASiDiVbj3cu7Z+1n9sZ+9
zz7nivWhSxdbf9x7zrOfvdZ6fms9a61n7X2EGsqN96/S06noL/X6tvX0M2WbvEckrz+Th+w9ba/2
N/eDhST9pbhYl6YGZpXW9K+wQjO/ikR6K589c6CXfqDIpBb8HZYatIvADUzob2G9vnE2DIYO9MIP
HCWQFr4ji8DeJ/O1DCB0h/0tLNMU/fdgz0Av/MCRg7R4DYuAra1nhJulCUAZ7PW7sEYLQAg9A73w
A0cGoDhbrhYUeyXIX0VjivQ7pLYcR2p5ZaAXfuDIB7DXegg82npH9YIQaP+IyA8376NX9tgXZHo8
ph7kD7N7Ovo9uAw8+VA8X5oV0JvrLsl+cexD9mrvMkVrigv5SPEserzeYtn2eE+HH/9LKql8kI9Z
BLaGqwCMn0DRTxvfn/m6co8ABQy2WZfwFwSpKUzTZgF4vONAZeHnNGAnndKdlGc1JHe1bxpoGPqT
fKYJihD8ct+TskPpqY962QyN+zJCdox/CmX7aNsugOBMOQTEp0u+LouiGbo8/Jr3Vg3BWLu5ep83
VTz7q7bSGysdzQt//fqmyGUbrg9P0p/qxyP5+6LiKD1ZPPtU2zP7kJLBpledHUq5o1Izo4nevtnA
Z4oCit/mRpLtbtzk/ALv5vDZwr26oqpi8cLgCv+wwnr+ufXJPqou4Qp8wWzIntyxBzp64pKp2JlM
erpjC1tqzZa5QS8GMBR/UPpAbry5Sl5hVWl1vXn963SxAB4TVpbP4a3e1dIlqys/iZabH85aOxpk
gezgijcA9EY+ahoVw9tX7/0AnvctfaVrTeODMWjZJu9HeuyE9cE9rXcDFBfLEn2ueE9wQ+xIxQv5
F9teuNfe2r6jFtKR0YfwpXqhcSw1eR3sNWszOS6IRsb+W+YSwSLzZF7hs61fS99VuIlLBUVhkn8y
NYDooKSIqtTKyma8B8y02OByVhHtlQUgi8eueO4fU/O8QQ9WTom4CHa+N5R2s8jiLdY7OAfAfFhG
21QqzI2QYxlVad38RA2gq5gTxXKozJa7w2e8BTBksa7EHZTlSE4xQ8LRMr/wYuvPc1lZooM51rta
Z2dP7ahAbgRfZZjXTDNXFt7T+vMqb0PFKdjHga2LfLobFEXcIbJw5ZBLel0GV8ySo1PpJz9dLo1V
pRy21nI01YTXXXvFv0mmOXEBZYWz5EMAlszkmolfD0+J4dLAYmabSxUhxJuQzQBUpiSNi/Hjv1J4
3Gsxj5rbG9cVF9d46JzIKAJli5mduTw6hMiUrNPR643Nbg4H76M6OFKu4cTyGQBmYZRgFRnC9TWr
lN8qIPQe7qyTZPykiPIj8boHoNDMtRUENtIJoDQUquyCD3gOUIX72jvYF5VrfGYmF0Uy2CinhmP0
k+IOIUK6FihMy1zmzLWNhXYkH9Sd1l2TndGWbdwcjzAnvMqcyDDH55IYrHFT+SenxNN7Z9mj5DIt
xyWevhDHxsBIQ/Qp/B3IvEiuENA0HIC51Z0ggyNzOkhZFU1u+Jv6VdeX+s6Pv2AAXRO8R2NYUkkg
Mzl0ykmg19dzVHf8Fbq6asY/GZVTutP+fcvj7Ttab5Rr66RGyl4Qw2U/VLqtbVfr3Xyqfl5lqWxI
xgLbRRDtJoIkkVyMAYVOM3fzmrZdpWX65QSeJCCJb9W50mv5yZpL9gYA+clMUxQihV5Opy1TWi13
eVhkLvsiZ12xcPRM5imUZaEJxEVhkzqvm5b4k13YN3FVyU+VU8VJMt35yDfiXF+5I4ZCE+7ZMfZM
N++OtrVOyo9kq1uqW1T7Dr0OlIbVjLZHa1F/5bT/jZM2ivc7ht/tcAnS3qo7HWSp3RPtV0UONR8E
dvKAW2MDyByBgNXaA0JYE8YMBB8pbzLIjOL8umXXnZ60FxoWGECvLj0vuWQ8pYZd5lzbymb6kHqx
pRvSqp9GIwhq9YF4rH1TBEVahd73+kOiu83yeKztVd3oJCZGqkwXDK8sLz3f9qIGHBM5ko3T06kM
jhaudybSduizTpfeep2l2+zVk4CbQheNxQP9B0HX6hIzBMDU1NsGOvbIO/k+yOeAVBHVh3YBZyra
Ed4EMjgBKmWj1iflroivPFa8pp5Bkp5sWgk9NgKKp9t+m5q8XesW6b/DLWlr2JKa91IUTeKNn23K
vBt0Y+PDAN4kRjrPdnumd5oBBNuhbVUmsskCmvh6Nafoy3KaTAF7j3mbU76cH+5NMLCGFwEsUpMZ
TGSllvPtCXw5m4JTUadkHKa1Nz9dhgjy1Y49QNJETntpvijzki9XFx7KD08Ls3E0szblDb5rdWtN
fWA6qYM0k4v8TTemS3jT5bzU8c7MIqtwT0cPQDgxApBtOAClGFs/3VcIdjvDpMGJ0DhEL6dRnmx7
Jtpjgu72pjI4xN7nFaLUTk21lLSgW59s+XH6JFDfMxFsV3iBR/D/wX8C0Jiw2FudFX6BwbqSD0dh
W2bLxnFTq1crpm8nJjs0GBHxD2tChcZQOu7ZJnmL0+sF3oDMucBO+23HZQyAwqbYDJkjwmikpg6X
0KBIVWqVDmW0YO8C2R0l0V4JR/n0Pt2+SQfFd78upH+I1JoZmXdZ+KE7PcQbP7AJpPnpgxZYZEXp
zqjsBhmpjxWmxdcbjo/FaaKEDMZ5clBzfBT3BCD2bNNkD4k2p7ctPc9m0t8KzeE8Q/i9thcdgCNc
jfC72DAa767X0vd5XlDnRGocNtHf9aB7BbA0jJcpFu9BEreyNXf2gXSPY+0lD0pcb8rI33GkWvm+
m9gEkdNrEhfDL4DcUloDpTvjACA+92THABw9UyY54aFJtNBBUVS2NO5N62EPqTuCDDJuJNxdo/Bh
aSNVPia+dnpLE+7DXQm1062lQZwJwhppMsQBWjW1F2Oj6MbWn4PdLd2geLPNOwO8J2KZWgdiXy9t
jHkPioteqc7VR+ImQ3SaUKqAFs9vOC3stNdE31p+zGXRDH8kHwcYtCA5V1WjKuYQbXDGqSVXomnf
dFkzomMlWUh+cuP5oEtKzyeXna/H9WZVrl/j3Tq6nreGKed7CsDsCV8G0GbNSTl8Brp7BDDYpjSv
PpAOsfGy47aJSS+h+hjaBWvxo9yYHcp1BvlSvOWgtEzXRcbxZ8K4qZxXhb/Kc+8749wqh1TF5EbI
0e6ji1ca0ONy95CaeaMiwxGCfB7KT4dfT0FVHxuTFk7MFyDrkY+aR9WHQ15D9WCiTwHYV011f2zW
Vhj6UoSVTXi97fTi/DeKpXXdTUXI/Kx+LDkIfDFzZLCu5Zvpq3Knu6+SGxH8h27Qy9yFRj0sntP0
voTX2Oqdfo4jXRHlYl/7DnVHTRlTnecdZ0ZGSaNrfX6KP99QuSp9kpFdAgg4c3WE/o4IPC9Vi5hm
8s5cSWlIoQpNdJzoCCu/k3jVbR0hhC8TgGIOjWcOvolvvAGkcdsEt0UMlU0b1yWXy86bfQbD0TP9
T0H3l+pYlCIrg/m2f4xeJ/+ddKJysVUbZsf7y7w9Zaqzk08J+OK8lHxKwoz47sY5LLfYm1/4cVqB
0IUATcwQuKI+/OtsUgb2zvLijkICtJ6TgsY17/znrEMiiEqynXYbCDo24pU/ymTtjj6QatI2qW/A
gZdqU4ur6gQZl21qvMnQteKFh7KZ8V8pXpjwanZWbTbzdGPr3UGndjpYjgfIDh36r5WdlduiMdtc
aHaYHcXZQtQal2OyTQC58d4MJ/HE/MR4np7v7sWf29isG8PP1Gq89xfunubcCDeUjypVKXrHRQPZ
oU0LQ7cWOypqgOQnmlmxsRQ/brWXjBvxtgC07ZIWUMxocwKATDPYn/WBNI4mgm53Qwm05bWpiVsT
j1vhb6FY2WouB/9Ge5XcUrg9NwLyRflE0pXCLoSOPfzSjSzKF8H7ETn9hvcZuqNREx/5lsoRdl3v
IwaFYtTe8y63SXLzXLNElstIISq3laDbnlX/WHDQOt0mgBzB2QDj5jLDyYKrojmZG8ixQVcD+MeU
3wVgvsjgWJrQ66qD3rWJGzk53hOuLjkHQM6F8jqfenL5VwPiRJOUGw3/V50WtnplaVQUGQZ0N5y1
sefYE8PFFsEskNMLz8oEjkjMszB6aU2W2zkCyBD5nyIcYbfrivZdY/+94RIQ7HkFj/vlYmYY9P29
xw86LQR0RfEKOyNzUXCzt9NGMJxXgAflYpkRbg1+2rAAHzLsvmRLn0ce7TsK35IlgmKuLXbRzS26
nYfNAiVEZhd+KPfquTpbMVfKLp2tCE1fGfcq59mzeICxHBt5kroadvMTuVUNcwOEuBbv/bb/URmm
mEXFl2SYzgm3Nt7fp3YpLmYpCLohOCEK9MULuQUEu91OSj8SKPyXmRf1GS3mvS2roDhTH442bOSb
jnknF5ZWJnd9xyyKEoRBA95bWg3ZJn+dTkr1H9GLSrfmDzOPMSkZtGGhvaP4VHVEAD09/I2/XQG9
r/UMXpeiDj4IFkPPuVtuLz4iM2LfBkW+VLoGcvc3zA0wgEW2htPNbWaaAgThuLjzmx9uPm1nyrP2
ihiJ4mJvaerwdFlpWd/09BaH/6/jzGnvjdKMPl/7jMV8jW5QaNfjWlYBlNZkpvKolqPlCkCn3Gwn
VgGF1gt0meuOdkaAQkePncHKZKM9aU8t3Qptr4azNH4AsVVOae+A4GQv4aUbw7eXVnvfdJVBTesi
TcEZLPMi6AK9aMvtEMy134+MDpR6Z5WuAdAP2juiPj1d+uH2jjgpsU06Y15tu0qfbTuh9ZwqEqVl
4UXqur/m2tKy16mwx91uF4CPPanl8XgsN0LezRDzeGlD7dxc1jtNdlQe7qh5w6k4iol2rAzjNemw
//t6TynzE8076LUP1V7LT+Q440tLZX2615CfYibJtvAX1SgZzSs/u/mJqgcCD5T23fEll5WTjLVr
q1Vzbrx3PA19pE02k+kN10SQjZuqEwnCdX/ooXhuhJmhw2J86iDNev6vmeTRc9tzCznIKTs0s1ab
42+6uvX0gdYoorqNH54gk8A+6V+xf+z+fJQ/yntKmxUeIOrr9/tLcftLdZA2TFf4QWXaG79UMPCU
G+89ZrLgXWvPiU5G/f+e4f5SXRGl95vHqjH0YKXsGPmJjhZ05abPZ8dUj4MHB9VBuq+XWQ4myo3w
H7GjFf8XlbNTD2wOmpeA/+gW9EFE37U5g2wrz++ogBzqXjE+aEKV/6ez+PNScTFzQdFPRIWOOVyj
t0Ze+FM59xe9ybw028THQND7ope/YO8IQ9RuG2jdYnqTQeqfKkVQzHfjkYbx0X+7YX959je9ySDt
jvqsWyuPxCMSFful/v8t4f7SmwzSQa+BIjvidzyzY+RvFQ/uGmjNqvQmg5T1GhiYkHcvOPiXyjAh
3BYu/9PY9icdNGeOP452vXzYsMxUzTD5LRsObxr+Ofm0oOWuszc/NdCaVamffojz56TiUhbHvXwL
23l/+h3kgac3IaSQn2IW6DtkOG08FHzvgP0SZj/p96SWXo2LPHg5AAAAJXRFWHRkYXRlOmNyZWF0
ZQAyMDE2LTEwLTA4VDAzOjE5OjM0LTA3OjAwr+PB1gAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0x
MC0wOFQwMzoxOTozNC0wNzowMN6+eWoAAAAASUVORK5CYII=" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

31
static/images/logos/logo.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="76px" height="76px" viewBox="0 0 76 76" enable-background="new 0 0 76 76" xml:space="preserve"> <image id="image0" width="76" height="76" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAQAAABtnpmgAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN
RQfgCQYALDN0CoY3AAAEu0lEQVRo3u2a228UVRzHP7PdLgtt7cWKmkoLmmqjEbwbg6LxiQcvMW2A
RNk3Ly8k+qDxxRf5B9QHjVEEjZFQbLGtRlNIExVpYoiQGKWg1gIFt62wxV720t0eH/acs7O7s+3M
lN1ZzX77MGfme878vvv7nfM7l6mBFd5hO5fwUWwIqqjhBb7Kp/yWDW5iLWuLLkuhzuqhtVcWSyaq
IKw9FmeeOEYJ7Bv4re1YG2+hnmiJhAUYZ6YElv73UOFqYzMzCE+1CNYQZZCE+eHziLL4m+X6tCCV
LmY99VUGEeUvJWyN14okGlQCU3nsIseZZ7EkKaIQBKuZYiF9kxESUI88RBWClNci/qsweJ0mYp72
rVwIglw2mCubEWnGvI9zXmuwxDlfWQUxA0PlsRjvM02dp7OlwT808yLV6dsRBIIpdesxmphFIBhR
U5KfdV5rAqBVOaj4OyFnEKozlZswjYqwirCKsHKD30ad9bQyScI0q9bTxGnOA3dzDVPETbWraaSK
48T0kwbuYYZpUhgIDBqYY2R5s+kpKcLNBWuEuIggwgQTTBAmzjQjbAPgXf4kxRXCkptBMM7hrLOi
jZzgbwQTTHAJQZI3C9raRCw9JdkRFqCDV0x7v2Hu50YCANSygZCJ+4sQHTRmta/iWu5ij6zxNluo
vzrC0nhDG381j9ulud0F29cRQbBvGSsuhFXJmsLi/M/gtOS+K9i+nQRiWStamP1RmeJDWXqc23M4
wV5ZeoQHCrS/g2qGGLVrzkm6OChHWpAdedznehRuK9D6aeBjB9ZshxKgRwbsLME8rltyUzRYtGwm
SoTaZS24CCXAIXltZUset1ee3DbzhEXLrQTpd3Z048RjdYSlX7rzuBuILjEAfkDwsA0LLkZlGh9I
41Fac5iXWNRJY2MO14bgrK39mMtQQo+8BunMYUImw8/mcDuAPU53YM48FuBn6ZWTWSN6M4Jf+UZy
41m5vZrfEdxq6/2uPZbgC/0Kc5/pAt5jl7xr4UkT9yC3cIwzDi059BjcRkr6JZOVaplEsAk4Jbnv
TS32Idhp8+2uOz/AsDQ+rSfrTgS/4Qd2Sy5Fh+TqmGWBJqfC3CwU98trvR4AO4EDJIFP5Qzg0z56
ihr6uOzcjHOPtXJF+mUIgBbiCO6UbL/kRqkB4DCCLtvvXlEoYb80vsh9pBc9RzXXpbPZdqAdwZT1
h7+lhblb86tgGnQCz4FeXcAAY7IUAp4Bet18xHInbIgLsvQo7dxLgi81F+egLD3EdTxGJik7hJtQ
wlsyXDHGEHySxXWQlOzXxBh3dMC1wlBm1hmraAPtI/VTh2VpK6voc/f9wK2wb/lJl8cYzGHNC0KX
gXS/4e0xleI5XL/OW2eW2AUUSVgfSVnqzeMm6ZOlQV2rZMJ+4QgARzlmwX4kr92233fVhMEAkBkG
2fiR88CoqSeWUFgvC8ABSy7BZ8Ah5rwQFuYCYZ1qczEAWYsfh7Bz2lMYLy/xw07wmmXvsw13mb9Y
WHHmLzoqwirCKsLKDUqYUSafoLUOJWyBiNeaAJhW/6mipiQf61lN0ONv4lHW5Qpr4ghJAh4LixNQ
x6F+LaXR9QuLAeErM0EKjX5OkWCuTMZkGoIa/vgXLhwasR/cckgAAAAldEVYdGRhdGU6Y3JlYXRl
ADIwMTYtMDktMDZUMDA6NDQ6NTEtMDc6MDCZcfz6AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTA5
LTA2VDAwOjQ0OjUxLTA3OjAw6CxERgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJ
ZTwAAAAASUVORK5CYII=" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

52
static/images/logos/microsoft.svg Normal file
View file

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="224px" height="48px" viewBox="0 0 224 48" enable-background="new 0 0 224 48" xml:space="preserve"> <image id="image0" width="224" height="48" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAAwCAMAAAA/zYb8AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB8lBMVEUAAADyUCLyUCLzUCLs
ViB4wQCAugGAugGAugF8ugHyUCLsViB4wQCAugHyUCLsViB4wQCAugF6enp3d3d3d3d3d3d3d3d3
d3d3d3d3d3d5eXl2dnZ3d3d3d3d3d3d3d3d3d3d2dnZ3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3
d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3
d3eJh2l3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d6enp3d3d3d3d2dnZ4eHh3d3d3d3d3
d3d3d3d3d3d6enp4wQB3d3eDg4OTk5O6urq3t7eYmJiEhISWlpaXl5eOjo7/Sxb/Shb/Sxb4URRw
wQB5ugF5ugF3d3e8vLyEhIR0dHSMjIzmVC2HugGRkZGTk5N9fX2AgIAOoOX3uQLAwMAAqfsAqfwA
qfsNqu3/ugD/uQL/uQL/uQL/uQJ9fX23t7d5eXkCpO8QpeH/ugD/uQKCgoICpO//ugCZmZmJiYmG
hoaoqKhubm59fX0CpO8CpO8CpO8BpPYQpeH/ugD/uQL/uQL/uQLyUCL4SiSAugF3d3d2dnZzc3N1
dXVxcXFubm54eHj/SxZsbGwAo/wCpO//uQL///+m9xGSAAAAlnRSTlMAb93LLIHey9A7kT2sSYw3
okYjYmlobz4OGAYmqfbuLUZrX2o0XWTX5cBCu88cVeoWObZKr5mdw/uzyqdR4wKyuHOUTKShx1mI
CpF4fYRPMIzx3fur1MBdMiBm1C8dL37m8TKS9ecSB6f2TAcHrRTPdAcHPn7m8TKS/ObsO9UN6ZE3
rEbhjKKXZYUn6PFv5MvRLIHey9DELPzNAAAAAWJLR0SlLrlKLwAAAAd0SU1FB+AKCAMTO4c2l4MA
AAcFSURBVGje7Zn3fxs1FMBFy2iBMuwMj9i5xHFiOx6x48R27Hhl2E6cZpF0UspyBzQto6ySsAoU
KFBGgfOkhT8UPY27c+5c6CcXt+GT95NOupP01Xt670mHHjlwUC0HDj6KHnv8CbUcOnQY7TF58jct
+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" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

42
static/images/logos/netflix.svg Normal file
View file

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="177px" height="48px" viewBox="0 0 177 48" enable-background="new 0 0 177 48" xml:space="preserve"> <image id="image0" width="177" height="48" x="0" y="0"
xlink:href="data:image/png;base64,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
AElFTkSuQmCC" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

88
static/images/logos/nyt.svg Normal file
View file

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="338px" height="48px" viewBox="0 0 338 48" enable-background="new 0 0 338 48" xml:space="preserve"> <image id="image0" width="338" height="48" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVIAAAAwCAMAAAB0QAI4AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABMlBMVEUAAAAxMzQyMzUyMzYy
MzUxMzQxMzQyMjQwMzQwMDEyMzUyMzUxMTQwMjMxMjQzNDYwMjMvMTQxMjQxMzQyMzUzMzUxMTMx
MjQwMDIyMzUyMzUxMjUxNDUzNDYzNDYxMzUwMjQxMzQwMzUyNDUzNDYyMzUzNDYzNDYxMzUxMzQz
NDYyMzU0NDYzNDYyMzUwMTMxMzMyMzUzNDYyNDU0NDcyMzUyNDYyMjUyMzUzNDYyMzUxMjUyNDUy
NDYyMzUxMzQyMzUwMzMyMTU0MzcyMzYxMzQzMzYyNDYyMzYzNDYwMjMyMzYyMzYxMjQkKSsxMzQx
MjQyMzQyMjUxMTUyLTMzNDY5NDk7Pj0rMS8nKDBOIVAzNDY3ODozNTY1Njc0NDc0NDYzNDc4Mzsz
Njg1NDf///81BZtlAAAAW3RSTlMAH3Ksa0eVoCsRZGghAl7zJgo4gJmFTAYEso0VnfzYbhg2MWDp
eve1iknape76vA5DkdK41sbJUMHkfVPw3nZZqT4b52I8KLDO6y5c3DRsI4dWvkHS4auormNqSalF
MwAAAAFiS0dEZbXdiJ8AAAAHdElNRQfgCggDFC6lquWvAAAP4UlEQVRo3u2b+V8iuRLAAyLncIkc
ggpeeKEgKCB4Kyioq8g6O/tik+6B//9veKlK+kDRQce3+/azkx+g6SOdfFNVqaoEQl4Wm33CQf4t
ZdLpcv8v6vV4nU7fF+OnP0CDob+7rz9Xwp5XL01FpqOxuP4r4Zl5Sn7661Ozc4pCKZ2fTWfkKZ9C
F+RhYGrMWuzTyUXLb08Yzy79L8G9WjLLK69cic3THqM0u7q2rp/aoJuf/HpbTqWysK1tbx7OJSnb
FleTWmGsWmI9RaN0xzxRLMGnc/dDbfJE9spOGx5OwdBUqp73PF7ZUn2jr0S+633t9/edKC2ZIOvH
PhfpJjUL69G5aq3u4nSyGbg4QQ1xfbPYDkDOqWbo0DRjh0fHJ8r2R5p0Oser0miaH/q9HkDEynA+
7B/r8R3ektFIz7KK2Vmlx85nvRfz/F0gCvHwZxENMfq8aH345EJS2GJjIq0O5NjL8d6UtTLnB5pU
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
YII=" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

143
static/images/logos/thetimes.svg Normal file
View file

@ -0,0 +1,143 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="406px" height="48px" viewBox="0 0 406 48" enable-background="new 0 0 406 48" xml:space="preserve"> <image id="image0" width="406" height="48" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZYAAAAwCAMAAAAFFKzjAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACXlBMVEUAAAAiGhokHh8kHh4j
Hh8jHyAiICEeGBgXEhEbFhYjHyAkHR4kHR0jHx8iHyAkHR4oGRolHBwjHx8jHh8eGBgYFBMkGxwj
Hh8iHyAjHh8jHx8iHyAkHR0gIiIlHR4dGBgjHh4kHR0hISEjHh8iHyAmGxwiHyAkHR4jHh8kHR4i
HyAoGRolHR0jHh8kHR4iHyAkHR0jHh4oGhomHBwqFxgkHR4jHh8iHyAjHh8lHB0kHR4jHx8lHR0j
HyAjHh8jHh4eFxciHyAjHh8nGxskHR0kHR4jHh8jHyAkHh4fIyQjHyAkHh4iHyAjHh8iHyAjHyAm
GxwjHh8jHyAjHyAiICEkHR0jHx8jHyAjHh8pFxgoGRoMCwofGhojHyAjHh8jHx8lHB0jHyAiICAk
Hh4ICQcJCQgHBwUGBgUHBwYHBwYEBQQJCQcKCggLCwkDAwIEAwIDAwICAgIDAwICAgECAgICAgID
AwIDAwIGBgUGBgUCAQEDAwIFBQUFBgQBAQECAgEFBQQBAQECAgIEBAMMCwkmGxsjHx8iHyAlHB0h
ISImGxwFBgQKCggICAgLCgkJCQcICAcGBgUBAQEFBQQJCQcCAQEBAQEMDQkDAwIICAcBAQEDAwMB
AQEAAAAiHyAfGRkhICEDAwIDAwIBAQEICAcICAcHBwYHBwYFBQQKCggKCgckHh4CAgIJCQgDAwIH
CAYFBQMKCgkGBQQICAYEBAQGBgUiHyAlHB0BAgEkHR4hICEmGxwEBAQkHh8BAgAhICIfIyQjHh8i
HyAhICIiHyEAAAABAQECAgIgIiP///8S8rsOAAAAwXRSTlMAGrSut7qgFAwJnGg0kphFkx5yYxEE
J0qUsn+lPqyWFzZNsXWEjox54XzIcJ+9p4owPGNUSlHVv9okzofE2F4qBv1uoy3BT+yrzKJCqdL2
3Xboy4/EgXDvW1u3Gw/NZlY58/lrPGOEjol7a1xBJ83Sz9Hb5ujk2dWin9/QsVjs6qru4tM+muV4
yNWEdjJlNk5wlfqtR/L0IsZK973w/t4gtLrJ/URpVFGZK25ht2DCgZ0uwHO1pNCL0ljqiKX6v+Lc
ud0/ggAAAAFiS0dEyWq9Z1wAAAAHdElNRQfgCggDFQv3tQCpAAAanElEQVR42u2c+WNSVxb4DyGE
HUoIkAAGCJiEGOAhJpFggCBZBrKzqiSQYF3aaq1r615biUZrq2Or1Ta4Vltal6kTh1jrAC8pf9b3
sTy2EButnX6/853zg3nv3P187j13eRcB/t8TQgWxklRFLlVTqH91xf7/FlqMzmDGWaVq9lucv7pm
/91CqebWlA/hAfAFtdXEOqZQRBAXh5FX1TMkf3XV/1tFKgNGg7xaVC6Mo1hd39gkbGbVyVnKljWt
IpaKxqHkgslqDYL81fX/r5SaVbEq7VodkytYtySM0iZqr9N0kPi1cY1UmFivJ3UahBu6jAWpG5Sy
ppQnM5n/6ob8dwmlsrW+22hRiBq6loRpNzYjYJUKevgV6l5DHyJqRBAJ9P9NWhDHRrPTe4E/wId1
5BUX+j/5HRFUDZr1Q8MiabNcMVIaSB+1S8aG1KwGh9FZrXK5PWuZfUNiU7OQVxDJUsH2btqsp67r
0/7VjfmDYua9RMxYhC2UIhV1izmTkCwp0oPEB1uoL8/qpbKuxVBtE9WPyzs6BEbDhFXGFih8+WC/
B1piWghMTslEwQbd4JAMpKhT6yEUZcJuaTM5R5AW10TmnVN+1Lyknpmq+raUNI4MW2p+vy05Y2LW
AUkNrMwa1K1vb9u+Y+c77763K6vftfv9PWn5YO++/dnHPQf2H/wg83ToQ4CP9h0+sgeXI3v3H83O
ssf2Hn8/p9/zwYmD78HJ/XtzUfd+fGLfqVOH936S0Rz55NPfwdJ22o8oUG2jX1hLrGrvaIkPdw8D
WY8HI57e1Sj2V5YIObyO4XgrZjuPX0WkFGVitaHq6dYzZzktqVUZ9fQMo1xR5w5lW/PJ4eOHs/U9
dOLUoWzlDx2D8wf3H8o37si+U5/B9gOn8Ma9v/tC2SZ8nm3sniOnDuyEbfkEWO7H9x3AzJEr4otc
ogsXDy7gcunQ37elKn45p1k8eAR/PHwop/2SApJzXy3kZXH7FZzx5asF+oXdX5thy7bF3Pu163sO
7jv+zbc5xbu/g0UnNFhds8Lwmk1rjOyQZcZLQSqJo/kpHen016os3t4J90TQIq8OuuRngq5VWA8t
6Hbemc5po5yZaAXShOBGEyu0rmxRf8+37+o+/PHI8Zx2G/Au/L2wcQePUaDmnQN5xc2y+e7OhR/4
zAfkd/bnE9y6dfDA8W8u5d4/yibhXby9sHBq551P797MhtzBtN/hxVzeArxsDRfPQ/hetoRrKQi+
bV/itr6/pbAaX9/CYR36LqORbMcZXkyVSaVIvv8h25q7v4PFpCCub5ZIeRQrYdpGgA3CpmBlXIOH
+mXAUd9or/ZHmEyNRm6wTU97He1KzPfVpvczqdLsPtF4JBAJVg5RQDmlDsgUOoJFVGaXmTX54o7v
ffAubjegfr/zUoHNzv+Id6l9P2VN+MWJnFnLDZf38MD9X2RqZD6Ho96dsQZ517sPMooPs1mmYFzP
+Oq76T69+Dn2+Fkm0o60SbN5LN5JU0w/f5sp/uFCUWY5uZJtx1d5Wo+WRCWfTCvOwe8Jf4qYrqpJ
SWUPokE2Bci9TakG8mrAeEYCLTaCgqhgBmV8B32Tq9IgGK8E8nojZ006NcNQd9rxVlDJjdj7/bJY
EPib/YhNbS0zu1zP9Oh02+7igyX18nhv+vkfmWh7s0F59/vzS4fLk6WOIWvfhQ/ysXakFUfzHeQU
7od/+i1l/VT33ZmO8zCt3YJj+Tr9ur3geWc29/slFdl1LaP/Jj/x3s9G/WdBtEf5Ql4mnDlCL1fw
NwGAY8DoCKlmadUtT9MhaqWv2sFFe4hCBNFpCIJpd0AbtrA6kmpXo0Alp5iArSBuNOgJwGkYJjb5
mgzNjHCy1c2qMhG0vtJyeGlXsO9x+uWdbH3fz/Szw6nnQ+lnKu7L8yMjj2Xh8ZLq78I9+OK9nA4f
i/8y5+OljXk9/fh26nF7LuQd3E5pdDuhHBZIjZfFzPjdtsxoeZwdLV9eyakelcECHxWVvpyoEN7w
xiG1zysxYW+kGfF4IkFMn7FoURtSgbYIepkaxNxqnfC7jVZZFDG7k/N2FTqt4VL72NjsAxNSq8/A
qqRpITyqswMZAXun8zSlpBxfahh8uavAFDkswDmVckLpwx/K0tFyLo/l6JLqX8SDFo/ldG+XwZKG
mx4+mWnjHSjKP+W57hd041Is6fHy8xvBAh/mJ7llRWzjSzRyHcHH3AgBRYQ6uA6QDVxsajBpkMnR
gGewJqyQKlnIGj40KdjP2BG62yyIN2vGmfVmaoNIblBCY7OrBuzVvWupkKxIAWCcGZbxeSUFkbEp
Yj/e20uwQPgw3pyXY/m2dLgQrq0US2q87E0p7qXDthWEPMzY+GR2XimLJQVtx5vBAr9kh+1LhOlR
grZDhog2bV5jRm7UB5xMin7VJoCazZVK0dnnJje9bU1QJ+FJ2VEumyu2CBqoMJF0dlSsA/IGm0Ez
v6k26YpqbO4RCyhGPQy3msUcwLYQpQWFLy18fB5/KcUCuw5kZ9SyWA58hBv/l5Jcf164/c2yWN4v
woJZ/3hqCG/Pz2p5kz/B/n2Qp1IGCxbp5OtiKY3664IZXi7sZr9jlOQlb+h4OmuoChP/pmn2NHhI
qaCKRl0iCjouq41vHZhE0Xh8sBahzBi8q3hvoVUGjQLYqx2k0SEid8xlsBhrq6xvBSZXB9uHjIBg
Lq1kuHy6cDtHZSmW1IR5Z1ksHz/GZ5zF74syNe9buL99WSwflDT+/kIqdXZF+HZhyNWPsdpeKmBe
BgvcPMh7RSwfLROV8nOpiwfQFy9evYmEGiiyvqnqOS57s7g1rtdOEZu9AO4GpkdtZYJYSKhKxJnV
fShJ7OnrJbvVCoAXrOkKBJ7FhCKjnQPBBEnoIrqpIA/1YGs7kchFq2osmfR/vrY1/7IUC3z/28Nl
sSxcwRdXJcPlp4XFC49WjAXupqa27NLtq0LA5J+wqMcKFOWwmL9+VSzLjZYSYSgE3tpKFZ2c78k8
2tOOGWwlPGQY8ZzVhudFcWcNX/cM2zEG52iJdTKHw+rrQxUSLXQkLNCPJmUwAQyCAV3FgUqnALzp
XFhne+nuCSq/ytLNEXN19AHhkq8w5ws3HWWwwJ2ty2JZ3EXB55BLVwoz3Y156Qcrx5KWk9nQw1dg
eSmHJSt/cG4p8z2XgY519UfE1WOqcA4LsQ26zqB9Ung+aJ3Tbqwgot0zbrsUAydOdvJ65Y2crqQW
ZJN+TZsYoZlmY2yCpodQk2SCf1LL7RHDHLbvqZ2UKxwWXg1FPdcY6h+gzdhptJd9HiuHJSPlsXya
X3E9Koi8NbU9XxmWvDW24zl9efnPxlLGiR0tt2VhVDoae2rBNe4nmLRithhzNBJ1T1UHkwcqdIij
H9QqJCRFxWhrKjIfpSOOaYomZgwGaKMCMSBCE9DlIWREr9e3PAdBTOa3Q3j9nJ/JbJ5VptbXkdoZ
YbBpOqrUGP0EWF5eHUsYP8j4tqCT30xtdpZiwT3ekTyWbRdzj58v5GTnn4xlqRP7IbvKLm21hD9Y
Adx+jZdtZ7f5uQim00QijU1DSaWToe8TjimstdDXV0dIfb83+YmyGmzqMXJEHr5341zwRqcVEgMc
fxWDm9BSg6kckbqaAS/0na0dxrgouaMISCMKEqteDy+RV8eSa+JC3sDYVvIzeMloyWPZupifk6j7
8lweLHeU+xpYvl8Blk8XFn5aWpgf2/5JbTZAZEh1w1x/VQ93JH3YWxNLdOgYA2Bp57d4oGHEa6E/
A253Za+3N0pPsFcrTWvnTf2JZqbKxdYL64waMEeHhhzp/Z81/kzPNxsI0jH7ABtOzwuaxyxitv+G
8A1j2YUflt3OnTndXzjAWxEWyYmCtW/u9CSd6lH5GWYFWC6W6DnXlnVieNQLxxcW315amHAYAaOq
Tg/WlkEDHeHQxywRrL+TuljhKG/jvwEGApB8i4bSiFDrvBFX8HVaTk+fjymyVsfDdUNOd79APiOu
UEr0UcYkqRZVyNs4hKFEswbB0IbqptVk1FBdH1QHxabUCjCwGsBux7whWOh/GAv8EzclfhgluZb2
CMtjuZV9r9lddNzBO1jAZeHaw3JXS1aA5ZMd2y9icv/+I0w++vDR0dvLYnly5+vP73337k5si1WE
hcLFrAOIsXIe246g8w3oUGYKjIjarMJ2W1VdXTeBGa/jWiYDtFl0rjm+xkd6GrME6uupsx0I10iO
VnI1HDbfYXMqQrFpfQsd+lh2W3RcLqLZnjkNLDcdwkAODcfFxhk+mS2iAc8K3EmIJtdwYFA02vTH
sXyPD5drErzXX6uBl80te79OWePYD+8vFJ9CPb5WyGXh0OevhWU5KePECofnZwVZ8cZGnTe8UsSO
9tOiYUVs1oSPn+pettfVaKpD9fT6zvFYbd1bvUYHnEmKetC4NmzrDaNNbV0dZIJCGpzoIbqgqmkY
ZZHJUU5HndfSZtBMqcmG9nUBNImtlJEqo9BYHW1z27jY9sgptjsdiRlQtyYnSyea18GSPyvOmJh3
KvOw/GgplKLDwTu3iwN3LKnGCrBc/enuD1/8/PO5c+d2YvLw3MXlR8vBX578eP3mzb2lWLA9YX88
YZNsqGyr50hhhG6Oeo1WzB/2jAVcJCHSdAZtN7Jp1ng1J2GgDvKDzvWrO1BE2OAij5ImRozuaYdx
Q1/INqRWjU3GDZK2Nv3AIG2wK+QNjnQOyRDPDVZsLICVs5mpJQTVbqVDzwtrxkJc9YDF4Hay24Q0
kuWPYjmPW/FSepH308KlLS/HcuLk0R+vX7/5r8VSLHD+YDGXJfu915hbyMvPLdnCqRcXSucWl8ys
mBowANUlqtxU1T4dZLkqVbThRB/Yh5udmt7KZmBLYTYh8Q544yO0yEaRJy4F8Ik9CVFDZUe/ZYrE
4EeYbGVdG/q0pmHA2ogS6T0Gxo0ukdhpawLeag/KlUrpve4+NTYUBTPkACM2BWCqnWoD0M6N27x/
FAvgnxIzvXtPdse/vBO7mnk1v70EC0guLhZxefTqWF5hgZw7MP6xZLQAp9MVrvAE1pzu6leN6uwj
aiJThfYIng6YjRMIWOURL8jWmivoGwyhrvhwT+uoujau8A+65IINdjBR2OwJi3uQEuj1qJHEDMFd
SyXOUZXqjehmgXhQDrAJwDuMxupA6iRx28BKVVbLYE5FXoMAe9jO2KDmyvl/GMunuBG/8qVfvl8G
Cz5adhdYcskXjssfFHEpWSD9SVjI35QWxGGSBIZQj4il9Dig+rkYeF0bMbV6sJkleGrT1oGvr7Fa
Db2shvZRVJ3QAQdtcIUMNXbT37QGUYOY63C3TFSGzz4NoFErTU25MVuJKisiXJvTC1IhUSiujgw9
T7QKpfUoOqbSh4frlDGFbM1IEznsGfa2MRWF88vrYcEJpI/lj6ZPfV+OJXfGdLXMhyfzD8cLsHxV
fCjxJ2GBYyXbScQlYM1a9MR64ng1nxdzAGM9F2QAutiZxlA7pUHGWO8yMDPHi2aG0EbjWN1QLTAM
TbY1EEdG6mvaDd4OocJyQyhEtWIqQh6fdGmn6V6bFoBwdsrZ1WDvaeqfSgCrX/scFVphfdxzoyuh
Ol29Gp4lSa3Fe/7XxHIHN+IJ2LKw8N7KsVxZPAlLJfyowJMVm+vNHr4UfPX6cVtRonAdC5nphWer
GzdGwGJQ1bbrAqTqMAdezLI7VKGuQLMfHHZst2FJL5053BlTtC7ujqwfpBMHdU/5poTD3NTzrMFM
QEd5ARtXj3JB2T1AawsAdE7anPF5G5NtU6MRdkI3gbbIeAN9NUCNxhIiYzA0OUwam3kDWOB93IiX
z+V2JcvPLXkssO0+lJNPb+WwFH+Z+rNGCzZblyQLvtBQ6lvHRPC0fapVqJTVqv2aAR/Yk6p1Y4OD
FQRpEyBicUv9dAeit7NXe5nr0biDu7bRtSbRRoeRhBJpcFWIpK6kV9JoMUUSzZ4kOt65QW0EHTYU
gpOJ/oHq5jja0t4oRkdbwT5l0VNtbZXxltgA8AhSwZvAkjvP2nd8Ad9trGS0lD24TctOfA9z+D+E
JVObd/P1EbDqBvxRHiGYCAn9VSGW3+kyyU2wMUlcO9I+pqymrl3ThKLtDc2N5mY6s77SE+mvV+pA
pCMRwTSJ9sXqjQaZJz4XbhIwJHUxmubpM5tzPvbclt4mc6bHUM9zEhq3VpCccVsAOuP/TiQpnehk
c2NkcKC4Wq+LhfevXO8+iNt8ZVgyckwCvLeLd/UXsved9v8nsTxZLOwm0SDXcCMkVgpBHJpkqfTR
Co3PDKrELIk+2UNgxWPouFGrJ6JsL6pTtccl5KixTSzazJ9kTSo3DA2f6UBakjEwqg0TvclWaxhk
StC3ybua55nilAX0Yh9sQu1cEn8SW1x70WHaWjA87Y/2KYUDfLX7DWDJXWopuAH3ClgeLuwC+OZB
sfJCZht44D+I5SG+dk9LxD3eTHxOardLV6t4jlm9bUDsF2G+LtK1ftYzicYr3X6z0TE6MonWhzqb
0RgNxCJnyEFmoKiyplOAINCW9Kx7xuXU6p5NIX1TmrEOTo+8t4btVs0PkiJUqGEAkMY4XTrvvMEM
L7pTXaJ+TELlTIaqzyCQt9JrY+HhX49P5brb8lj2mIvzPpa6rwonS1dlv6Qj3yrS/alY7i7gq0ie
HRsVyW4F2IIwofKEtFaVo6MeUVWwU4dlhDkU7Xhq0opr1TO058BW1FklPLY8WdVUNYG5JxXq1PdY
AjqwoP8O8xvrLPbwkBpq+z268ekEv7Kig0FhBG/UhULxTjNUoes3BZToWQlY53shuKGbCN4pDUI0
UQz5JfJrY8mZPP+pZCUH+2nZenvhkDl9haX4UuO9Mqb7M7F8h63/TmafT5/VD3RFJa5kuzaoVnWt
nYvFQ0p0ALFV6pSDdWqungpt3ZU+PozG05//eVhvXBsLAFjrE5uC7evHjNVAT3azdXawkKA1GQAX
BpQeEDYNquY2POsHEMsiA7XTwyjaRelTdb3oBRB2t59lW1kCBRrRr230DOX96etjMR9IhxZsM1aK
ZddXGbe2faHkDnDmUlOx/Tkf/2lYLqecJj5gOWjCJYy4om3Pu6UMhlskH4rH0XjLZLylpVGJhCVN
Rl8bKhBDYKOdwHDTBmPxLhdsGph2JtCKtcBFVXOkYCLeNvPMZrXXuBPrsZWe3d2kY1DEiLXD2DLP
1s03GhlWIdMgJ7WOEttj8mlBzWxCBFZjn2rUQg+qUHm+ajiWT14ZC3yRDi04kFohliupr1+/QvYO
cSGX9PerI8XVoGYvmC8uvfaMX1srPRO7gl92zS+BL5YhmKaSH+ze4fiQAVulilvsLMRglEhNVjbC
Fkj4Jg6ljsW+4ZLThhAjULT+OYxXrKUnHvs32ZUcc81NrLbwAnNoF9pFpAdPW94iR1BUBiPz8ZRM
GbQUCSDtrTOqcfaoclgJEY5P7NWSUAuIN833T48QGyrZE5MJ50RB3fJXw5cIPnnkL6a8U3QNiZIy
76VwXnFzSb/+rgyWK+nDyZRLz9yd/SEftLOM+R/jt8+Kj7BSgt8FeFKiP49fDc/fu8J/gJDfNJmz
N3fzm1ezfBRNTNaCuLK/im2YFdODUMsC2lmZJJwwNm32IdNkvmn1IBpHxzLnV8ZYkqrwENgKuaEx
DIrnaKf0xdqRmaddseRpaEFtJqAgzGYUHRLpUu5JPcVHLbbnmufsgajQxZ5SA3fE9aJpXb/ZOohO
KYu2Ubgj2Lvkll/NqWzQ5wWRC+4XZ6x4suB9TzbBFznND1nN7nykYxmndDLfJXK77SspAsUnVbsu
5s5lvj1a7MYen8z9LuMfhVc0eF8cxvX7z2W89dYn+CHCPyk+CWfXhe/e2f5JGdrUCRXNC+Yp1ChB
K6G7jxC3cNANER2c1mDDiCdWjqPYciyCbQ6jq9rbDRTqnEfR0UOQPmU1OeRmfbQylIhhCzRUVUmY
7eIAm0arDgO/aRhzh+ppRC8NRGE6ZgsFPfWUBD2K9gicFWuCTck14ipH0dnLvZu/4U04taP4o+1P
uV/5fLU9k+bKh5hz+HJ7frNRg5kx3yHv5X7vc+mjTFZX7uM7xA/IFPKWXec/v7vjH1nNoxSh7PPN
yynr8e5h/eCrwp8Bmd99Uny6fHBnro5bTxYFXceRSc4dKNSf2OmDy0/y74u3f1tcLEyZw8Jj5Dqm
3AqKHq6SJH7Wwhnp8ErZGDCOd9UQxoQY4QAgxFifqlYVR73Qg04L+iQEXT+t3y2IeLXRxioabZ5l
tLEgMhSfwniMYVO7takFjcdDtRG+jxcGO1PauW5wgIESN8aGAPx9jdlyKekxeOXh3qJG/3b0GL5w
pt4t+gzy2/YrcOHDLMFr23N+a2fuBxW8d28VJXj0GB4/+i3f+N9up62RN0hq7n3vS/zt8N/v/4JV
ZvFo0c3m84cOPvixQH7dfTzn8T488WthyOGb2duR353afTOvv7n7wFZ4ciAf9fqtW1evPnjwKx7n
5k38KiOv7vk4keai69hWnplAMOsRrN+lftXFo5C9VV2YgT3E3kz/XD3fm0LIaUw2nUYb7S9CESBP
B2srx+todZpqw6ozm+aHCKeTzgC1RtuKxtP9mB8cw2ak+NQYy603UXmID3hteghEMn2BSkB6XXWh
aOr53PHdhU27+WDvIfzI//zhD64XhFz9+C5cPP4g+7I/72few5dh4UMHCxL8+ODjh7Dj4wcFOWSs
cR03x630tZPw5XNPDh2/nYG1eOpiybRihiXCg+WEt0yE5VOUSGA4npe+2c6elhaSytnT0jWVUsy5
7EuvxbqTaNweDY+is0YeOaoxaFSifrR12gpjKJocycThWPHYYT+zZSrFJj45JjK4qv3GiEwXFLLq
G+ZGU6u+hGO5CvNK/q5YXjlBXracv3Pv2LHvLj82v34eb0YoHMTulxtodR3jXSHPUHf380mPJ9Tl
tMnty/yg/ukLA4jbnrGrY92t7jA/6GdObUrnJOz3lk3gQ3RCUU9zd7xQYvHuUAux1gj/k98THtVX
U+Ojmn+nv2HLJ/8YW9obk0fHiCKhMNbtW0nmZL14Qumg2Ww0pkLOtfMJ//uPlN608IQDs3Eb9lBj
j9Ij+j+c3/+18n8AQPk4jbIm19EAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMTAtMDhUMDM6MjE6
MTEtMDc6MDA1y8/5AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTEwLTA4VDAzOjIxOjExLTA3OjAw
RJZ3RQAAAABJRU5ErkJggg==" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/images/setup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
static/images/share-webslides.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

45
static/images/swipe.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve"> <image id="image0" width="96" height="96" x="0" y="0"
xlink:href="data:image/png;base64,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" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

12
static/js/svg-icons.js Normal file
View file

@ -0,0 +1,12 @@
/*
* Thanks fontastic.me (Font Awesome 4.4 as SVG Icons).
* Do you want to use other icons?
* Go to https://fontastic.me > Create account > Select icons > Customize > Publish (SVG Sprite) > Paste .js here
*/
/*
Important!
/css/svg-icons.css is required.
*/
(function(a,b,c,d){function e(b,c){if(c){var d=c.getAttribute('viewBox'),e=a.createDocumentFragment(),f=c.cloneNode(true);if(d)b.setAttribute('viewBox',d);while(f.childNodes.length)e.appendChild(f.childNodes[0]);b.appendChild(e);}}function f(){var b=this,c=a.createElement('x'),d=b.s;c.innerHTML=b.responseText;b.onload=function(){d.splice(0).map(function(a){e(a[0],c.querySelector('#'+a[1].replace(/(\W)/g,'\\$1')));});};b.onload();}function g(){var a;while((a=b[0])){var e=a.parentNode,h=a.getAttribute('xlink:href').split('#')[1],i='https://file.myfontastic.com/bLfXNBF36ByeujCbT5PohZ/sprites/1477146123.svg';e.removeChild(a);var j=d[i]=d[i]||new XMLHttpRequest();if(!j.s){j.s=[];j.open('GET',i);j.onload=f;j.send();}j.s.push([e,h]);if(j.readyState===4)j.onload();}c(g);}g();})(document,document.getElementsByTagName('use'),window.requestAnimationFrame||window.setTimeout,{});

3109
static/js/webslides.js Normal file
View file

File diff suppressed because it is too large Load diff

9
static/js/webslides.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long