mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-18 19:02:00 +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 ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
@@ -71,7 +70,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -86,7 +85,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -97,18 +96,18 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - 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"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span> <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"> <div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p> <p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Classes</h1> <h1 class="text-landing">Classes</h1>
<p class="text-symbols">* * * </p> <p class="text-symbols">* * * </p>
<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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -119,7 +118,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<h2><strong>WebSlides Classes</strong></h2> <h2><strong>WebSlides Classes</strong></h2>
<p class="text-intro">Friendly naming conventions.</p> <p class="text-intro">Friendly naming conventions.</p>
@@ -226,7 +225,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -244,7 +243,7 @@
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span> <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt; &lt;section class="bg-primary"&gt;
&lt;div class="wrap"&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;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt; &lt;/article&gt;
@@ -405,7 +404,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<h2>.grid + .column</h2> <h2>.grid + .column</h2>
<p class="text-intro">Basic Grid (auto-fill and equal height).</p> <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -432,7 +431,7 @@
<!-- end .wrap --> <!-- end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<h2>.grid.<strong>vertical-align</strong> + .column</h2> <h2>.grid.<strong>vertical-align</strong> + .column</h2>
<p class="text-intro">Basic Grid (auto-fill and equal height).</p> <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -711,7 +710,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-gradient-h aligncenter"> <section class="bg-gradient-h aligncenter">
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<h1>Horizontal Gradient</h1> <h1>Horizontal Gradient</h1>
<p><code>section.bg-gradient-h</code></p> <p><code>section.bg-gradient-h</code></p>
@@ -726,7 +725,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-gradient-v aligncenter"> <section class="bg-gradient-v aligncenter">
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<h1>Vertical Gradient</h1> <h1>Vertical Gradient</h1>
<p><code>section.bg-gradient-v</code></p> <p><code>section.bg-gradient-v</code></p>
@@ -856,7 +855,7 @@
</section> </section>
<section class="aligncenter bg-black"> <section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span> <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"> <div class="wrap">
<h2>.background.anim</h2> <h2>.background.anim</h2>
</div> </div>
@@ -1545,7 +1544,7 @@
<!-- .end card-50 --> <!-- .end card-50 -->
</section> </section>
<section class="bg-gradient-gray"> <section class="bg-gradient-gray">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h3>.flexblock.reasons</h3> <h3>.flexblock.reasons</h3>
<hr> <hr>
@@ -1723,7 +1722,7 @@
<p><code>.text-data</code></p> <p><code>.text-data</code></p>
</section> </section>
<section> <section>
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<p class="text-context">Why WebSlides? .text-context</p> <p class="text-context">Why WebSlides? .text-context</p>
<h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2> <h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
@@ -1828,7 +1827,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter text-serif"> <section class="aligncenter text-serif">
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>WebSlides is incredibly easy and versatile.</h2> <h2>WebSlides is incredibly easy and versatile.</h2>
@@ -1905,7 +1904,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Start in seconds</strong> </h2> <h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p> <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>

57
demos/components.html
View File

@@ -9,10 +9,9 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
@@ -71,7 +70,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -86,7 +85,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -97,18 +96,18 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - 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"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p> <p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Components</h1> <h1 class="text-landing">Components</h1>
<p class="text-symbols">* * *</p> <p class="text-symbols">* * *</p>
<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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -200,7 +199,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -218,7 +217,7 @@
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span> <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt; &lt;section class="bg-primary"&gt;
&lt;div class="wrap"&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;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&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 class="text-intro">Create a simple web presence easily. <br> Clean markup and lovely CSS.
</p> </p>
<p> <p>
<a href="https://github.com/jlantunez/webslides" class="button"> <a href="https://github.com/webslides/webslides" class="button">
<svg class="fa-github"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -1719,7 +1718,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="cta-cover"> <div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1> <h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -1730,7 +1729,7 @@
</svg> </svg>
WebSlides WebSlides
</a> </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> </p>
</div> </div>
<ul class="flexblock features"> <ul class="flexblock features">
@@ -1792,7 +1791,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div id="tab-3" class="tab-content current"> <div id="tab-3" class="tab-content current">
<h1 class="text-landing">Tell a Story</h1> <h1 class="text-landing">Tell a Story</h1>
@@ -1939,7 +1938,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2 class="text-data">$56 Billion</h2> <h2 class="text-data">$56 Billion</h2>
<h3>Revenue in Q3 2017</h3> <h3>Revenue in Q3 2017</h3>
@@ -2006,7 +2005,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>WebSlides was made to inspire people.</h2> <h2>WebSlides was made to inspire people.</h2>
@@ -2143,7 +2142,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>iPhone 7</h2> <h2>iPhone 7</h2>
@@ -2423,7 +2422,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<!-- alignment [class*="content-"] = container max-width:50% = 600px --> <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
<div class="content-center"> <div class="content-center">
@@ -2437,9 +2436,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-black-blue"> <section class="bg-black-blue">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <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>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> <p><cite><a href="https://en.wikipedia.org/wiki/Sheryl_Sandberg">Sheryl Sandberg</a>, COO of Facebook.</cite></p>
</blockquote> </blockquote>
@@ -2447,9 +2446,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-primary"> <section class="bg-primary">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50"> <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>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> <p><cite><a href="https://twitter.com/jlantunez">@jlantunez</a></cite></p>
</blockquote> </blockquote>
@@ -2535,7 +2534,7 @@
</section> </section>
<section class="bg-black"> <section class="bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span> <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"> <div class="wrap size-70 aligncenter">
<h2>Planning a vacation?</h2> <h2>Planning a vacation?</h2>
<p class="text-intro">Hidden attractions and unusual things to do.</p> <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -2550,7 +2549,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-green"> <section class="bg-green">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -2624,7 +2623,7 @@
</section> </section>
<section class="bg-primary"> <section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span> <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"> <div class="wrap size-30">
<p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p> <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
<form action="/" method="post"> <form action="/" method="post">
@@ -2769,7 +2768,7 @@
</section> </section>
<section class="aligncenter bg-black"> <section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span> <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2>.background.anim</h2> <h2>.background.anim</h2>
</div> </div>
@@ -2936,9 +2935,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <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>"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> <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> </blockquote>
@@ -3089,7 +3088,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Start in Seconds</strong> </h2> <h2><strong>Start in Seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p> <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>

