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

Updating templates and releasing the dist

Browse Source
This commit is contained in:
Antonio Laguna
2017-01-30 15:59:20 +01:00
parent 62ffaf95d6
commit 585ab60b43
14 changed files with 4651 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
demos/classes.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Tutorial: Classes</title> <title>WebSlides Tutorial: Classes</title>
<meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples."> <meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples.">
<!-- 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/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" /> <!-- YOUR URL/PERMALINK --> <meta property="og:url" content="http://your-url.com/permalink" /> <!-- YOUR URL/PERMALINK -->
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
@@ -43,7 +43,7 @@
<meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT --> <meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:23:46"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:23:46"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Documentation: Classes"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Documentation: Classes"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- 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">
<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">
@@ -60,7 +60,7 @@
<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">
@@ -90,16 +90,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 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-black-blue aligncenter"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container 1200px with fadein animation -->
@@ -1928,17 +1928,17 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script>
<script src="../dist/webslides.js"></script>
<script>
window.ws = new WebSlides();
</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>

75
demos/components.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Documentation: Components</title> <title>WebSlides Documentation: Components</title>
<meta name="description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <meta name="description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples.">
<!-- 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/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="/" /> <meta property="og:url" content="/" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
@@ -43,7 +43,7 @@
<meta property="og:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT --> <meta property="og:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:25:31"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:25:31"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Components"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Components"> <!-- EDIT -->
<meta name="twitter:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT --> <meta name="twitter:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- 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">
<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">
@@ -60,7 +60,7 @@
<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">
@@ -90,16 +90,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 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-black-blue aligncenter"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -303,7 +303,7 @@
<!--.wrap o <nav> = container 1200px --> <!--.wrap o <nav> = container 1200px -->
<div class="wrap"> <div class="wrap">
<p> <p>
<span class="alignleft"><a href="https://google.com" title="Google"><img src="../static/images/logos/google.svg" alt="Google"></a></span> <span class="alignleft"><a href="https://google.com" title="Google"><img src="../static/images/logos/google.svg" alt="Google"></a></span>
<span class="alignright"> <span class="alignright">
<a href="#" title="Twitter"> <a href="#" title="Twitter">
<svg class="fa-twitter"> <svg class="fa-twitter">
@@ -1984,7 +1984,7 @@
<li> Founded <li> Founded
<span>2040</span> <span>2040</span>
</li> </li>
<li> <li>
<span>120+</span> <span>120+</span>
Prebuilt Slides Prebuilt Slides
</li> </li>
@@ -2508,7 +2508,7 @@
<h2>Buttons</h2> <h2>Buttons</h2>
<p> <p>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
.button</a> .button</a>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
<svg class="fa-github"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
@@ -2527,7 +2527,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p> <p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p> <p>
<a href="#" class="badge-ios" title="Download iOS App"> <a href="#" class="badge-ios" title="Download iOS App">
iOS App</a> iOS App</a>
<a href="#" class="badge-android" title="Download Android App"> <a href="#" class="badge-android" title="Download Android App">
Android App</a> Android App</a>
</p> </p>
@@ -2817,7 +2817,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -2842,7 +2842,7 @@
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
@@ -2904,7 +2904,7 @@
<div class="wrap"> <div class="wrap">
<h2>Transparent Logos</h2> <h2>Transparent Logos</h2>
<p> <p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners. Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p> </p>
<hr> <hr>
<ul class="flexblock blink"> <ul class="flexblock blink">
@@ -2935,8 +2935,8 @@
<li class="bg-blue"> <li class="bg-blue">
<a href="" title="Block Link = .blink"> <a href="" title="Block Link = .blink">
<div> <div>
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix"> <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
<p><code>img.whitelogo</code></p> <p><code>img.whitelogo</code></p>
</div> </div>
</a> </a>
</li> </li>
@@ -3001,7 +3001,7 @@
</div> </div>
<!-- end .grid--> <!-- end .grid-->
</div> </div>
<!-- end .wrap--> <!-- end .wrap-->
</section> </section>
<section> <section>
<div class="wrap"> <div class="wrap">
@@ -3084,7 +3084,7 @@
<li> <li>
<a href="https://github.com/VincentGarreau/particles.js" title="particles.js"> <a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
<h2>particles.js</h2> <h2>particles.js</h2>
A lightweight .js library for creating particles. A lightweight .js library for creating particles.
</a> </a>
</li> </li>
<li> <li>
@@ -3121,17 +3121,18 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <script src="../dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="../static/js/webslides.js"></script> window.ws = new WebSlides();
</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>

