mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-16 10:04:45 +02:00
new demo: netflix culture, more video examples...
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
38a061d6d1
commit
c8603a1830
@@ -517,43 +517,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
<section>
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="card-50 bg-white">
|
|
||||||
<figure>
|
|
||||||
<img src="https://source.unsplash.com/POYDluw0tyw/800x600" alt="Big Ben, London">
|
|
||||||
<figcaption>
|
|
||||||
<a href="https://unsplash.com/@dibert" title="David Dibert">
|
|
||||||
<svg class="fa-camera">
|
|
||||||
<use xlink:href="#fa-camera"></use>
|
|
||||||
</svg>
|
|
||||||
David Dibert (Unsplash)
|
|
||||||
</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<!-- end figure-->
|
|
||||||
<div class="flex-content">
|
|
||||||
<h2>
|
|
||||||
Discover London
|
|
||||||
</h2>
|
|
||||||
<p>.card-50.bg-white</p>
|
|
||||||
<ul class="description">
|
|
||||||
<li>
|
|
||||||
<strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
|
|
||||||
</li>
|
|
||||||
<li><strong title="Population">Population:</strong> 8,673,713</li>
|
|
||||||
<li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- end .flex-content-->
|
|
||||||
</div>
|
|
||||||
<!-- end .card-50-->
|
|
||||||
</div>
|
|
||||||
<!-- .end .wrap -->
|
|
||||||
</section>
|
|
||||||
<section>
|
<section>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="card-50 bg-white">
|
<div class="card-50 bg-white">
|
||||||
@@ -589,6 +552,43 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
|
<section>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="card-50 bg-white">
|
||||||
|
<figure>
|
||||||
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.8442158987712!2d-0.1268272!3d51.5005848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig+Ben!5e0!3m2!1ses!2ses!4v1491497625579" width="800" height="600" allowfullscreen></iframe>
|
||||||
|
<figcaption>
|
||||||
|
<a href="https://maps.google.com" title="Google Maps">
|
||||||
|
<svg class="fa-maps">
|
||||||
|
<use xlink:href="#fa-maps"></use>
|
||||||
|
</svg>
|
||||||
|
Google Maps
|
||||||
|
</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<!-- end figure-->
|
||||||
|
<div class="flex-content">
|
||||||
|
<h2>
|
||||||
|
Discover London
|
||||||
|
</h2>
|
||||||
|
<p>.card-50.bg-white</p>
|
||||||
|
<ul class="description">
|
||||||
|
<li>
|
||||||
|
<strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
|
||||||
|
</li>
|
||||||
|
<li><strong title="Population">Population:</strong> 8,673,713</li>
|
||||||
|
<li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- end .flex-content-->
|
||||||
|
</div>
|
||||||
|
<!-- end .card-50-->
|
||||||
|
</div>
|
||||||
|
<!-- .end .wrap -->
|
||||||
|
</section>
|
||||||
<section class="fullscreen">
|
<section class="fullscreen">
|
||||||
<div class="card-50">
|
<div class="card-50">
|
||||||
<figure>
|
<figure>
|
||||||
@@ -1934,9 +1934,11 @@
|
|||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides();
|
window.ws = new WebSlides();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
|
||||||
|
|||||||
@@ -185,12 +185,12 @@
|
|||||||
<li><a target="_blank" href="#slide=101">Background Videos</a></li>
|
<li><a target="_blank" href="#slide=101">Background Videos</a></li>
|
||||||
<li><a target="_blank" href="#slide=103">Embedding videos, charts...</a></li>
|
<li><a target="_blank" href="#slide=103">Embedding videos, charts...</a></li>
|
||||||
<li><a target="_blank" href="#slide=108">Maps</a></li>
|
<li><a target="_blank" href="#slide=108">Maps</a></li>
|
||||||
<li><a target="_blank" href="#slide=109">500+ SVG Icons</a></li>
|
<li><a target="_blank" href="#slide=110">500+ SVG Icons</a></li>
|
||||||
<li><a target="_blank" href="#slide=110">Logos</a></li>
|
<li><a target="_blank" href="#slide=111">Logos</a></li>
|
||||||
<li><a target="_blank" href="#slide=111">Avatars</a></li>
|
<li><a target="_blank" href="#slide=112">Avatars</a></li>
|
||||||
<li><a target="_blank" href="#slide=112">Devices</a></li>
|
<li><a target="_blank" href="#slide=113">Devices</a></li>
|
||||||
<li><a target="_blank" href="#slide=113">Screenshots</a></li>
|
<li><a target="_blank" href="#slide=114">Screenshots</a></li>
|
||||||
<li><a target="_blank" href="#slide=114">CSS Animations</a></li>
|
<li><a target="_blank" href="#slide=115">CSS Animations</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@@ -2873,6 +2873,43 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</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 Alcázar 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>
|
<section>
|
||||||
<div class="wrap size-50">
|
<div class="wrap size-50">
|
||||||
<p class="text-subtitle">Optional · 500+ icons</p>
|
<p class="text-subtitle">Optional · 500+ icons</p>
|
||||||
@@ -3069,33 +3106,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
<section>
|
|
||||||
<div class="wrap size-60">
|
|
||||||
<h3>WebSlides is clean, consistent, and <strong>extensible</strong>.</h3>
|
|
||||||
<p>If you want to add more animations, videos...</p>
|
|
||||||
<ul class="flexblock border blink">
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/daneden/animate.css/" title="Animate.css">
|
|
||||||
<h2>Animate.css</h2>
|
|
||||||
Highly recommended. It is so easy and cool.
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
|
|
||||||
<h2>particles.js</h2>
|
|
||||||
A lightweight .js library for creating particles.
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://pixabay.com/en/videos" title="Pixabay">
|
|
||||||
<h2>Pixabay</h2>
|
|
||||||
Beautiful background videos. 100% license free.
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!-- .end .wrap -->
|
|
||||||
</section>
|
|
||||||
<section class="aligncenter">
|
<section class="aligncenter">
|
||||||
<!-- .wrap = container (width: 90%) -->
|
<!-- .wrap = container (width: 90%) -->
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
@@ -3127,6 +3137,7 @@
|
|||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides();
|
window.ws = new WebSlides();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -159,13 +159,24 @@
|
|||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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>
|
<li>
|
||||||
<a href="../demos/longforms.html" title="Longform Articles">
|
<a href="../demos/longforms.html" title="Longform Articles">
|
||||||
<figure>
|
<figure>
|
||||||
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
|
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
<h2>Longforms</h2>
|
<h2>Longforms</h2>
|
||||||
<time datetime="2017-04-02T20:16:48-08:00">Mar 04, 2017</time>
|
<time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
@@ -176,7 +187,7 @@
|
|||||||
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
|
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
|
||||||
<figcaption>
|
<figcaption>
|
||||||
<h2>Interviews</h2>
|
<h2>Interviews</h2>
|
||||||
<time datetime="2017-04-04T24:08:16-24:32">Mar 03, 2017</time>
|
<time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -12,46 +12,66 @@
|
|||||||
https://github.com/webslides/webslides
|
https://github.com/webslides/webslides
|
||||||
|
|
||||||
Thanks!
|
Thanks!
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- SEO -->
|
<!-- SEO -->
|
||||||
<title>WebSlides Demo: Longform Interviews</title>
|
<title>WebSlides Demo: Longform Interviews</title>
|
||||||
<meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
|
<meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
|
||||||
|
|
||||||
<!-- URL CANONICAL -->
|
<!-- URL CANONICAL -->
|
||||||
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- 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">
|
<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 -->
|
<!-- CSS Base -->
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
|
||||||
|
|
||||||
<!-- CSS Colors -->
|
<!-- CSS Colors -->
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
|
||||||
|
|
||||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
||||||
|
|
||||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||||
|
|
||||||
<!-- FACEBOOK -->
|
<!-- FACEBOOK -->
|
||||||
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
|
<meta property="og:url" content="http://your-url.com/permalink">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
<meta property="og:type" content="article">
|
<meta property="og:type" content="article">
|
||||||
<meta property="og:title" content="WebSlides Demo: Longform Interviews" /> <!-- EDIT -->
|
<meta property="og:title" content="WebSlides Demo: Longform Interviews" />
|
||||||
<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 -->
|
<!-- EDIT -->
|
||||||
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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:width" content="800">
|
||||||
<meta property="og:image:height" content="429">
|
<meta property="og:image:height" content="429">
|
||||||
|
|
||||||
<!-- TWITTER -->
|
<!-- TWITTER -->
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
|
<meta name="twitter:site" content="@webslides">
|
||||||
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
|
|
||||||
<meta name="twitter:title" content="WebSlides Demo: Longform Interviews"> <!-- EDIT -->
|
<!-- EDIT -->
|
||||||
<meta name="twitter:description" content="Create longform interviews with ease. Just the essentials."> <!-- EDIT -->
|
<meta name="twitter:creator" content="@jlantunez">
|
||||||
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
|
|
||||||
|
<!-- 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 -->
|
<!-- FAVICONS -->
|
||||||
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
||||||
@@ -65,6 +85,7 @@
|
|||||||
<!-- Android -->
|
<!-- Android -->
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="theme-color" content="#333333">
|
<meta name="theme-color" content="#333333">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
@@ -218,7 +239,7 @@
|
|||||||
</dd>
|
</dd>
|
||||||
<dt>Sheryl:</dt>
|
<dt>Sheryl:</dt>
|
||||||
<dd>
|
<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>
|
<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>
|
||||||
<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>
|
<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>
|
||||||
@@ -226,7 +247,7 @@
|
|||||||
<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>
|
<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>
|
</dd>
|
||||||
</dl>
|
</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>
|
<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>
|
<hr>
|
||||||
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
|
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
|
||||||
@@ -262,6 +283,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
<!--main-->
|
<!--main-->
|
||||||
|
|||||||
@@ -849,6 +849,7 @@
|
|||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides();
|
window.ws = new WebSlides();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1924,11 +1924,13 @@
|
|||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides();
|
window.ws = new WebSlides();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
https://github.com/webslides/webslides
|
https://github.com/webslides/webslides
|
||||||
|
|
||||||
Thanks!
|
Thanks!
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- SEO -->
|
<!-- SEO -->
|
||||||
<title>WebSlides Demo: Longforms</title>
|
<title>WebSlides Demo: Longforms</title>
|
||||||
@@ -20,38 +20,58 @@
|
|||||||
|
|
||||||
<!-- URL CANONICAL -->
|
<!-- URL CANONICAL -->
|
||||||
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- 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">
|
<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 -->
|
<!-- CSS Base -->
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
|
||||||
|
|
||||||
<!-- CSS Colors -->
|
<!-- CSS Colors -->
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
|
||||||
|
|
||||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
||||||
|
|
||||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||||
|
|
||||||
<!-- FACEBOOK -->
|
<!-- FACEBOOK -->
|
||||||
<meta property="og:url" content="https://webslides.tv/demos/why-webslides"> <!-- EDIT -->
|
<meta property="og:url" content="https://webslides.tv/demos/why-webslides">
|
||||||
|
|
||||||
|
<!-- EDIT -->
|
||||||
<meta property="og:type" content="article">
|
<meta property="og:type" content="article">
|
||||||
<meta property="og:title" content="WebSlides Demo: Longforms" /> <!-- EDIT -->
|
<meta property="og:title" content="WebSlides Demo: Longforms" />
|
||||||
<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 -->
|
<!-- EDIT -->
|
||||||
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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:width" content="800">
|
||||||
<meta property="og:image:height" content="429">
|
<meta property="og:image:height" content="429">
|
||||||
|
|
||||||
<!-- TWITTER -->
|
<!-- TWITTER -->
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
|
<meta name="twitter:site" content="@webslides">
|
||||||
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
|
|
||||||
<meta name="twitter:title" content="WebSlides Demo: Longforms"> <!-- EDIT -->
|
<!-- EDIT -->
|
||||||
<meta name="twitter:description" content="Create longform articles with ease. Just the essentials."> <!-- EDIT -->
|
<meta name="twitter:creator" content="@jlantunez">
|
||||||
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
|
|
||||||
|
<!-- 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 -->
|
<!-- FAVICONS -->
|
||||||
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
||||||
@@ -65,6 +85,7 @@
|
|||||||
<!-- Android -->
|
<!-- Android -->
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="theme-color" content="#333333">
|
<meta name="theme-color" content="#333333">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
@@ -91,10 +112,8 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main role="main">
|
<main role="main">
|
||||||
<article>
|
<article>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||||||
<span class="background-bottom" style="background-image:url('https://webslides.tv/static/images/nyc.jpg')"></span>
|
<span class="background-bottom" style="background-image:url('https://webslides.tv/static/images/nyc.jpg')"></span>
|
||||||
@@ -120,7 +139,7 @@
|
|||||||
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
|
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
|
||||||
<div class="wrap longform">
|
<div class="wrap longform">
|
||||||
<h2><strong>The Art of Storytelling</strong></h2>
|
<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> Nov 16th, 2032.</p>
|
<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">
|
<p class="text-intro">
|
||||||
WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
|
WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
|
||||||
</p>
|
</p>
|
||||||
@@ -303,9 +322,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
<!--main-->
|
<!--main-->
|
||||||
|
|
||||||
<footer role="contentinfo">
|
<footer role="contentinfo">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
@@ -374,6 +395,6 @@
|
|||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
171
demos/media.html
171
demos/media.html
@@ -12,8 +12,8 @@
|
|||||||
https://github.com/webslides/webslides
|
https://github.com/webslides/webslides
|
||||||
|
|
||||||
Thanks!
|
Thanks!
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- SEO -->
|
<!-- SEO -->
|
||||||
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
|
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
|
||||||
<meta name="description" content="How to embed images, videos, and maps in your presentation.">
|
<meta name="description" content="How to embed images, videos, and maps in your presentation.">
|
||||||
@@ -48,6 +48,7 @@
|
|||||||
|
|
||||||
<!-- EDIT -->
|
<!-- EDIT -->
|
||||||
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
||||||
|
|
||||||
<!-- EDIT -->
|
<!-- EDIT -->
|
||||||
|
|
||||||
<!-- TWITTER -->
|
<!-- TWITTER -->
|
||||||
@@ -107,15 +108,16 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main role="main">
|
<main role="main">
|
||||||
<article id="webslides">
|
<article id="webslides">
|
||||||
|
|
||||||
<!-- Quick Guide
|
<!-- Quick Guide
|
||||||
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||||||
- Vertical sliding = <article id="webslides" class="vertical">
|
- Vertical sliding = <article id="webslides" class="vertical">
|
||||||
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<section class="bg-black-blue aligncenter">
|
<section class="bg-black-blue aligncenter">
|
||||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
|
||||||
<!--.wrap = container (width: 90%) -->
|
<!--.wrap = container (width: 90%) -->
|
||||||
@@ -160,7 +162,7 @@
|
|||||||
<h3><a target="_blank" href="#slide=17">Videos</a></h3>
|
<h3><a target="_blank" href="#slide=17">Videos</a></h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
|
<li><a target="_blank" href="#slide=18">Background Videos (hosted & overlay)</a></li>
|
||||||
<li><a target="_blank" href="#slide=22">Embed YouTube videos</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=24">Fullscreen YouTube videos</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
|
<a target="_blank" href="#slide=26"><strong>YouTube API:</strong></a>
|
||||||
@@ -179,8 +181,8 @@
|
|||||||
<h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
|
<h3><a target="_blank" href="#slide=34">Maps & Charts</a></h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li><a target="_blank" href="#slide=35">Embedding maps</a></li>
|
<li><a target="_blank" href="#slide=35">Embedding maps</a></li>
|
||||||
<li><a target="_blank" href="#slide=36">Fullscreen 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 map with frame</a></li>
|
<li><a target="_blank" href="#slide=37">Fullscreen maps</a></li>
|
||||||
<li><a target="_blank" href="#slide=38">Embedding charts</a></li>
|
<li><a target="_blank" href="#slide=38">Embedding charts</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
@@ -602,7 +604,7 @@
|
|||||||
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
|
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
|
||||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<div class="wrap size-60">
|
<div class="wrap size-60">
|
||||||
@@ -621,17 +623,17 @@
|
|||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
<section class="fullscreen bg-blue aligncenter">
|
<section class="fullscreen bg-blue aligncenter">
|
||||||
<div class="embed dark">
|
<div class="embed dark">
|
||||||
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
||||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .embed -->
|
<!-- .end .embed -->
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<h2><strong>Muted</strong></h2>
|
<h2><strong>Muted</strong></h2>
|
||||||
<p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
|
<p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
@@ -688,45 +690,54 @@
|
|||||||
<!-- .end .embed -->
|
<!-- .end .embed -->
|
||||||
</section>
|
</section>
|
||||||
<section class="frame">
|
<section class="frame">
|
||||||
<p class="aligncenter"><svg class="fa-thumbs-up large">
|
<p class="aligncenter">
|
||||||
<use xlink:href="#fa-thumbs-up"></use>
|
<svg class="fa-thumbs-up large">
|
||||||
</svg></p>
|
<use xlink:href="#fa-thumbs-up"></use>
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
<div class="wrap size-60 bg-white">
|
<div class="wrap size-60 bg-white">
|
||||||
<h3><a href="https://developers.google.com/youtube"><svg class="fa-youtube">
|
<h3>
|
||||||
<use xlink:href="#fa-youtube"></use>
|
<a href="https://developers.google.com/youtube">
|
||||||
</svg> YouTube API</a></h3>
|
<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 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>
|
<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>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<h3><svg class="fa-youtube">
|
<h3>
|
||||||
|
<svg class="fa-youtube">
|
||||||
<use xlink:href="#fa-youtube"></use>
|
<use xlink:href="#fa-youtube"></use>
|
||||||
</svg>YouTube API Parameters</h3>
|
</svg>
|
||||||
<p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
|
YouTube API Parameters
|
||||||
<hr>
|
</h3>
|
||||||
<div class="grid">
|
<p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
|
||||||
<div class="column">
|
<hr>
|
||||||
<pre><div class="embed">
|
<div class="grid">
|
||||||
|
<div class="column">
|
||||||
|
<pre><div class="embed">
|
||||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
|
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
|
||||||
</div></strong>
|
</div></strong>
|
||||||
</div></pre>
|
</div></pre>
|
||||||
<p>autoplay + loop</p>
|
<p>autoplay + loop</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .column -->
|
<!-- .end .column -->
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<pre><div class="embed">
|
<pre><div class="embed">
|
||||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
|
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
|
||||||
</div></strong>
|
</div></strong>
|
||||||
</div></pre>
|
</div></pre>
|
||||||
<p>autoplay + mute + no controls.</p>
|
<p>autoplay + mute + no controls.</p>
|
||||||
|
</div>
|
||||||
|
<!-- .end .column -->
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .column -->
|
<!-- .end .grid -->
|
||||||
</div>
|
|
||||||
<!-- .end .grid -->
|
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
@@ -754,9 +765,12 @@
|
|||||||
</section>
|
</section>
|
||||||
<section class="frame">
|
<section class="frame">
|
||||||
<div class="wrap size-60 bg-white">
|
<div class="wrap size-60 bg-white">
|
||||||
<h3><svg class="fa-info-circle large">
|
<h3>
|
||||||
|
<svg class="fa-info-circle large">
|
||||||
<use xlink:href="#fa-info-circle"></use>
|
<use xlink:href="#fa-info-circle"></use>
|
||||||
</svg> <strong>Autoplay Feature</strong></h3>
|
</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>
|
<p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
@@ -765,14 +779,14 @@
|
|||||||
<div class="wrap size-70">
|
<div class="wrap size-70">
|
||||||
<h3><strong>Let's make some magic with the YouTube API</strong></h3>
|
<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>
|
<p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
|
||||||
<hr>
|
<hr>
|
||||||
<pre><strong><section class="fullscreen"></strong>
|
<pre><strong><section class="fullscreen"></strong>
|
||||||
<div class="embed">
|
<div class="embed">
|
||||||
<div data-youtube data-youtube-id="dmkwb2KfLW8" <strong>data-autoplay data-loop data-no-controls</strong></div>
|
<div data-youtube data-youtube-id="dmkwb2KfLW8" <strong>data-autoplay data-loop data-no-controls</strong></div>
|
||||||
</div>
|
</div>
|
||||||
<strong></section></strong>
|
<strong></section></strong>
|
||||||
</pre>
|
</pre>
|
||||||
<p>The video will automatically play when the slide is loaded.</p>
|
<p>The video will automatically play when the slide is loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
@@ -787,14 +801,14 @@
|
|||||||
<div class="wrap size-70">
|
<div class="wrap size-70">
|
||||||
<h3><strong>Fullscreen YouTube video background</strong></h3>
|
<h3><strong>Fullscreen YouTube video background</strong></h3>
|
||||||
<p>Overlaying a transparent background on an embedded Youtube video:</p>
|
<p>Overlaying a transparent background on an embedded Youtube video:</p>
|
||||||
<hr>
|
<hr>
|
||||||
<pre><strong><section class="fullscreen bg-black"></strong>
|
<pre><strong><section class="fullscreen bg-black"></strong>
|
||||||
<div class="embed dark">
|
<div class="embed dark">
|
||||||
<div data-youtube data-youtube-id="c9psfOxJysw" <strong>data-autoplay data-loop data-mute data-no-controls</strong></div>
|
<div data-youtube data-youtube-id="c9psfOxJysw" <strong>data-autoplay data-loop data-mute data-no-controls</strong></div>
|
||||||
</div>
|
</div>
|
||||||
<strong></section></strong>
|
<strong></section></strong>
|
||||||
</pre>
|
</pre>
|
||||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
@@ -818,7 +832,7 @@
|
|||||||
<use xlink:href="#fa-map"></use>
|
<use xlink:href="#fa-map"></use>
|
||||||
</svg>
|
</svg>
|
||||||
Maps & Charts
|
Maps & Charts
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
@@ -832,15 +846,46 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</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">
|
<section class="fullscreen">
|
||||||
<div class="embed">
|
<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="600" height="450" allowfullscreen></iframe>
|
<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 class="fullscreen frame">
|
|
||||||
<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="600" height="450" allowfullscreen></iframe>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- .end .embed -->
|
<!-- .end .embed -->
|
||||||
</section>
|
</section>
|
||||||
@@ -850,7 +895,8 @@
|
|||||||
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
||||||
<div class="embed">
|
<div class="embed">
|
||||||
<!-- I love Quartz's charts -->
|
<!-- 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 class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div>
|
||||||
|
<script src="https://www.theatlas.com/javascripts/atlas.js"></script>
|
||||||
</div>
|
</div>
|
||||||
<!-- end .embed -->
|
<!-- end .embed -->
|
||||||
</div>
|
</div>
|
||||||
@@ -862,7 +908,7 @@
|
|||||||
<h2><strong>Start in seconds</strong></h2>
|
<h2><strong>Start in seconds</strong></h2>
|
||||||
<p class="text-intro">120+ prebuilt slides ready to use.</p>
|
<p class="text-intro">120+ prebuilt slides ready to use.</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
|
<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">
|
<svg class="fa-cloud-download">
|
||||||
<use xlink:href="#fa-cloud-download"></use>
|
<use xlink:href="#fa-cloud-download"></use>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -880,23 +926,24 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- .end .wrap -->
|
<!-- .end .wrap -->
|
||||||
</section>
|
</section>
|
||||||
<section class="aligncenter">
|
<section class="bg-primary aligncenter">
|
||||||
<h2 class="text-emoji zoomIn"><strong>😘</strong></h2>
|
<h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
|
||||||
<p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
|
<h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
<!--main-->
|
<!--main-->
|
||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
|
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides();
|
window.ws = new WebSlides();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||||
<script defer src="../static/js/svg-icons.js"></script>
|
<script defer src="../static/js/svg-icons.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
391
demos/netflix-culture.html
Normal file
391
demos/netflix-culture.html
Normal file
@@ -0,0 +1,391 @@
|
|||||||
|
<!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/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">
|
||||||
|
|
||||||
|
<!-- 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="https://webslides.tv" 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>
|
||||||
@@ -431,7 +431,7 @@
|
|||||||
<section class="aligncenter">
|
<section class="aligncenter">
|
||||||
<div class="wrap size-50">
|
<div class="wrap size-50">
|
||||||
<figure class="browser">
|
<figure class="browser">
|
||||||
<a href="#" title="Title"><img src="../static/images/cover-apple.jpg" alt="Screenshot"></a>
|
<a href="#" title="Title"><img src="https://webslides.tv/static/images/cover-apple.jpg" alt="Screenshot"></a>
|
||||||
</figure>
|
</figure>
|
||||||
<p>HTML/CSS Browser: <code>.browser</code></p>
|
<p>HTML/CSS Browser: <code>.browser</code></p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1865,6 +1865,7 @@
|
|||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides();
|
window.ws = new WebSlides();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en-US" prefix="og: http://ogp.me/ns#">
|
<html lang="en" prefix="og: http://ogp.me/ns#">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
@@ -339,6 +339,7 @@
|
|||||||
|
|
||||||
<!-- Required -->
|
<!-- Required -->
|
||||||
<script src="../static/js/webslides.js"></script>
|
<script src="../static/js/webslides.js"></script>
|
||||||
|
|
||||||
<!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
|
<!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
|
||||||
<script>
|
<script>
|
||||||
window.ws = new WebSlides({ autoslide: 5000 });
|
window.ws = new WebSlides({ autoslide: 5000 });
|
||||||
|
|||||||
Reference in New Issue
Block a user