352 lines
14 KiB
HTML
352 lines
14 KiB
HTML
|
<!doctype 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!
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- SEO -->
|
||
|
|
<title>WebSlides: Why WebSlides is so inspiring?</title>
|
||
|
|
<meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials.">
|
||
|
|
|
||
|
|
<!-- URL CANONICAL -->
|
||
|
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
||
|
|
|
||
|
|
<!-- 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 Base -->
|
||
|
|
<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/permalink"> <!-- EDIT -->
|
||
|
|
<meta property="og:type" content="article">
|
||
|
|
<meta property="og:title" content="Why WebSlides? Good karma" />
|
||
|
|
<meta property="og:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
|
||
|
|
<meta property="og:updated_time" content="2017-01-04T16:27:50"> <!-- EDIT -->
|
||
|
|
<meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT -->
|
||
|
|
<meta property="og:image:width" content="800">
|
||
|
|
<meta property="og:image:height" content="429">
|
||
|
|
|
||
|
|
<!-- 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="Why WebSlides? Good karma"> <!-- EDIT -->
|
||
|
|
<meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
|
||
|
|
<meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.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>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h1 class="text-landing">Good Karma</h1>
|
||
|
|
<p class="text-intro">
|
||
|
|
<strong><a href="http://webslides.tv/">WebSlides</a></strong> — HTML presentations made easy. <br>
|
||
|
|
Hypertext and beauty as narrative elements.
|
||
|
|
</p>
|
||
|
|
<nav>
|
||
|
|
<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/webslides/webslides">Github</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black aligncenter">
|
||
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
|
||
|
|
<!-- background with a frame frame -->
|
||
|
|
<span class="background frame"></span>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap fadeInUp">
|
||
|
|
<h1>
|
||
|
|
Everyone
|
||
|
|
<svg class="fa-heart-o">
|
||
|
|
<use xlink:href="#fa-heart-o"></use>
|
||
|
|
</svg>
|
||
|
|
Stories
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<!-- alignment [class*="content-"] = container max-width:50% = 600px -->
|
||
|
|
<div class="content-center">
|
||
|
|
<h2><strong>Why WebSlides?</strong></h2>
|
||
|
|
<blockquote>
|
||
|
|
<p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made <a href="https://twitter.com/search?q=%23webslides&src=typd">#WebSlides</a>."</p>
|
||
|
|
<p><cite> <img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a>.</cite></p>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
</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, scalable, and well documented. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></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>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h2>WebSlides was made to inspire people.</h2>
|
||
|
|
</div>
|
||
|
|
<div class="content-left">
|
||
|
|
<p>There are excellent presentation tools out there. WebSlides is <strong>an open source solution</strong> for telling stories. Hypertext and beauty as narrative elements.</p>
|
||
|
|
</div>
|
||
|
|
<ul class="flexblock features">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<span>→</span>
|
||
|
|
Keyboard navigation
|
||
|
|
</h2>
|
||
|
|
with arrow keys.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-link">
|
||
|
|
<use xlink:href="#fa-link"></use>
|
||
|
|
</svg>
|
||
|
|
Go to a specific slide
|
||
|
|
</h2>
|
||
|
|
URL: #slide=number
|
||
|
|
</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>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<ul class="flexblock features">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2><span>100<sup>%</sup></span> customizable</h2>
|
||
|
|
Well documented.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<span>40<sup>+</sup></span>
|
||
|
|
Beautiful Components
|
||
|
|
</h2>
|
||
|
|
Covers, cards, quotes...
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-list">
|
||
|
|
<use xlink:href="#fa-list"></use>
|
||
|
|
</svg>
|
||
|
|
Flexible blocks
|
||
|
|
</h2>
|
||
|
|
with auto-fill and equal height.
|
||
|
|
</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>
|
||
|
|
<svg class="fa-language">
|
||
|
|
<use xlink:href="#fa-language"></use>
|
||
|
|
</svg>
|
||
|
|
Fade transition
|
||
|
|
</h2>
|
||
|
|
to all slides.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<span>500<sup>+</sup></span>
|
||
|
|
SVG Icons
|
||
|
|
</h2>
|
||
|
|
Font Awesome Kit.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid vertical-align">
|
||
|
|
<div class="column">
|
||
|
|
<h3>Support</h3>
|
||
|
|
<p>Making a beautiful HTML presentation has never been so rewarding.</p>
|
||
|
|
<ul class="description">
|
||
|
|
<li><strong>Demos:</strong> <a href="../demos/landings.html">Landings</a> · <a href="../demos/portfolios.html">Portfolios</a></li>
|
||
|
|
<li><strong>Docs:</strong> <a href="../demos/components.html" title="WebSlides Components">Components</a> · <a href="../demos/classes.html" title="WebSlides Classes">Classes</a></li>
|
||
|
|
<li><strong>Tags:</strong> <a href="https://dribbble.com/tags/webslides" title="WebSlides Screenshots">Dribbble</a> · <a href="https://instagram.com/webslides" title="WebSlides Screenshots">Instagram</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h3>Extensible</h3>
|
||
|
|
<p>The best way to inspire with your content is to connect on a personal level:</p>
|
||
|
|
<ul class="description">
|
||
|
|
<li>
|
||
|
|
<strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
|
||
|
|
Animate.css</a>.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Images:</strong> <a href="http://unsplash.com" title="Unsplash">Unsplash</a>.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Videos:</strong> <a href="https://pixabay.com/en/videos" title="Pixabay"> Pixabay</a>.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end .grid-->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap-->
|
||
|
|
</section>
|
||
|
|
<section class="bg-apple aligncenter">
|
||
|
|
<span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>One more thing...</h2>
|
||
|
|
<p class="fadeInUp"><a href="../demos/keynote.html">Make your keynote — <code>.bg-apple</code></a></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
<!--main-->
|
||
|
|
|
||
|
|
<!-- Required -->
|
||
|
|
<script src="../static/js/webslides.js"></script>
|
||
|
|
|
||
|
|
<!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
|
||
|
|
<script>
|
||
|
|
window.ws = new WebSlides({ autoslide: 5000 });
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||
|
|
<script defer src="../static/js/svg-icons.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|