49
demos/index.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Demos</title> <title>WebSlides Demos</title>
<meta name="description" content="Beautiful HTML presentations and websites made with WebSlides."> <meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
<!-- 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/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">
@@ -43,7 +43,7 @@
<meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT --> <meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Demos"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Demos"> <!-- EDIT -->
<meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT --> <meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- 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">
<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">
@@ -60,7 +60,7 @@
<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">
@@ -93,13 +93,13 @@
<main role="main"> <main role="main">
<article> <!-- Slideshow? id="webslides" --> <article> <!-- Slideshow? 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 1200px - <div class="wrap"> = container 1200px
--> -->
<section> <section>
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span> <span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -217,17 +217,18 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!-- end main --> <!-- end main -->
<!-- jQuery (required for slides to work) --> <script src="../dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="../static/js/webslides.js"></script> window.ws = new WebSlides();
</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>

57
demos/keynote.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Keynote: Make a Keynote presentation using HTML</title> <title>WebSlides Keynote: Make a Keynote presentation using HTML</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS."> <meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS.">
<!-- 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/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">
@@ -43,7 +43,7 @@
<meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT --> <meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="Make a Keynote presentation using HTML"> <!-- EDIT --> <meta name="twitter:title" content="Make a Keynote presentation using HTML"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT --> <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">
<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">
@@ -60,7 +60,7 @@
<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">
@@ -90,16 +90,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 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
<div class="wrap"> <div class="wrap">
@@ -473,7 +473,7 @@
<div class="wrap"> <div class="wrap">
<div class="content-right"> <div class="content-right">
<h2> <h2>
Redesigning Redesigning
<svg class="fa-apple"> <svg class="fa-apple">
<use xlink:href="#fa-apple"></use> <use xlink:href="#fa-apple"></use>
</svg> </svg>
@@ -530,7 +530,7 @@
<use xlink:href="#fa-globe"></use> <use xlink:href="#fa-globe"></use>
</svg> </svg>
<h2>Works with all major banks</h2> <h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels... Apple Pay is accepted in restaurants, hotels...
</div> </div>
</li> </li>
<li> <li>
@@ -739,7 +739,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -838,17 +838,18 @@
<p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p> <p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
<p class="text-symbols">* * *</p> <p class="text-symbols">* * *</p>
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <script src="../dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="../static/js/webslides.js"></script> window.ws = new WebSlides();
</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>

