mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-01 01:01:47 +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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink" /> <!-- YOUR URL/PERMALINK -->
<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:updated_time" content="2017-01-04T17:23:46"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<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:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px with fadein animation -->
@@ -1928,17 +1928,17 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</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>
<!--main-->
<script src="../dist/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

75
demos/components.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides Documentation: Components</title>
<meta name="description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="/" />
<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:updated_time" content="2017-01-04T17:25:31"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<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:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px -->
@@ -303,7 +303,7 @@
<!--.wrap o <nav> = container 1200px -->
<div class="wrap">
<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">
<a href="#" title="Twitter">
<svg class="fa-twitter">
@@ -1984,7 +1984,7 @@
<li> Founded
<span>2040</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -2508,7 +2508,7 @@
<h2>Buttons</h2>
<p>
<a href="#" class="button" title="Button">
.button</a>
.button</a>
<a href="#" class="button" title="Button">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
@@ -2527,7 +2527,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p>
<a href="#" class="badge-ios" title="Download iOS App">
iOS App</a>
iOS App</a>
<a href="#" class="badge-android" title="Download Android App">
Android App</a>
</p>
@@ -2817,7 +2817,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<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;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -2842,7 +2842,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -2904,7 +2904,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p>
<hr>
<ul class="flexblock blink">
@@ -2935,8 +2935,8 @@
<li class="bg-blue">
<a href="" title="Block Link = .blink">
<div>
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
<p><code>img.whitelogo</code></p>
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
<p><code>img.whitelogo</code></p>
</div>
</a>
</li>
@@ -3001,7 +3001,7 @@
</div>
<!-- end .grid-->
</div>
<!-- end .wrap-->
<!-- end .wrap-->
</section>
<section>
<div class="wrap">
@@ -3084,7 +3084,7 @@
<li>
<a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
<h2>particles.js</h2>
A lightweight .js library for creating particles.
A lightweight .js library for creating particles.
</a>
</li>
<li>
@@ -3121,17 +3121,18 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</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) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

49
demos/index.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides Demos</title>
<meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:updated_time" content="2017-01-04T17:22:34"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Demos"> <!-- EDIT -->
<meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -93,13 +93,13 @@
<main role="main">
<article> <!-- Slideshow? id="webslides" -->
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- <div class="wrap"> = container 1200px
-->
<section>
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
<!--.wrap = container 1200px -->
@@ -217,17 +217,18 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!-- end 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) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

57
demos/keynote.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides Keynote: Make a Keynote presentation using HTML</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:updated_time" content="2017-01-04T17:32:14"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="Make a Keynote presentation using HTML"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-apple aligncenter">
<!--.wrap = container 1200px -->
<div class="wrap">
@@ -473,7 +473,7 @@
<div class="wrap">
<div class="content-right">
<h2>
Redesigning
Redesigning
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
@@ -530,7 +530,7 @@
<use xlink:href="#fa-globe"></use>
</svg>
<h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels...
Apple Pay is accepted in restaurants, hotels...
</div>
</li>
<li>
@@ -739,7 +739,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<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;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -838,17 +838,18 @@
<p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
<p class="text-symbols">* * *</p>
</section>
</article>
</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) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

61
demos/landings.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:updated_time" content="2017-01-04T16:54:27"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<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:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -92,13 +92,13 @@
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
-->
<section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px -->
@@ -371,7 +371,7 @@
<div class="alignright size-50 bg-trans-dark">
<p class="text-subtitle text-serif">New in London</p>
<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>
</div>
</div>
@@ -1144,7 +1144,7 @@
<li> Founded
<span>1986</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -1518,7 +1518,7 @@
<h2>Buttons</h2>
<p>
<a href="#" class="button" title="Button">
.button</a>
.button</a>
<a href="#" class="button" title="Button">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
@@ -1537,7 +1537,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p>
<a href="#" class="badge-ios" title="Download iOS App">
iOS App</a>
iOS App</a>
<a href="#" class="badge-android" title="Download Android App">
Android App</a>
</p>
@@ -1694,7 +1694,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p>
<hr>
<ul class="flexblock">
@@ -1718,7 +1718,7 @@
</li>
<li class="bg-green">
<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>
</div>
</li>
@@ -1811,7 +1811,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<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;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -1836,7 +1836,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -1913,15 +1913,16 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</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) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>

71
demos/portfolios.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,16 +51,16 @@
<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:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
<div class="wrap aligncenter">
@@ -358,7 +358,7 @@
<div class="wrap">
<div class="content-right">
<h2>
Redesigning
Redesigning
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
@@ -458,7 +458,7 @@
<li> Founded
<span>1976</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -1051,7 +1051,7 @@
</h2>
<p>.card-50.bg-white</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>
<ul class="description">
<li>
@@ -1192,7 +1192,7 @@
<use xlink:href="#fa-globe"></use>
</svg>
<h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels...
Apple Pay is accepted in restaurants, hotels...
</div>
</li>
<li>
@@ -1451,7 +1451,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p>
<hr>
<ul class="flexblock">
@@ -1475,8 +1475,8 @@
</li>
<li class="bg-green">
<div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code>
</div>
</li>
</ul>
@@ -1722,7 +1722,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<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;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -1747,7 +1747,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -1857,13 +1857,14 @@
</article>
</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) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

57
demos/why-webslides.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides: Why WebSlides is so inspiring?</title>
<meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:width" content="800">
<meta property="og:image:height" content="429">
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -53,7 +53,7 @@
<meta name="twitter:title" content="Why WebSlides? Good karma"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
<meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -92,22 +92,22 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides" class="vertical">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
-->
<section>
<!--.wrap = container 1200px -->
<div class="wrap aligncenter">
<h1 class="text-landing">Good Karma</h1>
<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.
</p>
<nav>
@@ -126,7 +126,7 @@
<!--.wrap = container 1200px -->
<div class="wrap fadeInUp">
<h1>
Everyone
Everyone
<svg class="fa-heart-o">
<use xlink:href="#fa-heart-o"></use>
</svg>
@@ -309,7 +309,7 @@
<p>The best way to inspire with your content is to connect on a personal level:</p>
<ul class="description">
<li>
<strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
<strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
Animate.css</a>.
</li>
<li>
@@ -333,17 +333,18 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</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) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/"> -->
<!-- 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">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
<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:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
<meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<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:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
@@ -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="180x180" href="static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
@@ -91,16 +91,15 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides" class="vertical">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
-->
<section>
<span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
<!--.wrap = container 1200px -->
@@ -118,7 +117,7 @@
</a>
</p>
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
@@ -370,26 +369,27 @@
</div>
<!-- .end .wrap -->
</section>
</article>
<!-- end article -->
</main>
<!-- end main -->
<!-- end main -->
<!-- Remove #webslides element :)
<footer role="contentinfo">
<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>
</div>
</footer> -->
<!-- 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>
</footer> -->
<script src="dist/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>