16
demos/index.html
View File

@@ -9,7 +9,7 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
@@ -71,7 +71,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -86,7 +86,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -97,12 +97,12 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
--> -->
<section> <section>
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span> <span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h1><strong>WebSlides Demos</strong></h1> <h1><strong>WebSlides Demos</strong></h1>
<p class="text-intro">All of these presentations are free and responsive.<br> <p class="text-intro">All of these presentations are free and responsive.<br>
@@ -112,7 +112,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-white"> <section class="bg-white">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<ul class="flexblock gallery"> <ul class="flexblock gallery">
<li> <li>
@@ -164,7 +164,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap"> <div class="wrap">
<h2 class="aligncenter">General Questions</h2> <h2 class="aligncenter">General Questions</h2>
<p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p> <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
@@ -194,7 +194,7 @@
<!-- end .wrap --> <!-- end .wrap -->
</section> </section>
<section class="bg-white aligncenter"> <section class="bg-white aligncenter">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Start in seconds</strong> </h2> <h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p> <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>

29
demos/keynote.html
View File

@@ -9,10 +9,9 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
@@ -71,7 +70,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -86,7 +85,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -97,18 +96,18 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - 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-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1> <h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple"> <section class="bg-apple">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h1>Make a Keynote presentation using HTML</h1> <h1>Make a Keynote presentation using HTML</h1>
<p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p> <p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p>
@@ -117,7 +116,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2>HTML presentations can be easy</h2> <h2>HTML presentations can be easy</h2>
</div> </div>
@@ -328,7 +327,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2 class="text-data">$48 Billion</h2> <h2 class="text-data">$48 Billion</h2>
<h3>Revenue in Q4 2024</h3> <h3>Revenue in Q4 2024</h3>
@@ -490,7 +489,7 @@
</section> </section>
<section class="bg-apple"> <section class="bg-apple">
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>Payments Made Simple</h2> <h2>Payments Made Simple</h2>
@@ -568,9 +567,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple"> <section class="bg-apple">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<blockquote class="wall"> <blockquote class="text-quote">
<p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p> <p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p>
<p> <p>
<cite> <cite>
@@ -775,7 +774,7 @@
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>Think Different</strong></h2> <h2><strong>Think Different</strong></h2>
<p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p> <p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p>
@@ -810,7 +809,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Start in seconds</strong></h2> <h2><strong>Start in seconds</strong></h2>
<p class="text-intro">120+ prebuilt slides ready to use.</p> <p class="text-intro">120+ prebuilt slides ready to use.</p>

57
demos/landings.html
View File

