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>
|
||||
<!-- .end .wrap -->
|
||||
</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>
|
||||
<div class="wrap">
|
||||
<div class="card-50 bg-white">
|
||||
@@ -589,6 +552,43 @@
|
||||
</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!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">
|
||||
<div class="card-50">
|
||||
<figure>
|
||||
@@ -1934,9 +1934,11 @@
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
@@ -185,12 +185,12 @@
|
||||
<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=108">Maps</a></li>
|
||||
<li><a target="_blank" href="#slide=109">500+ SVG Icons</a></li>
|
||||
<li><a target="_blank" href="#slide=110">Logos</a></li>
|
||||
<li><a target="_blank" href="#slide=111">Avatars</a></li>
|
||||
<li><a target="_blank" href="#slide=112">Devices</a></li>
|
||||
<li><a target="_blank" href="#slide=113">Screenshots</a></li>
|
||||
<li><a target="_blank" href="#slide=114">CSS Animations</a></li>
|
||||
<li><a target="_blank" href="#slide=110">500+ SVG Icons</a></li>
|
||||
<li><a target="_blank" href="#slide=111">Logos</a></li>
|
||||
<li><a target="_blank" href="#slide=112">Avatars</a></li>
|
||||
<li><a target="_blank" href="#slide=113">Devices</a></li>
|
||||
<li><a target="_blank" href="#slide=114">Screenshots</a></li>
|
||||
<li><a target="_blank" href="#slide=115">CSS Animations</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
@@ -2873,6 +2873,43 @@
|
||||
</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 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>
|
||||
<div class="wrap size-50">
|
||||
<p class="text-subtitle">Optional · 500+ icons</p>
|
||||
@@ -3069,33 +3106,6 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</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">
|
||||
<!-- .wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
@@ -3127,6 +3137,7 @@
|
||||
|
||||
<!-- Required -->
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<script>
|
||||
window.ws = new WebSlides();
|
||||
</script>
|
||||
|
||||
@@ -159,13 +159,24 @@
|
||||
</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-02T20:16:48-08:00">Mar 04, 2017</time>
|
||||
<time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
@@ -176,7 +187,7 @@
|
||||
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
|
||||
<figcaption>
|
||||
<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>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
@@ -36,22 +36,42 @@
|
||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||
|
||||
<!-- 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: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: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 -->
|
||||
<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">
|
||||
@@ -65,6 +85,7 @@
|
||||
<!-- Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#333333">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header role="banner">
|
||||
@@ -262,6 +283,7 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
@@ -849,6 +849,7 @@
|
||||
|
||||
<!-- Required -->
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<script>
|
||||
window.ws = new WebSlides();
|
||||
</script>
|
||||
|
||||
@@ -1924,11 +1924,13 @@
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -36,22 +36,42 @@
|
||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||
|
||||
<!-- 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: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: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 -->
|
||||
<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">
|
||||
@@ -65,6 +85,7 @@
|
||||
<!-- Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#333333">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header role="banner">
|
||||
@@ -91,10 +112,8 @@
|
||||
</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>
|
||||
@@ -120,7 +139,7 @@
|
||||
<!--.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> 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">
|
||||
WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
|
||||
</p>
|
||||
@@ -303,9 +322,11 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
<footer role="contentinfo">
|
||||
<div class="wrap">
|
||||
<div class="grid">
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
|
||||
<!-- EDIT -->
|
||||
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
||||
|
||||
<!-- EDIT -->
|
||||
|
||||
<!-- TWITTER -->
|
||||
@@ -107,6 +108,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
<article id="webslides">
|
||||
|
||||
@@ -160,7 +162,7 @@
|
||||
<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">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=26"><strong>YouTube API:</strong></a>
|
||||
@@ -179,8 +181,8 @@
|
||||
<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">Fullscreen maps</a></li>
|
||||
<li><a target="_blank" href="#slide=37">Fullscreen map with frame</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>
|
||||
@@ -688,24 +690,33 @@
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section class="frame">
|
||||
<p class="aligncenter"><svg class="fa-thumbs-up large">
|
||||
<p class="aligncenter">
|
||||
<svg class="fa-thumbs-up large">
|
||||
<use xlink:href="#fa-thumbs-up"></use>
|
||||
</svg></p>
|
||||
</svg>
|
||||
</p>
|
||||
<div class="wrap size-60 bg-white">
|
||||
<h3><a href="https://developers.google.com/youtube"><svg class="fa-youtube">
|
||||
<h3>
|
||||
<a href="https://developers.google.com/youtube">
|
||||
<svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg> YouTube API</a></h3>
|
||||
</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">
|
||||
<h3>
|
||||
<svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg>YouTube API Parameters</h3>
|
||||
</svg>
|
||||
YouTube API Parameters
|
||||
</h3>
|
||||
<p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
|
||||
<hr>
|
||||
<div class="grid">
|
||||
@@ -754,9 +765,12 @@
|
||||
</section>
|
||||
<section class="frame">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
@@ -832,15 +846,46 @@
|
||||
</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="600" height="450" 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>
|
||||
<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>
|
||||
@@ -850,7 +895,8 @@
|
||||
<!-- 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 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>
|
||||
@@ -862,7 +908,7 @@
|
||||
<h2><strong>Start in seconds</strong></h2>
|
||||
<p class="text-intro">120+ prebuilt slides ready to use.</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">
|
||||
<use xlink:href="#fa-cloud-download"></use>
|
||||
</svg>
|
||||
@@ -880,17 +926,18 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<h2 class="text-emoji zoomIn"><strong>😘</strong></h2>
|
||||
<p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
|
||||
<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>
|
||||
|
||||
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">
|
||||
<div class="wrap size-50">
|
||||
<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>
|
||||
<p>HTML/CSS Browser: <code>.browser</code></p>
|
||||
</div>
|
||||
@@ -1865,6 +1865,7 @@
|
||||
|
||||
<!-- Required -->
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<script>
|
||||
window.ws = new WebSlides();
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en-US" prefix="og: http://ogp.me/ns#">
|
||||
<html lang="en" prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -339,6 +339,7 @@
|
||||
|
||||
<!-- 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 });
|
||||
|
||||
Reference in New Issue
Block a user