mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-03 10:02:58 +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/landings.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>
@@ -96,16 +95,16 @@
<!-- 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 size-50"> = 600px;
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
-->
<section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h1 class="text-landing">Landings</h1>
<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>
</svg> WebSlides</a>
</p>
@@ -113,7 +112,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter">
<p class="text-subtitle">The interface is your brand:</p>
<h2>Create a stylish web presence easily</h2>
@@ -121,7 +120,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
@@ -139,7 +138,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&lt;/h2&gt;
&lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;
@@ -176,7 +175,7 @@
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50">
<h2 class="text-landing">Welcomes</h2>
<p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br>
@@ -185,13 +184,13 @@
<ul>
<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://github.com/jlantunez/webslides">Github</a></li>
<li><a href="https://github.com/webslides/webslides">Github</a></li>
</ul>
</nav>
</div>
</section>
<section class="bg-secondary">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50 frame">
<h2 class="text-serif aligncenter">How to Tell Your Story?</h2>
<p class="text-symbols">* * *</p>
@@ -199,7 +198,7 @@
</div>
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap size-60">
<h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3>
<hr>
@@ -231,7 +230,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>
@@ -242,7 +241,7 @@
</svg>
WebSlides
</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>
</div>
<ul class="flexblock features">
@@ -600,7 +599,7 @@
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid">
<div class="column">
@@ -880,7 +879,7 @@
</section>
<section>
<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="content-left">
<h2>iPhone 7</h2>
@@ -1447,7 +1446,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">
@@ -1461,9 +1460,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>I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.
</p>
<p><cite><a href="https://en.wikipedia.org/wiki/Zaha_Hadid">Zaha Hadid</a></cite></p>
@@ -1553,7 +1552,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>
@@ -1568,7 +1567,7 @@
<!-- .end .wrap -->
</section>
<section class="bg-gradient-white">
<!--.wrap = container 1200px -->
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
@@ -1643,7 +1642,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">
@@ -1849,7 +1848,7 @@
<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">
</video>
<!-- .wrap = container 1200px -->
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Every end is a new beginning</strong></h2>
</div>
@@ -1859,7 +1858,7 @@
<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">
</video>
<!-- .wrap = container 1200px -->
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Overlay</strong></h2>
<p><code>section.bg-blue > .background-video.dark</code> or .light</p>
@@ -1890,12 +1889,12 @@
<!-- .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">120+ prebuilt slides ready to use.</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">
<use xlink:href="#fa-cloud-download"></use>
</svg>