@@ -9,10 +9,9 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
@@ -71,7 +70,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -86,7 +85,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -96,16 +95,16 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
--> -->
<section class="bg-purple aligncenter"> <section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h1 class="text-landing">Landings</h1> <h1 class="text-landing">Landings</h1>
<p class="text-symbols">* * * </p> <p class="text-symbols">* * * </p>
<p><a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides for free"><svg class="fa-github"> <p><a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides for free"><svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> WebSlides</a> </svg> WebSlides</a>
</p> </p>
@@ -113,7 +112,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<p class="text-subtitle">The interface is your brand:</p> <p class="text-subtitle">The interface is your brand:</p>
<h2>Create a stylish web presence easily</h2> <h2>Create a stylish web presence easily</h2>
@@ -121,7 +120,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -139,7 +138,7 @@
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span> <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt; &lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt; &lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container 1200px&lt;/h2&gt; &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt; &lt;/article&gt;
@@ -176,7 +175,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2 class="text-landing">Welcomes</h2> <h2 class="text-landing">Welcomes</h2>
<p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br> <p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br>
@@ -185,13 +184,13 @@
<ul> <ul>
<li><a href="https://twitter.com/webslides">Twitter</a></li> <li><a href="https://twitter.com/webslides">Twitter</a></li>
<li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li> <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
<li><a href="https://github.com/jlantunez/webslides">Github</a></li> <li><a href="https://github.com/webslides/webslides">Github</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
</section> </section>
<section class="bg-secondary"> <section class="bg-secondary">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50 frame"> <div class="wrap size-50 frame">
<h2 class="text-serif aligncenter">How to Tell Your Story?</h2> <h2 class="text-serif aligncenter">How to Tell Your Story?</h2>
<p class="text-symbols">* * *</p> <p class="text-symbols">* * *</p>
@@ -199,7 +198,7 @@
</div> </div>
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-60"> <div class="wrap size-60">
<h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3> <h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3>
<hr> <hr>
@@ -231,7 +230,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="cta-cover"> <div class="cta-cover">
<h1><strong>HTML Presentations</strong> Made Easy</h1> <h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -242,7 +241,7 @@
</svg> </svg>
WebSlides WebSlides
</a> </a>
<span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span> <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
</p> </p>
</div> </div>
<ul class="flexblock features"> <ul class="flexblock features">
@@ -600,7 +599,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid"> <div class="grid">
<div class="column"> <div class="column">
@@ -880,7 +879,7 @@
</section> </section>
<section> <section>
<span class="background-right" style="background-image:url('../static/images/iphone.png')"></span> <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>iPhone 7</h2> <h2>iPhone 7</h2>
@@ -1447,7 +1446,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<!-- alignment [class*="content-"] = container max-width:50% = 600px --> <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
<div class="content-center"> <div class="content-center">
@@ -1461,9 +1460,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-black-blue"> <section class="bg-black-blue">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<blockquote class="wall"> <blockquote class="text-quote">
<p>I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers. <p>I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.
</p> </p>
<p><cite><a href="https://en.wikipedia.org/wiki/Zaha_Hadid">Zaha Hadid</a></cite></p> <p><cite><a href="https://en.wikipedia.org/wiki/Zaha_Hadid">Zaha Hadid</a></cite></p>
@@ -1553,7 +1552,7 @@
</section> </section>
<section class="bg-black"> <section class="bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span> <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"> <div class="wrap size-70 aligncenter">
<h2>Planning a vacation?</h2> <h2>Planning a vacation?</h2>
<p class="text-intro">Hidden attractions and unusual things to do.</p> <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -1568,7 +1567,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-gradient-white"> <section class="bg-gradient-white">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -1643,7 +1642,7 @@
</section> </section>
<section class="bg-primary"> <section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span> <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"> <div class="wrap size-30">
<p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p> <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
<form action="/" method="post"> <form action="/" method="post">
@@ -1849,7 +1848,7 @@
<video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Every end is a new beginning</strong></h2> <h2><strong>Every end is a new beginning</strong></h2>
</div> </div>
@@ -1859,7 +1858,7 @@
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Overlay</strong></h2> <h2><strong>Overlay</strong></h2>
<p><code>section.bg-blue > .background-video.dark</code> or .light</p> <p><code>section.bg-blue > .background-video.dark</code> or .light</p>
@@ -1890,12 +1889,12 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Start in seconds</strong> </h2> <h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">120+ prebuilt slides ready to use.</p> <p class="text-intro">120+ prebuilt slides ready to use.</p>
<p> <p>
<a href="https://github.com/jlantunez/webslides" class="button" title="Download WebSlides"> <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download"> <svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use> <use xlink:href="#fa-cloud-download"></use>
</svg> </svg>

25
demos/media.html
View File

@@ -8,10 +8,9 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Tutorial: Videos, Images, and Maps</title> <title>WebSlides Tutorial: Videos, Images, and Maps</title>
@@ -87,7 +86,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -102,26 +101,28 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides" class="vertical"> <article id="webslides" class="vertical">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - 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"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span> <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"> <div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p> <p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Media</h1> <h1 class="text-landing">Media</h1>
<p class="text-symbols">* * *</p> <p class="text-symbols">* * *</p>
<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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -285,7 +286,7 @@
</section> </section>
<section class="aligncenter bg-black"> <section class="aligncenter bg-black">
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span> <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2>.background.anim</h2> <h2>.background.anim</h2>
</div> </div>
@@ -388,9 +389,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <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>"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> <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> </blockquote>
@@ -667,7 +668,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="aligncenter"> <section class="aligncenter">
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2><strong>Start in Seconds</strong> </h2> <h2><strong>Start in Seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p> <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>

