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

new demo: netflix culture, more video examples...

Browse Source
This commit is contained in:
José Luis Antúnez
2017-04-11 19:39:17 +02:00
committed by GitHub
parent 38a061d6d1
commit c8603a1830
11 changed files with 685 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
demos/components.html
View File

@@ -185,12 +185,12 @@
<li><a target="_blank" href="#slide=101">Background Videos</a></li>
<li><a target="_blank" href="#slide=103">Embedding videos, charts...</a></li>
<li><a target="_blank" href="#slide=108">Maps</a></li>
<li><a target="_blank" href="#slide=109">500+ SVG Icons</a></li>
<li><a target="_blank" href="#slide=110">Logos</a></li>
<li><a target="_blank" href="#slide=111">Avatars</a></li>
<li><a target="_blank" href="#slide=112">Devices</a></li>
<li><a target="_blank" href="#slide=113">Screenshots</a></li>
<li><a target="_blank" href="#slide=114">CSS Animations</a></li>
<li><a target="_blank" href="#slide=110">500+ SVG Icons</a></li>
<li><a target="_blank" href="#slide=111">Logos</a></li>
<li><a target="_blank" href="#slide=112">Avatars</a></li>
<li><a target="_blank" href="#slide=113">Devices</a></li>
<li><a target="_blank" href="#slide=114">Screenshots</a></li>
<li><a target="_blank" href="#slide=115">CSS Animations</a></li>
</ol>
</div>
</li>
@@ -2873,6 +2873,43 @@
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="card-50 bg-white">
<figure>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
<figcaption>
<a href="https://maps.google.com" title="Google Maps">
<svg class="fa-map">
<use xlink:href="#fa-map"></use>
</svg>
Google Maps
</a>
</figcaption>
</figure>
<!-- end figure-->
<div class="flex-content">
<h2>
Discover Seville
</h2>
<p>.card-50.bg-white</p>
<ul class="description">
<li>
<strong class="text-label" title="Density">Density:</strong> 140/km<sup>2</sup>
</li>
<li><strong class="text-label" title="Population">Population:</strong> 703,021</li>
<li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
</ul>
<p>
There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcázar palace complex, the Cathedral and the General Archive of the Indies.
</p>
</div>
<!-- end .flex-content-->
</div>
<!-- end .card-50-->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-50">
<p class="text-subtitle">Optional &middot; 500+ icons</p>
@@ -3069,33 +3106,6 @@
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-60">
<h3>WebSlides is clean, consistent, and <strong>extensible</strong>.</h3>
<p>If you want to add more animations, videos...</p>
<ul class="flexblock border blink">
<li>
<a href="https://github.com/daneden/animate.css/" title="Animate.css">
<h2>Animate.css</h2>
Highly recommended. It is so easy and cool.
</a>
</li>
<li>
<a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
<h2>particles.js</h2>
A lightweight .js library for creating particles.
</a>
</li>
<li>
<a href="https://pixabay.com/en/videos" title="Pixabay">
<h2>Pixabay</h2>
Beautiful background videos. 100% license free.
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
@@ -3127,6 +3137,7 @@
<!-- Required -->
<script src="../static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>