61
demos/landings.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Landings: Create your web presence easily</title> <title>WebSlides Landings: Create your web presence easily</title>
<meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use."> <meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use.">
<!-- 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/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">
@@ -43,7 +43,7 @@
<meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT --> <meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T16:54:27"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T16:54:27"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Landings: Create your web presence easily"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Landings: Create your web presence easily"> <!-- EDIT -->
<meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- 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">
<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">
@@ -60,7 +60,7 @@
<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">
@@ -92,13 +92,13 @@
</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 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
--> -->
<section class="bg-purple aligncenter"> <section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -371,7 +371,7 @@
<div class="alignright size-50 bg-trans-dark"> <div class="alignright size-50 bg-trans-dark">
<p class="text-subtitle text-serif">New in London</p> <p class="text-subtitle text-serif">New in London</p>
<h3><strong>Hotel Daenerys</strong></h3> <h3><strong>Hotel Daenerys</strong></h3>
<p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p> <p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p>
<p class="aligncenter"><a class="button" href="#">More info</a></p> <p class="aligncenter"><a class="button" href="#">More info</a></p>
</div> </div>
</div> </div>
@@ -1144,7 +1144,7 @@
<li> Founded <li> Founded
<span>1986</span> <span>1986</span>
</li> </li>
<li> <li>
<span>120+</span> <span>120+</span>
Prebuilt Slides Prebuilt Slides
</li> </li>
@@ -1518,7 +1518,7 @@
<h2>Buttons</h2> <h2>Buttons</h2>
<p> <p>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
.button</a> .button</a>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
<svg class="fa-github"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
@@ -1537,7 +1537,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p> <p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p> <p>
<a href="#" class="badge-ios" title="Download iOS App"> <a href="#" class="badge-ios" title="Download iOS App">
iOS App</a> iOS App</a>
<a href="#" class="badge-android" title="Download Android App"> <a href="#" class="badge-android" title="Download Android App">
Android App</a> Android App</a>
</p> </p>
@@ -1694,7 +1694,7 @@
<div class="wrap"> <div class="wrap">
<h2>Transparent Logos</h2> <h2>Transparent Logos</h2>
<p> <p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners. Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p> </p>
<hr> <hr>
<ul class="flexblock"> <ul class="flexblock">
@@ -1718,7 +1718,7 @@
</li> </li>
<li class="bg-green"> <li class="bg-green">
<div> <div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google"> <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<p><code>img.whitelogo</code></p> <p><code>img.whitelogo</code></p>
</div> </div>
</li> </li>
@@ -1811,7 +1811,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -1836,7 +1836,7 @@
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
@@ -1913,15 +1913,16 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <script src="../dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="../static/js/webslides.js"></script> window.ws = new WebSlides();
</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>

71
demos/portfolios.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Portfolios: Showcase your work</title> <title>WebSlides Portfolios: Showcase your work</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free."> <meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free.">
<!-- 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/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">
@@ -43,7 +43,7 @@
<meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT --> <meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,16 +51,16 @@
<meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT --> <meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- 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">
<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">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.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="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="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">
@@ -90,16 +90,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 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-primary"> <section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
<div class="wrap aligncenter"> <div class="wrap aligncenter">
@@ -358,7 +358,7 @@
<div class="wrap"> <div class="wrap">
<div class="content-right"> <div class="content-right">
<h2> <h2>
Redesigning Redesigning
<svg class="fa-apple"> <svg class="fa-apple">
<use xlink:href="#fa-apple"></use> <use xlink:href="#fa-apple"></use>
</svg> </svg>
@@ -458,7 +458,7 @@
<li> Founded <li> Founded
<span>1976</span> <span>1976</span>
</li> </li>
<li> <li>
<span>120+</span> <span>120+</span>
Prebuilt Slides Prebuilt Slides
</li> </li>
@@ -1051,7 +1051,7 @@
</h2> </h2>
<p>.card-50.bg-white</p> <p>.card-50.bg-white</p>
<p> <p>
Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro. Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.
</p> </p>
<ul class="description"> <ul class="description">
<li> <li>
@@ -1192,7 +1192,7 @@
<use xlink:href="#fa-globe"></use> <use xlink:href="#fa-globe"></use>
</svg> </svg>
<h2>Works with all major banks</h2> <h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels... Apple Pay is accepted in restaurants, hotels...
</div> </div>
</li> </li>
<li> <li>
@@ -1451,7 +1451,7 @@
<div class="wrap"> <div class="wrap">
<h2>Transparent Logos</h2> <h2>Transparent Logos</h2>
<p> <p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners. Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p> </p>
<hr> <hr>
<ul class="flexblock"> <ul class="flexblock">
@@ -1475,8 +1475,8 @@
</li> </li>
<li class="bg-green"> <li class="bg-green">
<div> <div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google"> <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code> <code>img.whitelogo</code>
</div> </div>
</li> </li>
</ul> </ul>
@@ -1722,7 +1722,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -1747,7 +1747,7 @@
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
@@ -1857,13 +1857,14 @@
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <script src="../dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="../static/js/webslides.js"></script> window.ws = new WebSlides();
</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>

