mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-02 01:22:40 +02:00
Code Issues Releases Wiki Activity

new github username, .text-quote, new comments...

Browse Source
This commit is contained in:
José Luis Antúnez
2017-03-21 13:30:53 +01:00
committed by GitHub
parent a4f232453c
commit 1869cdc9e3
8 changed files with 138 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
demos/media.html
View File

@@ -8,10 +8,9 @@
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
https://github.com/webslides/webslides
Thanks,
@jlantunez.
Thanks!
-->
<!-- SEO -->
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
@@ -87,7 +86,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul>
<li class="github">
<a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
@@ -102,26 +101,28 @@
<em>@WebSlides</em>
</a>
</li>
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
</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"> = container 90% / <div class="wrap size-50"> = 45%;
-->
<section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Media</h1>
<p class="text-symbols">* * *</p>
<p>
<a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
<a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
@@ -285,7 +286,7 @@
</section>
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h2>.background.anim</h2>
</div>
@@ -388,9 +389,9 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<blockquote class="wall">
<blockquote class="text-quote">
<p>"An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism."</p>
<p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
</blockquote>
@@ -667,7 +668,7 @@
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<!-- .wrap = container 1200px -->
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Start in Seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>