31
demos/portfolios.html
View File

@@ -9,10 +9,9 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
@@ -71,7 +70,7 @@
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -86,7 +85,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -97,7 +96,7 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - 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-primary"> <section class="bg-primary">
@@ -112,7 +111,7 @@
</div> </div>
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<p class="text-subtitle">Design faster, better.</p> <p class="text-subtitle">Design faster, better.</p>
<h2>Create a beautiful portfolio for your work</h2> <h2>Create a beautiful portfolio for your work</h2>
@@ -120,7 +119,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -138,7 +137,7 @@
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span> <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt; &lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt; &lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container 1200px&lt;/h2&gt; &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt; &lt;/article&gt;
@@ -569,7 +568,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<h2 class="text-data">$48 Billion</h2> <h2 class="text-data">$48 Billion</h2>
<h3>Revenue in Q2 2019</h3> <h3>Revenue in Q2 2019</h3>
@@ -1211,7 +1210,7 @@
</section> </section>
<section> <section>
<span class="background-right" style="background-image:url('../static/images/iphone.png')"></span> <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>Call to action</h2> <h2>Call to action</h2>
@@ -1389,7 +1388,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50 aligncenter"> <div class="wrap size-50 aligncenter">
<h2><strong>Why WebSlides?</strong></h2> <h2><strong>Why WebSlides?</strong></h2>
<blockquote> <blockquote>
@@ -1400,9 +1399,9 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="bg-black-blue"> <section class="bg-black-blue">
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<blockquote class="wall"> <blockquote class="text-quote">
<p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p> <p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p>
<p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p> <p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p>
</blockquote> </blockquote>
@@ -1760,7 +1759,7 @@
<video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>We build brands with integrity and substance</strong></h2> <h2><strong>We build brands with integrity and substance</strong></h2>
</div> </div>
@@ -1770,7 +1769,7 @@
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg"> <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4"> <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
</video> </video>
<!-- .wrap = container 1200px --> <!-- .wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>We help with design direction</strong></h2> <h2><strong>We help with design direction</strong></h2>
<p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p> <p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>

27
demos/why-webslides.html
View File

@@ -9,10 +9,9 @@
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/webslides/webslides
Thanks, Thanks!
@jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
@@ -73,7 +72,7 @@
<p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p> <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
<ul> <ul>
<li class="github"> <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"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
</svg> </svg>
@@ -88,7 +87,7 @@
<em>@WebSlides</em> <em>@WebSlides</em>
</a> </a>
</li> </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> </ul>
</nav> </nav>
</header> </header>
@@ -99,11 +98,11 @@
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
--> -->
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h1 class="text-landing">Good Karma</h1> <h1 class="text-landing">Good Karma</h1>
<p class="text-intro"> <p class="text-intro">
@@ -114,7 +113,7 @@
<ul> <ul>
<li><a href="https://twitter.com/webslides">Twitter</a></li> <li><a href="https://twitter.com/webslides">Twitter</a></li>
<li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li> <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
<li><a href="https://github.com/jlantunez/webslides">Github</a></li> <li><a href="https://github.com/webslides/webslides">Github</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
@@ -123,7 +122,7 @@
<section class="bg-black aligncenter"> <section class="bg-black aligncenter">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light --> <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span> <span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap fadeInUp"> <div class="wrap fadeInUp">
<h1> <h1>
Everyone Everyone
@@ -136,7 +135,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<!-- alignment [class*="content-"] = container max-width:50% = 600px --> <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
<div class="content-center"> <div class="content-center">
@@ -150,7 +149,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
@@ -168,7 +167,7 @@
<span class="code-comment">&lt;!-- Slide 2 --&gt;</span> <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
&lt;section class="bg-primary"&gt; &lt;section class="bg-primary"&gt;
&lt;div class="wrap"&gt; &lt;div class="wrap"&gt;
&lt;h2&gt;.wrap = container 1200px&lt;/h2&gt; &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt; &lt;/section&gt;
&lt;/article&gt; &lt;/article&gt;
@@ -181,7 +180,7 @@
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container (width: 90%) -->
<div class="wrap"> <div class="wrap">
<div class="content-left"> <div class="content-left">
<h2>WebSlides was made to inspire people.</h2> <h2>WebSlides was made to inspire people.</h2>
@@ -302,7 +301,7 @@
</ul> </ul>
</div> </div>
<div class="column"> <div class="column">
<a href="https://github.com/jlantunez/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a> <a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
</div> </div>
<div class="column"> <div class="column">
<h3>Extensible</h3> <h3>Extensible</h3>