mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-31 00:39:48 +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

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>