266 lines
12 KiB
HTML
266 lines
12 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,
|
||
|
|
@jlantunez.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- SEO -->
|
||
|
|
<title>WebSlides Demos</title>
|
||
|
|
<meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
|
||
|
|
|
||
|
|
<!-- 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="WebSlides Demos"> <!-- EDIT -->
|
||
|
|
<meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
|
||
|
|
<meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- 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 Demos"> <!-- EDIT -->
|
||
|
|
<meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- 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> <!-- Slideshow? id="webslides" -->
|
||
|
|
|
||
|
|
<!-- 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-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h1><strong>WebSlides Demos</strong></h1>
|
||
|
|
<p class="text-intro">All of these presentations are free and responsive.<br>
|
||
|
|
40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
|
||
|
|
<p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-white">
|
||
|
|
<!-- .wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<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>
|
||
|
|
<time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
|
||
|
|
</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>
|
||
|
|
<time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
|
||
|
|
</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>
|
||
|
|
<time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
|
||
|
|
</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>
|
||
|
|
<time datetime="2017-01-05T20:13:48-08:00">Jan 05, 2017</time>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="../demos/netflix-culture.html" title="Netflix's Culture">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail Netflix's Culture" src="https://webslides.tv/static/images/demos-netflix.png">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Netflix's Culture</h2>
|
||
|
|
<time datetime="2017-04-16T20:16:48-08:00">Mar 16, 2017</time>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="../demos/longforms.html" title="Longform Articles">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Longforms</h2>
|
||
|
|
<time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="../demos/interviews.html" title="Interviews">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Interviews</h2>
|
||
|
|
<time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="aligncenter">General Questions</h2>
|
||
|
|
<p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> · <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> · <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="column">
|
||
|
|
<h6>Why WebSlides? Good karma</h6>
|
||
|
|
<p>There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.</p>
|
||
|
|
<h6>Is WebSlides a framework?</h6>
|
||
|
|
<p>We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic <a href="../demos/components.html" title="WebSlides Components">structural components</a> and a scalable <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<h6>What can you do with WebSlides?</h6>
|
||
|
|
<p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
|
||
|
|
</p>
|
||
|
|
<h6>How easy is WebSlides?</h6>
|
||
|
|
<p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
</div>
|
||
|
|
<!-- end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-white aligncenter">
|
||
|
|
<!-- .wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>Start in seconds</strong> </h2>
|
||
|
|
<p class="text-intro">Create your own presentation instantly. <br>120+ 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="Good karma :)">
|
||
|
|
<svg class="fa-paypal">
|
||
|
|
<use xlink:href="#fa-paypal"></use>
|
||
|
|
</svg>
|
||
|
|
Pay what you want.
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
<!-- end main -->
|
||
|
|
|
||
|
|
<!-- 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>
|