mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-30 08:21:15 +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

57
demos/components.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 -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Components</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>
@@ -200,7 +199,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
@@ -218,7 +217,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;
@@ -1688,7 +1687,7 @@
<p class="text-intro">Create a simple web presence easily. <br> Clean markup and lovely CSS.
</p>
<p>
<a href="https://github.com/jlantunez/webslides" class="button">
<a href="https://github.com/webslides/webslides" class="button">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
@@ -1719,7 +1718,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -1730,7 +1729,7 @@
</svg>
WebSlides
</a>
<span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
<span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
</p>
</div>
<ul class="flexblock features">
@@ -1792,7 +1791,7 @@
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div id="tab-3" class="tab-content current">
<h1 class="text-landing">Tell a Story</h1>
@@ -1939,7 +1938,7 @@
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h2 class="text-data">$56 Billion</h2>
<h3>Revenue in Q3 2017</h3>
@@ -2006,7 +2005,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="content-left">
<h2>WebSlides was made to inspire people.</h2>
@@ -2143,7 +2142,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="content-left">
<h2>iPhone 7</h2>
@@ -2423,7 +2422,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<!-- alignment [class*="content-"] = container max-width:50% = 600px -->
<div class="content-center">
@@ -2437,9 +2436,9 @@
<!-- .end .wrap -->
</section>
<section class="bg-black-blue">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<blockquote class="wall">
<blockquote class="text-quote">
<p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good.</p>
<p><cite><a href="https://en.wikipedia.org/wiki/Sheryl_Sandberg">Sheryl Sandberg</a>, COO of Facebook.</cite></p>
</blockquote>
@@ -2447,9 +2446,9 @@
<!-- .end .wrap -->
</section>
<section class="bg-primary">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<blockquote class="wall">
<blockquote class="text-quote">
<p>Finally, everything you need to make HTML presentations in a simple way.</p>
<p><cite><a href="https://twitter.com/jlantunez">@jlantunez</a></cite></p>
</blockquote>
@@ -2535,7 +2534,7 @@
</section>
<section class="bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-70 aligncenter">
<h2>Planning a vacation?</h2>
<p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -2550,7 +2549,7 @@
<!-- .end .wrap -->
</section>
<section class="bg-green">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
@@ -2624,7 +2623,7 @@
</section>
<section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-30">
<p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
<form action="/" method="post">
@@ -2769,7 +2768,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>
@@ -2936,9 +2935,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>
@@ -3089,7 +3088,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>