mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-16 18:14:09 +02:00
Code Issues Releases Wiki Activity

Fixing demos styles path

Browse Source
This commit is contained in:
Luis
2017-07-17 10:21:05 +02:00
parent 5456109a97
commit 5226ab189b
10 changed files with 141 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demos/classes.html
View File

@@ -25,10 +25,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- 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/webslides.css">
<!-- CSS Colors -->
<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">
@@ -1934,11 +1931,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>

5
demos/index.html
View File

@@ -26,10 +26,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- 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/webslides.css">
<!-- CSS Colors -->
<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">

67
demos/interviews.html
View File

@@ -3,76 +3,73 @@
<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">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
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&amp;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&amp;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/webslides.css">
<!-- CSS Colors -->
<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"> <meta property="og:url" content="http://your-url.com/permalink">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
<meta property="og:title" content="WebSlides Demo: Longform Interviews" /> <meta property="og:title" content="WebSlides Demo: Longform Interviews" />
<!-- EDIT --> <!-- EDIT -->
<meta property="og:description" content="Create longform interviews with ease. Just the essentials."> <meta property="og:description" content="Create longform interviews with ease. Just the essentials.">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:updated_time" content="2017-03-28T12:17:24"> <meta property="og:updated_time" content="2017-03-28T12:17:24">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT --> <!-- 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"> <meta name="twitter:site" content="@webslides">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <meta name="twitter:creator" content="@jlantunez">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides Demo: Longform Interviews"> <meta name="twitter:title" content="WebSlides Demo: Longform Interviews">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:description" content="Create longform interviews with ease. Just the essentials."> <meta name="twitter:description" content="Create longform interviews with ease. Just the essentials.">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <meta name="twitter:image" content="../static/images/share-webslides.jpg">
<!-- EDIT --> <!-- 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">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -81,11 +78,11 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- 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">
@@ -112,10 +109,10 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article> <article>
<section class="bg-black"> <section class="bg-black">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light --> <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span> <span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span>
@@ -283,11 +280,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">
@@ -353,9 +350,9 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</footer> </footer>
<!-- 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>

7
demos/keynote.html
View File

@@ -25,10 +25,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- 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/webslides.css">
<!-- CSS Colors -->
<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">
@@ -849,7 +846,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>

9
demos/landings.html
View File

@@ -25,10 +25,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- 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/webslides.css">
<!-- CSS Colors -->
<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">
@@ -1924,13 +1921,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>

63
demos/longforms.html
View File

@@ -3,76 +3,73 @@
<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">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides https://github.com/webslides/webslides
Thanks! Thanks!
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Demo: Longforms</title> <title>WebSlides Demo: Longforms</title>
<meta name="description" content="WebSlides is about telling stories. Create longform articles with ease."> <meta name="description" content="WebSlides is about telling stories. Create longform articles 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&amp;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&amp;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/webslides.css">
<!-- CSS Colors -->
<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"> <meta property="og:url" content="https://webslides.tv/demos/why-webslides">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
<meta property="og:title" content="WebSlides Demo: Longforms" /> <meta property="og:title" content="WebSlides Demo: Longforms" />
<!-- EDIT --> <!-- EDIT -->
<meta property="og:description" content="Create longform articles with ease. Just the essentials."> <meta property="og:description" content="Create longform articles with ease. Just the essentials.">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:updated_time" content="2017-03-28T18:24:48"> <meta property="og:updated_time" content="2017-03-28T18:24:48">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT --> <!-- 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"> <meta name="twitter:site" content="@webslides">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <meta name="twitter:creator" content="@jlantunez">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides Demo: Longforms"> <meta name="twitter:title" content="WebSlides Demo: Longforms">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:description" content="Create longform articles with ease. Just the essentials."> <meta name="twitter:description" content="Create longform articles with ease. Just the essentials.">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <meta name="twitter:image" content="../static/images/share-webslides.jpg">
<!-- EDIT --> <!-- 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">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -81,11 +78,11 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- 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">
@@ -340,11 +337,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">
@@ -410,9 +407,9 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</footer> </footer>
<!-- 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>

79
demos/media.html
View File