57
demos/why-webslides.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides: Why WebSlides is so inspiring?</title> <title>WebSlides: Why WebSlides is so inspiring?</title>
<meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials."> <meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials.">
<!-- 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/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">
@@ -45,7 +45,7 @@
<meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT --> <meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT -->
<meta property="og:image:width" content="800"> <meta property="og:image: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"> <!-- EDIT -->
@@ -53,7 +53,7 @@
<meta name="twitter:title" content="Why WebSlides? Good karma"> <!-- EDIT --> <meta name="twitter:title" content="Why WebSlides? Good karma"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
<meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.jpg"> <!-- EDIT --> <meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.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">
<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">
@@ -62,7 +62,7 @@
<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">
@@ -92,22 +92,22 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides" class="vertical"> <article id="webslides" class="vertical">
<!-- 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 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
--> -->
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h1 class="text-landing">Good Karma</h1> <h1 class="text-landing">Good Karma</h1>
<p class="text-intro"> <p class="text-intro">
<strong><a href="http://webslides.tv/">WebSlides</a></strong> &mdash; HTML presentations made easy. <br> <strong><a href="http://webslides.tv/">WebSlides</a></strong> &mdash; HTML presentations made easy. <br>
Hypertext and beauty as narrative elements. Hypertext and beauty as narrative elements.
</p> </p>
<nav> <nav>
@@ -126,7 +126,7 @@
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
<div class="wrap fadeInUp"> <div class="wrap fadeInUp">
<h1> <h1>
Everyone Everyone
<svg class="fa-heart-o"> <svg class="fa-heart-o">
<use xlink:href="#fa-heart-o"></use> <use xlink:href="#fa-heart-o"></use>
</svg> </svg>
@@ -309,7 +309,7 @@
<p>The best way to inspire with your content is to connect on a personal level:</p> <p>The best way to inspire with your content is to connect on a personal level:</p>
<ul class="description"> <ul class="description">
<li> <li>
<strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css"> <strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
Animate.css</a>. Animate.css</a>.
</li> </li>
<li> <li>
@@ -333,17 +333,18 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <script src="../dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="../static/js/webslides.js"></script> window.ws = new WebSlides();
</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>

1629
dist/webslides-dev.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
dist/webslides-dev.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1209
dist/webslides-lite.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
dist/webslides-lite.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1564
dist/webslides.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
dist/webslides.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

64
index.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides: Making HTML presentations easy</title> <title>WebSlides: Making HTML presentations easy</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features."> <meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/"> --> <!-- <link rel="canonical" href="http://your-url.com/"> -->
<!-- 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/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/"> <!-- YOUR URL --> <meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT --> <meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
<meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT --> <meta property="og:image" content="static/images/share-webslides.jpg"> <!-- 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"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="static/images/share-webslides.jpg"> <!-- 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">
<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">
@@ -60,11 +60,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">
@@ -91,16 +91,15 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides" class="vertical"> <article id="webslides" class="vertical">
<!-- 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 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
--> -->
<section> <section>
<span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span> <span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -118,7 +117,7 @@
</a> </a>
</p> </p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -370,26 +369,27 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
<!-- end article --> <!-- end article -->
</main> </main>
<!-- end main --> <!-- end main -->
<!-- Remove #webslides element :) <!-- Remove #webslides element :)
<footer role="contentinfo"> <footer role="contentinfo">
<div class="wrap"> <div class="wrap">
<p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p> <p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
</div> </div>
</footer> --> </footer> -->
<!-- jQuery (required for slides to work) --> <script src="dist/webslides.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>
<script src="static/js/webslides.js"></script> window.ws = new WebSlides();
</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>