created slides
This commit is contained in:
sven
commit
c8cc4fc95c
21
LICENSE
Normal file
21
LICENSE
Normal 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
105
README.md
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
# WebSlides = Create stories with Karma
|
||||
|
||||
[](http://opensource.org/licenses/MIT)
|
||||
[](https://github.com/webslides/webslides/releases/latest)
|
||||
[](https://codecov.io/gh/webslides/WebSlides)
|
||||
[](https://www.paypal.me/jlantunez/8)
|
||||
[](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
1943
demos/classes.html
Normal file
File diff suppressed because it is too large
Load diff
3148
demos/components.html
Normal file
3148
demos/components.html
Normal file
File diff suppressed because it is too large
Load diff
265
demos/index.html
Normal file
265
demos/index.html
Normal 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&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&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> · <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> · <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
358
demos/interviews.html
Normal 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&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&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 ›</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 & 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
858
demos/keynote.html
Normal 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&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>→</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 ›</a>
|
||||
<a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site ›</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 ›</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>“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.”</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><article id="webslides">
|
||||
<section>
|
||||
<div class="wrap fadeInUp">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section>
|
||||
</article></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><div class="embed">
|
||||
<div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay ></div>
|
||||
</div></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
1933
demos/landings.html
Normal file
File diff suppressed because it is too large
Load diff
415
demos/longforms.html
Normal file
415
demos/longforms.html
Normal 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&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." — <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 ›</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 & 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
947
demos/media.html
Normal 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&subset=latin-ext" rel="stylesheet">
|
||||
|
||||
<!-- CSS Base -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
|
||||
|
||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
|
||||
|
||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||
|
||||
<!-- FACEBOOK -->
|
||||
<meta property="og:url" content="/" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="WebSlides Tutorial: Media" />
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta property="og:updated_time" content="2017-01-04T17:25:31">
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
||||
|
||||
<!-- EDIT -->
|
||||
|
||||
<!-- TWITTER -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@webslides">
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta name="twitter:creator" content="@jlantunez">
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta name="twitter:title" content="WebSlides Tutorial: Media">
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta name="twitter:image" content="../static/images/share-webslides.jpg">
|
||||
|
||||
<!-- EDIT -->
|
||||
|
||||
<!-- FAVICONS -->
|
||||
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
||||
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
|
||||
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
|
||||
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
|
||||
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
|
||||
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
|
||||
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
|
||||
|
||||
<!-- Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#333333">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header role="banner">
|
||||
<nav role="navigation">
|
||||
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
|
||||
<ul>
|
||||
<li class="github">
|
||||
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
|
||||
<svg class="fa-github">
|
||||
<use xlink:href="#fa-github"></use>
|
||||
</svg>
|
||||
<em>WebSlides</em>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitter">
|
||||
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
||||
<svg class="fa-twitter">
|
||||
<use xlink:href="#fa-twitter"></use>
|
||||
</svg>
|
||||
<em>@WebSlides</em>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
<article id="webslides">
|
||||
|
||||
<!-- Quick Guide
|
||||
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||||
- Vertical sliding = <article id="webslides" class="vertical">
|
||||
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
||||
-->
|
||||
|
||||
<section class="bg-black-blue aligncenter">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<p class="text-subtitle">WebSlides Tutorial</p>
|
||||
<h1 class="text-landing">Media</h1>
|
||||
<p class="text-symbols">* * *</p>
|
||||
<p>
|
||||
<a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
|
||||
<svg class="fa-github">
|
||||
<use xlink:href="#fa-github"></use>
|
||||
</svg>
|
||||
Free Download
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<div class="wrap">
|
||||
<h2><strong>A quick reference guide for beginners</strong></h2>
|
||||
<p class="text-intro">Videos, images, maps, and charts.</p>
|
||||
<ul class="flexblock border">
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=3">Images</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=4">Background Images</a></li>
|
||||
<li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li>
|
||||
<li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li>
|
||||
<li><a target="_blank" href="#slide=13">Logos</a></li>
|
||||
<li><a target="_blank" href="#slide=14">Avatars</a></li>
|
||||
<li><a target="_blank" href="#slide=15">Devices</a></li>
|
||||
<li><a target="_blank" href="#slide=16">Screenshots</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=17">Videos</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
|
||||
<li><a target="_blank" href="#slide=22">Embedding YouTube videos</a></li>
|
||||
<li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li>
|
||||
<li>
|
||||
<a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li>
|
||||
<li><a target="_blank" href="#slide=30">Fullscreen video</a></li>
|
||||
<li><a target="_blank" href="#slide=32">Background video with overlay</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=35">Embedding maps</a></li>
|
||||
<li><a target="_blank" href="#slide=36">Embedding the map in a card</a></li>
|
||||
<li><a target="_blank" href="#slide=37">Fullscreen maps</a></li>
|
||||
<li><a target="_blank" href="#slide=38">Embedding charts</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap aligncenter">
|
||||
<h3>
|
||||
<svg class="fa-camera">
|
||||
<use xlink:href="#fa-camera"></use>
|
||||
</svg>
|
||||
Insert images wherever you want
|
||||
</h3>
|
||||
<p class="text-intro">15 different positions.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h3>15 Different Backgrounds</h3>
|
||||
<ul class="text-cols">
|
||||
<li><strong>.background</strong> (fullscreen)</li>
|
||||
<li>.background-top (cover)</li>
|
||||
<li>.background-bottom (cover)</li>
|
||||
<li>.background.light (opacity)</li>
|
||||
<li>.background.dark (opacity)</li>
|
||||
<li>.background-center</li>
|
||||
<li>.background-center-top</li>
|
||||
<li>.background-center-bottom</li>
|
||||
<li>.background-left</li>
|
||||
<li>.background-left-top</li>
|
||||
<li>.background-left-bottom</li>
|
||||
<li>.background-right</li>
|
||||
<li>.background-right-top</li>
|
||||
<li>.background-right-bottom</li>
|
||||
<li>.background-anim (animated)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-50">
|
||||
<h4>
|
||||
<svg class="fa-camera">
|
||||
<use xlink:href="#fa-camera"></use>
|
||||
</svg>
|
||||
.background = Fullscreen Backgrounds
|
||||
</h4>
|
||||
<p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? →</a></p>
|
||||
<pre><section>
|
||||
<span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
|
||||
<div class="wrap">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section></pre>
|
||||
<p>
|
||||
<svg class="fa-info">
|
||||
<use xlink:href="#fa-info"></use>
|
||||
</svg>
|
||||
Position .background outside of .wrap container.
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>.background-(position)</h3>
|
||||
<p><code>.background-right-bottom</code></p>
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-wifi">
|
||||
<use xlink:href="#fa-wifi"></use>
|
||||
</svg>
|
||||
<h2>Ultra-Fast WiFi</h2>
|
||||
Simple and secure file sharing.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-battery-full">
|
||||
<use xlink:href="#fa-battery-full"></use>
|
||||
</svg>
|
||||
<h2>All day battery life</h2>
|
||||
Your battery worries may be over.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<h2>Lifetime Warranty </h2>
|
||||
We'll fix it or if we can't, we'll replace it.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<h3>.background-(position)</h3>
|
||||
<p><code>.background-left-bottom</code></p>
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-wifi">
|
||||
<use xlink:href="#fa-wifi"></use>
|
||||
</svg>
|
||||
<h2>Ultra-Fast WiFi</h2>
|
||||
Simple and secure file sharing.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-battery-full">
|
||||
<use xlink:href="#fa-battery-full"></use>
|
||||
</svg>
|
||||
<h2>All day battery life</h2>
|
||||
Your battery worries may be over.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<h2>Lifetime Warranty </h2>
|
||||
We'll fix it or if we can't, we'll replace it.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter bg-black">
|
||||
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<h2>.background.anim</h2>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||
<div class="wrap size-50">
|
||||
<h1 class="text-landing text-shadow">Opacity</h1>
|
||||
<p><code>[class*="bg-"] > .background.light</code></p>
|
||||
<pre><section class="bg-black">
|
||||
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||
<div class="wrap">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
|
||||
<div class="wrap size-50">
|
||||
<h1 class="text-landing text-shadow">Opacity</h1>
|
||||
<p><code>[class*="bg-"] > .background.dark</code></p>
|
||||
<pre><section class="bg-black">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||
<div class="wrap">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-50">
|
||||
<p class="text-subtitle">Optional · 500+ icons</p>
|
||||
<h2>
|
||||
<a href="http://fontawesome.io/icons/">
|
||||
<svg class="fa-flag">
|
||||
<use xlink:href="#fa-flag"></use>
|
||||
</svg>
|
||||
Font Awesome
|
||||
</a>
|
||||
as SVG icons
|
||||
</h2>
|
||||
<pre><svg class="fa-flag">
|
||||
<use xlink:href="#fa-flag"></use>
|
||||
</svg></pre>
|
||||
<p>How to change icons?</p>
|
||||
<ol class="text-cols">
|
||||
<li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
|
||||
<li>Create a free account.</li>
|
||||
<li>Select new icons.</li>
|
||||
<li>Publish as SVG sprite.</li>
|
||||
<li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-green">
|
||||
<div class="wrap">
|
||||
<h3>ul.flexblock.metrics.border</h3>
|
||||
<!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
|
||||
<ul class="flexblock metrics border">
|
||||
<li> Founded
|
||||
<span>2024</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-users">
|
||||
<use xlink:href="#fa-users"></use>
|
||||
</svg>
|
||||
</span>
|
||||
24M Subscribers
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-line-chart">
|
||||
<use xlink:href="#fa-line-chart"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Revenue: $16M
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-building-o">
|
||||
<use xlink:href="#fa-building-o"></use>
|
||||
</svg>
|
||||
</span>
|
||||
8 Offices
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-smile-o">
|
||||
<use xlink:href="#fa-smile-o"></use>
|
||||
</svg>
|
||||
</span>
|
||||
48 Employees
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-usd">
|
||||
<use xlink:href="#fa-usd"></use>
|
||||
</svg>
|
||||
</span>
|
||||
EBITDA: $2,4M
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-university">
|
||||
<use xlink:href="#fa-university"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Bank: $32M
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h2>Transparent Logos</h2>
|
||||
<p>
|
||||
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
|
||||
</p>
|
||||
<hr>
|
||||
<ul class="flexblock blink">
|
||||
<li>
|
||||
<a href="#" title="Block Link = .blink">
|
||||
<div>
|
||||
<img src="../static/images/logos/google.svg" alt="Google">
|
||||
<p><strong>Height recommended</strong>: 48px</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Block Link = .blink">
|
||||
<div>
|
||||
<img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
|
||||
<p><code>img.blacklogo</code></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Block Link = .blink">
|
||||
<div>
|
||||
<img class="graylogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<p><code>img.graylogo</code></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bg-blue">
|
||||
<a href="" title="Block Link = .blink">
|
||||
<div>
|
||||
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
||||
<p><code>img.whitelogo</code></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<blockquote class="text-quote">
|
||||
<p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
|
||||
<p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="grid vertical-align">
|
||||
<div class="column">
|
||||
<h2>Devices</h2>
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-wifi">
|
||||
<use xlink:href="#fa-wifi"></use>
|
||||
</svg>
|
||||
<h2>Ultra-Fast WiFi</h2>
|
||||
Simple and secure file sharing.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-battery-full">
|
||||
<use xlink:href="#fa-battery-full"></use>
|
||||
</svg>
|
||||
<h2>All day battery life</h2>
|
||||
Your battery worries may be over.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<h2>Lifetime Warranty </h2>
|
||||
We'll fix it or if we can't, we'll replace it.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end .column-->
|
||||
<div class="column">
|
||||
<figure>
|
||||
<img class="aligncenter" src="../static/images/iphone.png" alt="iPhone">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- end .column-->
|
||||
</div>
|
||||
<!-- end .grid-->
|
||||
</div>
|
||||
<!-- end .wrap-->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<figure class="browser">
|
||||
<img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
<div class="content-left">
|
||||
<h2>Screenshots</h2>
|
||||
<p>HTML/CSS Browser.</p>
|
||||
<pre><figure class="browser">
|
||||
<img alt="Screenshot" src="image.jpg">
|
||||
</figure></pre>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-blue">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
|
||||
<!-- background with a frame frame -->
|
||||
<span class="background frame"></span>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>
|
||||
Videos
|
||||
</h2>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Background videos</h3>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<video autoplay loop poster="image.jpg">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>.fullscreen > .embed (responsive) > video</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen aligncenter">
|
||||
<div class="embed">
|
||||
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
|
||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Background videos</h3>
|
||||
<p>Transparent overlay:</p>
|
||||
<pre><strong><section class="fullscreen bg-blue"></strong>
|
||||
<div class="embed <strong>dark</strong>">
|
||||
<video autoplay muted loop poster="image.jpg">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen bg-blue aligncenter">
|
||||
<div class="embed dark">
|
||||
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
<div class="wrap">
|
||||
<h2><strong>Muted</strong></h2>
|
||||
<p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>Responsive Videos</h3>
|
||||
<p>Just copy and paste the code from YouTube to your slide.</p>
|
||||
<pre><div class="embed">
|
||||
<strong><iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||
</iframe></strong>
|
||||
</div></pre>
|
||||
<p><code>.embed</code> (responsive)</p>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<!-- <div class="embed"> = Responsive -->
|
||||
<div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<!-- Responsive video/iframe... Add <div class="embed"> -->
|
||||
<div class="embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Fullscreen YouTube Video</h3>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
|
||||
</iframe>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section class="frame">
|
||||
<p class="aligncenter">
|
||||
<svg class="fa-thumbs-up large">
|
||||
<use xlink:href="#fa-thumbs-up"></use>
|
||||
</svg>
|
||||
</p>
|
||||
<div class="wrap size-60 bg-white">
|
||||
<h3>
|
||||
<a href="https://developers.google.com/youtube">
|
||||
<svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg>
|
||||
YouTube API
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
|
||||
<p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h3>
|
||||
<svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg>
|
||||
YouTube API Parameters
|
||||
</h3>
|
||||
<p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
|
||||
<hr>
|
||||
<div class="grid">
|
||||
<div class="column">
|
||||
<pre><div class="embed">
|
||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
|
||||
</div></strong>
|
||||
</div></pre>
|
||||
<p>autoplay + loop</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<pre><div class="embed">
|
||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
|
||||
</div></strong>
|
||||
</div></pre>
|
||||
<p>autoplay + mute + no controls.</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>YouTube API</h3>
|
||||
<p><code>autoplay + loop</code></p>
|
||||
<pre><div class="embed">
|
||||
<div data-youtube data-youtube-id="_m67JbGjWnc" <strong>data-autoplay data-loop</strong>>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<!-- <div class="embed"> = Responsive -->
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="frame">
|
||||
<div class="wrap size-60 bg-white">
|
||||
<h3>
|
||||
<svg class="fa-info-circle large">
|
||||
<use xlink:href="#fa-info-circle"></use>
|
||||
</svg>
|
||||
<strong>Autoplay Feature</strong>
|
||||
</h3>
|
||||
<p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-70">
|
||||
<h3><strong>Let's make some magic with the YouTube API</strong></h3>
|
||||
<p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
|
||||
<hr>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="dmkwb2KfLW8" <strong>data-autoplay data-loop data-no-controls</strong></div>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>The video will automatically play when the slide is loaded.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-70">
|
||||
<h3><strong>Fullscreen YouTube video background</strong></h3>
|
||||
<p>Overlaying a transparent background on an embedded Youtube video:</p>
|
||||
<hr>
|
||||
<pre><strong><section class="fullscreen bg-black"></strong>
|
||||
<div class="embed dark">
|
||||
<div data-youtube data-youtube-id="c9psfOxJysw" <strong>data-autoplay data-loop data-mute data-no-controls</strong></div>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen bg-blue">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed dark">
|
||||
<div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
<div class="wrap aligncenter">
|
||||
<h2><strong>Overlay</strong></h2>
|
||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-primary">
|
||||
<span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
|
||||
<div class="wrap aligncenter">
|
||||
<h3>
|
||||
<svg class="fa-map">
|
||||
<use xlink:href="#fa-map"></use>
|
||||
</svg>
|
||||
Maps & Charts
|
||||
</h3>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black-blue">
|
||||
<div class="wrap size-50">
|
||||
<p class="text-context">Status of Net Neutrality around the world.</p>
|
||||
<div class="embed">
|
||||
<iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="card-50 bg-white">
|
||||
<figure>
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
|
||||
<figcaption>
|
||||
<a href="https://maps.google.com" title="Google Maps">
|
||||
<svg class="fa-map">
|
||||
<use xlink:href="#fa-map"></use>
|
||||
</svg>
|
||||
Google Maps
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<!-- end figure-->
|
||||
<div class="flex-content">
|
||||
<h2>
|
||||
Discover Seville
|
||||
</h2>
|
||||
<p>.card-50.bg-white</p>
|
||||
<ul class="description">
|
||||
<li>
|
||||
<strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
|
||||
</li>
|
||||
<li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
|
||||
<li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
|
||||
</p>
|
||||
</div>
|
||||
<!-- end .flex-content-->
|
||||
</div>
|
||||
<!-- end .card-50-->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<div class="embed">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
|
||||
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
||||
<div class="embed">
|
||||
<!-- I love Quartz's charts -->
|
||||
<div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div>
|
||||
<script src="https://www.theatlas.com/javascripts/atlas.js"></script>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<!-- .wrap = container width: 90% -->
|
||||
<div class="wrap">
|
||||
<h2><strong>Start in seconds</strong></h2>
|
||||
<p class="text-intro">120+ prebuilt slides ready to use.</p>
|
||||
<p>
|
||||
<a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides">
|
||||
<svg class="fa-cloud-download">
|
||||
<use xlink:href="#fa-cloud-download"></use>
|
||||
</svg>
|
||||
Free Download
|
||||
</a>
|
||||
<span class="try">
|
||||
<a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
|
||||
<svg class="fa-paypal">
|
||||
<use xlink:href="#fa-paypal"></use>
|
||||
</svg>
|
||||
Pay what you want.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-primary aligncenter">
|
||||
<h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
|
||||
<h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
<!-- Required -->
|
||||
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<script>
|
||||
window.ws = new WebSlides();
|
||||
</script>
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="../static/js/svg-icons.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
388
demos/netflix-culture.html
Normal file
388
demos/netflix-culture.html
Normal 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 · 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&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&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
1874
demos/portfolios.html
Normal file
File diff suppressed because it is too large
Load diff
351
demos/why-webslides.html
Normal file
351
demos/why-webslides.html
Normal 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&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> — 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&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><section></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><article id="webslides">
|
||||
<span class="code-comment"><!-- Slide 1 --></span>
|
||||
<section>
|
||||
<h1>Design for trust</h1>
|
||||
</section>
|
||||
<span class="code-comment"><!-- Slide 2 --></span>
|
||||
<section class="bg-primary">
|
||||
<div class="wrap">
|
||||
<h2>.wrap = container (width: 90%)</h2>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</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>→</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> · <a href="../demos/portfolios.html">Portfolios</a></li>
|
||||
<li><strong>Docs:</strong> <a href="../demos/components.html" title="WebSlides Components">Components</a> · <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> · <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 — <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
86
error.html
Normal 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&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
407
index.html
Normal 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><section></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><article id="webslides">
|
||||
<span class="code-comment"><!-- Slide 1 --></span>
|
||||
<section>
|
||||
<h1>Design for trust</h1>
|
||||
</section>
|
||||
<span class="code-comment"><!-- Slide 2 --></span>
|
||||
<section class="bg-primary">
|
||||
<div class="wrap">
|
||||
<h2>.wrap = container (width: 90%)</h2>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</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>→</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 ›</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—%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
2350
static/css/svg-icons.css
Normal file
File diff suppressed because it is too large
Load diff
3791
static/css/webslides.css
Normal file
3791
static/css/webslides.css
Normal file
File diff suppressed because it is too large
Load diff
BIN
static/images/android.png
Normal file
BIN
static/images/android.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
static/images/avatar.jpg
Normal file
BIN
static/images/avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
BIN
static/images/bt-appstore.png
Normal file
BIN
static/images/bt-appstore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/images/bt-playstore.png
Normal file
BIN
static/images/bt-playstore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/images/davinci.png
Normal file
BIN
static/images/davinci.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
static/images/favicons/favicon-120.png
Normal file
BIN
static/images/favicons/favicon-120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
BIN
static/images/favicons/favicon-152.png
Normal file
BIN
static/images/favicons/favicon-152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
BIN
static/images/favicons/favicon-180.png
Normal file
BIN
static/images/favicons/favicon-180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
BIN
static/images/favicons/favicon-192.png
Normal file
BIN
static/images/favicons/favicon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 656 B |
BIN
static/images/favicons/favicon-32.png
Normal file
BIN
static/images/favicons/favicon-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
BIN
static/images/favicons/favicon-76.png
Normal file
BIN
static/images/favicons/favicon-76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
BIN
static/images/favicons/favicon.png
Normal file
BIN
static/images/favicons/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
BIN
static/images/iphone-hand.png
Normal file
BIN
static/images/iphone-hand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
static/images/iphone.png
Normal file
BIN
static/images/iphone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
89
static/images/logos/airbnb.svg
Normal file
89
static/images/logos/airbnb.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 6.9 KiB |
68
static/images/logos/apple.svg
Normal file
68
static/images/logos/apple.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
46
static/images/logos/facebook.svg
Normal file
46
static/images/logos/facebook.svg
Normal 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
|
||||
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
|
||||
OjMwLTA3OjAwxTM2RwAAAABJRU5ErkJggg==" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
102
static/images/logos/google.svg
Normal file
102
static/images/logos/google.svg
Normal 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,iVBORw0KGgoAAAANSUhEUgAAAI4AAAAwCAYAAADHPUINAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
|
||||
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAU
|
||||
s0lEQVR42u1ce3hU1bX/rbXPTDIZIvJI/NS2XqSXoiggEEV5hUxCFR+3ihawt2Kp/W4Ve7EXpRiK
|
||||
VjThoVb71VuurdCHbUVb/KxYtZAEVEA0ASuVltqrFWuxJQkayUwec/Za94955MzkNRPEeNv8vg8m
|
||||
c87ee+21zjprr73W2kPoA2bfETml1a+TIXqmMH2aFUOhyAGhjYDDUHqbrP5Bc/jF6m8E3ukLjQF8
|
||||
vEGZNixeE/Gz6CVQXAvoFCiGAgBEAY4NowpQfEQSQA2OALQTwEOuQ79+fmme7W+G/9EwceOc8QRM
|
||||
BtAWv5SjwO498zb99njS5UwalVaEF7AreyG6CaqXJpUGSCoN0KE0AKAMkMVQsnopVH/li2pdyarw
|
||||
FR+ZRP95cDmAdQA2xP+tA/Cl403U6elmaUXzKCG6R1Qv7cvg6lFLUR3PLjaVVIZ/ghy6sWZJ3tHj
|
||||
zdw/A0jR3MW68f7xptutxQlVhEOWaK9K35SmE4MUVyTVa1qidleoMjzleDM3gOOHLi1O6crwVRrV
|
||||
n8EPH3XrBdFOJVQZF/vVwSFhtLEgh1ycoobOUOgsQKcAab4PABPVswbBmQ1gZ38LYAB9QyfFmbG6
|
||||
5bMUdh+TXAJpx/WOh08bifBAdXmwt4e+MlQZmaGqXwXrPLKAkkIB2BOclb9anHN7fzM/gL4jRXHK
|
||||
VoVHSKvdbP2AEpKKQwKA6RARXV1dnvdcpoPH2z5XUhl+REkfhuIEDTirX1wcGFCa/+dI8XFE8Dhb
|
||||
9Vk/gzSmPGwVLLpNmc7JRmm8qCkPPgmmKZpjFm27OXBrfzM9gGNH0uLMXBu5gY/a8W6AYFyFEuC0
|
||||
KI6eZF5hw7N3XZ/beiyEasqDrwF4rb8ZHsCHAwcASu6N5GubrrU5nuVJARYcxTDfJbvm+45JaQbw
|
||||
jwcGgECjXUBWguoJ5rFVNH3Cd8vu+b5D/T3JAXz84ABAZBBfQ1ZSdlFiaP/u63Mf7O8J9obDoaKg
|
||||
A9cOrX7luFlF93mTBwDOdBs5HuNPXxsxjkFefwVFmxaO4baDeQEDGx1Wvbc9kz7OlHWto+iIW0Qg
|
||||
ePQG6uPv9QcTvaGx+JzPiONcBtWZqjQCQMDCcQ+HipoBPcA+eSbQHHkquONAY19p2F3OCLTjEnFp
|
||||
FoCRaEcQAKJVHCbCfiLZDJ/+xkyTv/eVRmlF8ygBPk+gYrTrJ5U0N3RXuFUJf2LgF5Gh5tFd1+e2
|
||||
zlwVKWTRs0HkAgBUHWa8ufXW4J8BJLa8WdOvL5swHpavUNC09oP4JABHYNwjMyccssTbWezPhm1/
|
||||
5Y/d9XcCDXa6NWm0ldpZ6ck+P93jgPqyCeNVeJlVngtVAJRM0XYoPI2zUTM3kpP/bn3JpIeUaE1h
|
||||
dW04UxpulXMmQMslgisB+JPi8IpGcYYKXwmLBreaf0QWFWaW+36mNKasax3le9+Wi+i/q8KAtIOP
|
||||
mMkfZRUXBxpteagyvFBVmxRaFeM5BokGvwdgUV/k2FBaNEZV71ChOTGRdfCnAFw2IwFMs+ysqA9N
|
||||
ehDG3Fmw5aW/po/DanC2d4mKDaZ/+jiVQ9TPnnyjWrMLoLnoNNm0qccEcLIQrYCirr5swvhMaNga
|
||||
c40S7VbganiUplsihOEqdLMw7bJVvozSJyUVkdk5jW4tiy4AYLqLyhMBAh2lok8DuAVAelVBxi9D
|
||||
ihxLiuYLdKdqh9L0xKOC/gNWnmsoLRqTfttRYIQ32Bfv9btsJ1VSGT4LhFFQuH1hCkquOKja/o28
|
||||
lDW2vmTSSrFYkXH9RwffAGG0irPncOnEssKqPTXdtZWtvMQVvoe6G8j7SlLaPcIZEsUOu8Ncbqba
|
||||
J7qjUbwmPE9c+winaUvCkCQuJyL08e8nQPWaPskzDQ0XTljgRpwfsd9N5SHBG3k+vb4uMJIEtY3F
|
||||
55zjXbocKIamC4wIh7OdGAuuF9Ib+s6awrF0HoCXU5n1rWBKZVYBEGkThF5Rw++QWB9AoxUY1+nh
|
||||
EzFAjzcWn3NeV2u23WE+Z5v5HnI6TQcgtEPxMgFvA4ASRgGYlKJACsABpJUfla16LpfJq+k0QpXh
|
||||
KerqI6qUyocCBGoHoRaEN6DwM2G0QseTAGLQm4HNCA2lRWOklX9EPjdt3SWApYmUtsPon2CRD6EJ
|
||||
ylwUuy+x6aoGLDtPHJ017tz8La8eBbrIVcXdh6ythiVtztYqpCPKPCTx95HSsae77WYd++PMKuJ+
|
||||
GMOx0fVk3MqhNfveTLRvWjiG297OLSbh1QoqSkpcBSAaTEQ/ADA9Zc4v8EnSyj+EQeqbFnvjfwlg
|
||||
hROKHvDSGHT16+cLYTUIU2PjI/HhFzY/AWScl0bxmohfXfk5kFqvBABG6QkxWBEPjgKI77BcXAzC
|
||||
3dwuo8RPx6w8KvihGonRT/LIUMZPmcwyrw/TtHAMt7+V+zkF/gfsFEAlVnNleXSbmOUAlgGxSynb
|
||||
WCJAVYPHqANZgwD8LSdXEt+jFLgDwgGIp4HLICuLhm3be93Qqg6lAYDBG/ZLYdWemoKa2nNB8mjK
|
||||
4AJE/f5pDWUTL0oRaKu5HS5OBCO5DCkAI/ZmJxS9yqs0CRqmNLrTVxqdRqzrk3NDUu/Guludeam0
|
||||
dTEJPuW9xFbBSndUrQhe7lUaAHh+aZ6tKQ8+ScwTwsPNK044FsXvK9omj5+vQFHMcnjmq+7yk7a+
|
||||
9MV0x3fwhv1SULPncYejk6HawSELRMzXw1NHDwMAVuDdxDqrFNvdEWhEthNkomF9Zy/Vgoanjh5G
|
||||
VubASMeOwzFwWpq/XbCtttcwQWF13TyfjbyijolLCSDXQiwvTbRxnzd5ClwFp4O4KsBG13OZ3Nsb
|
||||
DWemex21YVe6g6lES5oWjmEgZj1YcFPKjlUU4vDmqm8Gv9XT+FXlgTCG+S5h4Gi2FuetIR2+/QdB
|
||||
39wUxSMGh9s2FVTvqeyqb31p0ZCGCycscNVf6dWbuNPojwRO/Fb9rPNOdVjxhiRqZTRWbKXA+AvW
|
||||
teZmk5+yBlXsUhBIW+bI+14CBERjD0nLgNibSAIczQnKZ8LvtP4RgOPmztIcBLxuBLn2IAb5l2c+
|
||||
H//tcG1HSCHmGE0/Ujr29KFV+94kxiwFhnsnRor3KYqbM6VBuViqgh0p/g5hUv78P5yNDXi1MRy4
|
||||
oNAXPgUpji+3G8LiTMbfPd93qPSu8MOqegP1weocnTUuv8WVC4i5480UaeFBWJreNrZzsl9UxTUS
|
||||
NScDnZdWQAGxc8hn6xwhelkg4FSvrTDwnpwHIONs+PZvBDcC2Jhp+5KK5qSJTpSYtpih7wBAc4BD
|
||||
3vWYFCDSZ7OJDg+vfmXz4VDRQRBOSzqzlthyznkA3lTo9PQ+BDydTUzGlEZ3utW+fSoYmyI+Q+MA
|
||||
vBr+ANN8hQo3/mYSFGD6TTJ4lwGU8XMANyBDq2M87QbV27GRof4Cr8Ui4LXEMt+0cAxHD/ovVpgF
|
||||
IrgUbDqHITTeC7rdkPmpGH2Wo26jw0TPqfJhqBQmVIwVsKRfQhaKkw1mrg5PgitjUvagwME2Q28D
|
||||
gAE+Yb2CIgBC+7KnpLtV6bSUF0cxBABMUE53W0xKayLZnzUJ1loIjfUKmkQLACCSj0+nkGaCEezN
|
||||
Znhh5/ew7mESLdQMA8Stvthne47zqXSjwWr3NYYm+IXM4raD+AKAcUkZJ8MOBCUFkTYRsFGJflZY
|
||||
VftCyjhV5YEwEzanTNYApk2vnrKudVTWgsxE1pZma5pz4DJeTRyfESCvUyfCe9nSIXbqO1lbtj4A
|
||||
UEZ+p7AaI+sUApEe6uTn+GgwABiDQRL1tFXANdkF79oGawtB67OdFwD4W2wnOQqbYoH5vSrWgjCu
|
||||
UyclELSWYW8iNmMKquu+Wlj18gvpzRwAIOD7UPqy14liqz5ulfsBzO7LpHuE6hfS108HeLynLuS3
|
||||
PUdzuwC77QHLqVYFYqIAQILUhKIAMJSX6dhJVhwdhChSA2g2tlN1muHyUEA8Xp6PTFaJpbz31AiQ
|
||||
n6m1SYHhTmEVBUZ6v3iWohYibCFjHxy+dc8zvcoWAKrKgy+3D+JnTKsmS0ZtLiG3wV407aGWjJ3F
|
||||
THD+dyJ3wJU0S0YfBN32pzr4bT/YiWHhs7KlZdlM6sQwmzYAEEvvIk2nNEpnZM2QNRNTB0HScrWa
|
||||
WOAwyWVU4Vo3ux2r2lMBnJr1vGJ9/7c71yihM0R4g8guN+KeU1Bd+7lMlAbwpDYll2+CAGxj23Il
|
||||
QHMAbpS7p94XWdiniaehZFX4Cn+r3kZxqontvxIe2bYsJ7kUtcNf5w1eKAC1VJYNrSMlZ44H6OxU
|
||||
bhWq0Vhk9yjXpSeVhWlWNjTsLmeERjG5i1t/BoCgSfVniAHxYXbxmkjG1lOJZwvUZNreEpAbXx4j
|
||||
QfcAkTZ1akTUyNBNxmevNXDPKqjeU9lTJrwrJEW38/rc15HvW4a4V0oKWIfgaxMEGuz64lXhW7IZ
|
||||
OB2ld4avozbZZNoF1ulQCjEUDri80tvWkLsZ7Ml5A1DHjGubPH5+pvQk4nxTHU7yFxtNDwyv2VMH
|
||||
AHD0KajHyyGAREfa7c7XMqWhbVgOF36vAhLwthrsBoAR+e1bXcvJ3Jt1CBTVTw75QJdkLDjR67OV
|
||||
9aD2GFvBHQca/VZ2a+cxf1dQXXfl8Gf3/ri3neqRkjPH15dNviD9eso7t3VZ7hoV3kjSsWSJIbhB
|
||||
AouuDVWEq0orw+dmw0TZqvCIGfdEfqLQH4ifAKZkIbzToogG6D+fvj0vpcpwaNW+NyHYnuJ0uhZN
|
||||
eb71XWVq01EfmrBYAv45ZD16EePnu4nv8VqaZ9KTluLSPZlku+2TzlfUpS/Dh7RUhTyYKPjatizn
|
||||
PTF4JDm8AgxCU57eGaoIh3qjMeE74QdIZBRlGcQZHu7ge3CTfST9vkKnN4Ymf7m3cRpmjx3tct52
|
||||
jerO+tCElNhTJ5dLgrTAWGwzrueNT+ZjNCSqu0oqwg8XrwnPK1sV7nK9nrkqUlhSGb6spDJ8r1Wt
|
||||
c1rki+kJO25XtA82D+/4et6GLmetmhLZJAXUZwKq2FpfUtSl5akvLRpSP2vS3eL474chpIQeReqV
|
||||
8eOUMUnv7CI+4hfgKbvNdClY93mT51b5VkqQvp/cwlL8n6ABllIi2z7gDiilV9UZIfyqtCK8oDv5
|
||||
ld4V/u/BR3WRmGPLVb03hB8lxQEQJx14ImIr7kP1oYnliSh3OhrKJl4kbTnPAmYwWKDWd399aNLT
|
||||
DWUTLzo6a1x+t6pcUhl+kqxeqpx6xir14eIDEP4C0FsAjgLIJ+BUAU5haKF0008J8IXlsS0VJ8zt
|
||||
ien6ssnfFbE3ds54AySoBckTUBwAOAfGXACxc9TyyWBPqgIxa8Mks7ty/Ox2s9K63F3ZRh0Bz1Cu
|
||||
7NUWygVjIpQ+r0jNPSFuQU2+zDXn2cfSBwlVRm6yau9jdKaiRLWs9JSyviYMv7E4XxTzCFqYVuHQ
|
||||
wb4N3l19Gy0FgEkbL78F4LVp01m5Z96m5Nm1hpKJk4S5FmkPRAGQ4gBBfwHQHwBpA/NIFcwGobjz
|
||||
4waYzQMgXd3tjw7UlAcvK6kM36ui/9X9KWCcAGAMoGO8gydfxK64FgUCzuot5YN6PV/F0r4E4JFK
|
||||
5iJ48yaxB1UEcFFHuD9unk1qu3ih4NLudgum2N7mVvMZoriyCz4nKTBJW7lTnUoKLGBy5c6ulAYA
|
||||
qsvz7i+9K/yvFl2kDkSLlLQIArDExBOXbabB4l4xvGZPXX1owk0qvvvhaEdEPvYxWplWxK5x55qj
|
||||
hCgdA3bdBwu27v5avGX3qCkPLiHii5Wo9sNggJReZ+XPZ3oob1j13nb/aS2XkNpNvQpRu/jODBYs
|
||||
Kqiqvbunrk4oehUbXZ/5rwV10FAA7JPlptje1lPTqm8GFxHTtzs0Iy6TNJqeIq5Ewvm36FwBmDUK
|
||||
qvd+h0gWQdCeWrOHHjVU4/+xuvcUVNd9NXG917BSzfK8p7eVB89l0LVxJrzlryl/d0k4dv9tACuI
|
||||
eULVbcFfZMPw4A37paC67koWLCLg3YweLgGO2heIaEom2XQglu1mkgUEvJ2pAhFjnwGmmpCtzKR9
|
||||
TXlwCYO/AtAhkh7Gjd+THF5E0B6XcwUP6uLyiV21LdhW+z2GTGFFr4bAY/gOEnB1wZa6lF111jnX
|
||||
UEU4pNDzAZoG4CwohoPUG5ewIDQp6A0CXhCDWnbo1x/G0Y/w1NHDIr78uWDMUqKpsbxTPKaqaCfC
|
||||
XxAr7N5SULPn8b7QsFucE+HTOSp8oQqKQRgCJEOF7QT8DUa3kk+fat4w+snBG/ZLtjRmrm4bArbz
|
||||
Kar/BtXJ8SUfAKyCGmMpIHq4ujzvuRmrWz5rrH02+UAVYPH4OI9eOU1VSwkaqzoA+Yioqm7uL1/o
|
||||
aQ71JROvANEsBV0IxcmgRJ01CdQ2EtHzDOcZv2l5LFH158UxFe2V3BvJR5ueRqBhUHVA5Cq0UYkO
|
||||
b7s1L+vy02xQX1o0hERGitIQGLXGlb+SwcEP83yV3eKcSCSnqROrNVJLf4Nf3/owz1fNviNySptP
|
||||
R7jMgxjSCDhveIOhU++LLMxplvWJlIMq4DjOsq3Lctd8GPQPh4qCTPgXgZwES4Ycqc9rifylt+NF
|
||||
x1rtOYDjjJkVzWugWOr1e6yf5sfLWPoNzrEPMYBMUFoZPhdtemNzAZ+V14YZGS/dRDNZOspHlWF9
|
||||
gpf6m58BxTnOKKmIzAZ0sajOgh/I/7uFBPg+ANf11rd4TXgeRaVIPb/qCqa92RSCHS/0JVk/gCzg
|
||||
b5YZbCWZPJVcgri68MJbm3v0UWasbvksCR5O1C0RADBAqh+LE7YDPs5xxvS1EWNcfdEJS5EbjFdY
|
||||
WsSCuEQ7xcEDPsFL1k8N5NJguPIZEC5T1UWqsdOehFhgkBhHlH2f9jrP/YUBxfkIMGVd66i8v7t1
|
||||
YpDf1SE7JQqTogmqg0A4If10p3UI/g8E0RO4353iBAaWqo8AO6/PfV38dBG3dh0tJdUgoKck4jne
|
||||
6DEA+D8QNBealR8XpQEGFOcjQ3V5cKcN8tmktBPoPeKegDK5fsXXXlyc97H6wc2BpaofMHNt5Aa4
|
||||
ei1Ei7ortVHQYSZsVuD+9NOeHwcMKE4/IlQZmQHgHFE5mYlyRbWVgKMg2qdEu4939H0AA/jI8X+r
|
||||
nh+54oftAwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0wOFQwMzoxOTowMC0wNzowMNUj4iYA
|
||||
AAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMDhUMDM6MTk6MDAtMDc6MDCkflqaAAAAAElFTkSu
|
||||
QmCC" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.8 KiB |
82
static/images/logos/instagram.svg
Normal file
82
static/images/logos/instagram.svg
Normal 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,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" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
31
static/images/logos/logo.svg
Normal file
31
static/images/logos/logo.svg
Normal 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,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
|
||||
ZTwAAAAASUVORK5CYII=" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
52
static/images/logos/microsoft.svg
Normal file
52
static/images/logos/microsoft.svg
Normal 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
|
||||
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" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
42
static/images/logos/netflix.svg
Normal file
42
static/images/logos/netflix.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
88
static/images/logos/nyt.svg
Normal file
88
static/images/logos/nyt.svg
Normal 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+
|
||||
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
|
||||
YII=" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
143
static/images/logos/thetimes.svg
Normal file
143
static/images/logos/thetimes.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
BIN
static/images/setup.png
Normal file
BIN
static/images/setup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
static/images/share-webslides.jpg
Normal file
BIN
static/images/share-webslides.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
45
static/images/swipe.svg
Normal file
45
static/images/swipe.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
12
static/js/svg-icons.js
Normal file
12
static/js/svg-icons.js
Normal 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
3109
static/js/webslides.js
Normal file
File diff suppressed because it is too large
Load diff
9
static/js/webslides.min.js
vendored
Normal file
9
static/js/webslides.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue