webslides
Version:
Making HTML presentations easy
392 lines (369 loc) • 16.7 kB
HTML
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides: Making HTML presentations easy</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
<meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
<meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="static/images/favicons/favicon-120.png">
<link rel="apple-touch-icon icon" sizes="152x152" href="static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
<nav role="navigation">
<p class="logo"><a href="index.html" title="WebSlides">WebSlides</a></p>
<ul>
<li class="github">
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
<em>WebSlides</em>
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
<em>@WebSlides</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 90% / <div class="wrap size-50"> = 45%;
-->
<section>
<span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap aligncenter">
<h1><strong>Create beautiful stories</strong></h1>
<p class="text-intro">WebSlides makes HTML presentations easy.<br>
Just the essentials and using lovely CSS.
</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button zoomIn" title="Download WebSlides for free">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>
WebSlides
</a>
</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap size-50 aligncenter">
<h2><strong>Why WebSlides?</strong></h2>
<p class="text-intro"><a href="demos/why-webslides.html" title="Why WebSlides?">Presentations</a>, <a href="demos/landings.html" title="Landings">landings</a>, <a href="demos/portfolios.html" title="Portfolios">portfolios</a>, and <a href="demos/longforms.html" title="Longforms">longforms</a>.</p>
<div class="bg-white shadow">
<ul class="flexblock reasons">
<li>
<h2>An opportunity to engage.</h2>
<p>WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
</li>
<li>
<h2>Work better, faster.</h2>
<p>Designers, marketers, and journalists can now focus on the content. Simply <a href="demos/index.html" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
</li>
</ul>
</div>
<!-- .end .bg-white shadow -->
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code><section></code> in the #webslides element is an individual slide. </p>
<p>Code is clean and scalable. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. <strong>Making an HTML presentation has never been so fast</strong>.</p>
</div>
<!-- .end .column -->
<div class="column">
<pre><article id="webslides">
<span class="code-comment"><!-- Slide 1 --></span>
<section>
<h1>Design for trust</h1>
</section>
<span class="code-comment"><!-- Slide 2 --></span>
<section class="bg-primary">
<div class="wrap">
<h2>.wrap = container (width: 90%)</h2>
</div>
</section>
</article>
</pre>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>Features</h2>
<ul class="flexblock features">
<li>
<div>
<h2>
<span>→</span>
Simple Navigation
</h2>
with arrow keys, presenter...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-link">
<use xlink:href="#fa-link"></use>
</svg>
Permalinks
</h2>
Go to a specific slide.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-clock-o">
<use xlink:href="#fa-clock-o"></use>
</svg>
Slide Counter
</h2>
Current/Total number.
</div>
</li>
<li>
<div>
<h2>
<span>40<sup>+</sup></span>
Beautiful Components
</h2>
Covers, cards, quotes...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-text-height">
<use xlink:href="#fa-text-height"></use>
</svg>
Vertical Rhythm
</h2>
Use multiples of 8.
</div>
</li>
<li>
<div>
<h2>
<span>500<sup>+</sup></span>
SVG Icons
</h2>
Font Awesome Kit.
</div>
</li>
</ul>
</div>
</section>
<section>
<div class="wrap">
<h2><strong>WebSlides Demos</strong></h2>
<p>Contribute on <a href="https://github.com/webslides/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all ›</a></span></p>
<ul class="flexblock gallery">
<li>
<a href="demos/why-webslides.html" title="Why WebSlides?">
<figure>
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
<figcaption>
<h2>Why WebSlides?</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="demos/landings.html" title="Landings">
<figure>
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
<figcaption>
<h2>Landings</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="demos/portfolios.html" title="Portfolios">
<figure>
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
<figcaption>
<h2>Portfolios</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="demos/keynote.html" title="Apple Keynote">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
<figcaption>
<h2>Apple Keynote</h2>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h4>
<svg class="fa-life-ring">
<use xlink:href="#fa-life-ring"></use>
</svg>
<strong>Guides</strong>
</h4>
<p>If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:</p>
<ul class="description">
<li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
<li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
<li><a href="demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
</ul>
</div>
<div class="column">
<figure><img class="aligncenter" src="static/images/setup.png" alt="WebSlides Files"></figure>
</div>
<div class="column">
<h4>
<svg class="fa-cubes">
<use xlink:href="#fa-cubes"></use>
</svg>
<strong>Built to expand</strong>
</h4>
<p>The best way to <strong>inspire with your content</strong> is to connect on a personal level:</p>
<ul class="description">
<li>Background images: <a href="http://unsplash.com">Unsplash</a>.</li>
<li>CSS animations: <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</li>
<li>Longforms: <a href="http://michalsnik.github.io/aos/"> Animate on scroll</a>.</li>
</ul>
</div>
</div>
<!--end .grid -->
</div>
</section>
<section class="aligncenter">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Ready to Start?</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
<p>
<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>
Free Download
</a>
<span class="try">
<a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
<svg class="fa-paypal">
<use xlink:href="#fa-paypal"></use>
</svg>
Pay what you want.
</a>
</span>
</p>
</div>
<!-- .end .wrap -->
</section>
<section class="slide-bottom">
<div class="wrap">
<div class="content-right text-serif">
<h2>
<strong>Thanks.</strong>
<a target="_blank" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=Finally,%20everything%20you%20need%20to%20make%20HTML%20presentations%20in%20a%20fast/beautiful%20way.%20@WebSlides%20=%20Good%20karma%20—%20https://webslides.tv">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
</a>
</h2>
<p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p>
<p>Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>, <a href="https://twitter.com/belelros">@belelros</a>, and <a href="https://twitter.com/luissacristan">@luissacristan</a>.</p>
</div>
<!-- .end .content-right -->
</div>
<!-- .end .wrap -->
</section>
</article>
<!-- end article -->
</main>
<!-- end main -->
<!-- A global footer
<footer role="contentinfo">
<div class="wrap">
<p>An <a href="https://github.com/webslides/webslides">open source solution</a>, by <a href="https://twitter.com/webslides">@webslides</a>.</p>
</div>
</footer> -->
<!-- Required -->
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>