@@ -3,72 +3,69 @@
<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">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
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.">
<!-- 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&amp;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&amp;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/webslides.css">
<!-- CSS Colors -->
<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="/" /> <meta property="og:url" content="/" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:title" content="WebSlides Tutorial: Media" /> <meta property="og:title" content="WebSlides Tutorial: Media" />
<!-- EDIT --> <!-- EDIT -->
<meta property="og:description" content="How to embed images, videos, and maps in your presentation."> <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:25:31"> <meta property="og:updated_time" content="2017-01-04T17:25:31">
<!-- 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 -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <meta name="twitter:site" content="@webslides">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <meta name="twitter:creator" content="@jlantunez">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides Tutorial: Media"> <meta name="twitter:title" content="WebSlides Tutorial: Media">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:description" content="How to embed images, videos, and maps in your presentation."> <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <meta name="twitter:image" content="../static/images/share-webslides.jpg">
<!-- EDIT --> <!-- 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">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -77,11 +74,11 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- 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">
@@ -108,16 +105,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%) -->
@@ -724,7 +721,7 @@
<div class="grid"> <div class="grid">
<div class="column"> <div class="column">
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
<strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt; <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
&lt;/div&gt;</strong> &lt;/div&gt;</strong>
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p>autoplay + loop</p> <p>autoplay + loop</p>
@@ -732,7 +729,7 @@
<!-- .end .column --> <!-- .end .column -->
<div class="column"> <div class="column">
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
<strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt; <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
&lt;/div&gt;</strong> &lt;/div&gt;</strong>
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p>autoplay + mute + no controls.</p> <p>autoplay + mute + no controls.</p>
@@ -749,7 +746,7 @@
<h3>YouTube API</h3> <h3>YouTube API</h3>
<p><code>autoplay + loop</code></p> <p><code>autoplay + loop</code></p>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt; &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
</div> </div>
@@ -876,7 +873,7 @@
<li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li> <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
</ul> </ul>
<p> <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. 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> </p>
</div> </div>
<!-- end .flex-content--> <!-- end .flex-content-->
@@ -887,7 +884,7 @@
</section> </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="800" height="600" 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> </div>
<!-- .end .embed --> <!-- .end .embed -->
</section> </section>
@@ -932,20 +929,20 @@
<h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2> <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> <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>

59
demos/netflix-culture.html
View File

@@ -3,47 +3,44 @@
<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">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides https://github.com/webslides/webslides
Thanks! Thanks!
--> -->
<!-- SEO --> <!-- SEO -->
<title>Netflix's Culture &middot; WebSlides</title> <title>Netflix's Culture &middot; WebSlides</title>
<meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley."> <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 --> <!-- 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&amp;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&amp;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/webslides.css">
<!-- CSS Colors -->
<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 -->
<!-- EDIT --> <!-- EDIT -->
<meta property="og:url" content="http://your-url.com/permalink"> <meta property="og:url" content="http://your-url.com/permalink">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
<meta property="og:title" content="WebSlides: Netflix's Culture" /> <meta property="og:title" content="WebSlides: Netflix's Culture" />
<meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage."> <meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:updated_time" content="2017-04-16T16:24:56"> <meta property="og:updated_time" content="2017-04-16T16:24:56">
<!-- EDIT --> <!-- EDIT -->
@@ -51,11 +48,11 @@
<!-- EDIT --> <!-- 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"> <meta name="twitter:site" content="@webslides">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <meta name="twitter:creator" content="@jlantunez">
<!-- EDIT --> <!-- EDIT -->
@@ -64,9 +61,9 @@
<meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage."> <meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <meta name="twitter:image" content="../static/images/share-webslides.jpg">
<!-- EDIT --> <!-- 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">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -75,12 +72,12 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- 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">
<nav role="navigation"> <nav role="navigation">
@@ -106,16 +103,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-red"> <section class="bg-red">
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
<!--.wrap = container (width: 90%) --> <!--.wrap = container (width: 90%) -->
@@ -365,11 +362,11 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<footer> <footer>
<div class="wrap"> <div class="wrap">
<p> <p>
@@ -377,15 +374,15 @@
</p> </p>
</div> </div>
</footer> </footer>
<!-- 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> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); --> </script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
<!-- 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>

7
demos/portfolios.html
View File

@@ -25,10 +25,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- 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/webslides.css">
<!-- CSS Colors -->
<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">
@@ -1865,7 +1862,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>

7
demos/why-webslides.html
View File

@@ -25,10 +25,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- 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/webslides.css">
<!-- CSS Colors -->
<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">
@@ -341,7 +338,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 });