mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-19 03:11:26 +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

39
demos/classes.html
View File

@@ -9,10 +9,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 -->
@@ -71,7 +70,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>
@@ -86,7 +85,7 @@
<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>
@@ -97,18 +96,18 @@
<!-- 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/6njoEbtarec/')"></span>
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Classes</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>
@@ -119,7 +118,7 @@
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h2><strong>WebSlides Classes</strong></h2>
<p class="text-intro">Friendly naming conventions.</p>
@@ -226,7 +225,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
@@ -244,7 +243,7 @@
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container 1200px with fadein&lt;/h2&gt;
&lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;
@@ -405,7 +404,7 @@
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h2>.grid + .column</h2>
<p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -432,7 +431,7 @@
<!-- end .wrap -->
</section>
<section class="aligncenter">
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h2>.grid.<strong>vertical-align</strong> + .column</h2>
<p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -711,7 +710,7 @@
<!-- .end .wrap -->
</section>
<section class="bg-gradient-h aligncenter">
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h1>Horizontal Gradient</h1>
<p><code>section.bg-gradient-h</code></p>
@@ -726,7 +725,7 @@
<!-- .end .wrap -->
</section>
<section class="bg-gradient-v aligncenter">
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h1>Vertical Gradient</h1>
<p><code>section.bg-gradient-v</code></p>
@@ -856,7 +855,7 @@
</section>
<section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h2>.background.anim</h2>
</div>
@@ -1545,7 +1544,7 @@
<!-- .end card-50 -->
</section>
<section class="bg-gradient-gray">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h3>.flexblock.reasons</h3>
<hr>
@@ -1723,7 +1722,7 @@
<p><code>.text-data</code></p>
</section>
<section>
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<p class="text-context">Why WebSlides? .text-context</p>
<h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
@@ -1828,7 +1827,7 @@
<!-- .end .wrap -->
</section>
<section class="aligncenter text-serif">
<!--.wrap = container 1200px with fadein animation -->
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<div class="content-left">
<h2>WebSlides is incredibly easy and versatile.</h2>
@@ -1905,7 +1904,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>