mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-20 20:02:07 +02:00
WebSlides 0.1
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
db73f4932a
commit
7f09ba4b8f
1944
demos/classes.html
Normal file
1944
demos/classes.html
Normal file
File diff suppressed because it is too large
Load Diff
3137
demos/components.html
Normal file
3137
demos/components.html
Normal file
File diff suppressed because it is too large
Load Diff
233
demos/index.html
Normal file
233
demos/index.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!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/jlantunez/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/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.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/jlantunez/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/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</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 1200px
|
||||
-->
|
||||
|
||||
<section>
|
||||
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
|
||||
<!--.wrap = container 1200px -->
|
||||
<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 1200px -->
|
||||
<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-12-08T21:21:44-05: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-05: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-05: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-05:00">Jan 05, 2017</time>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container 1200px 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>.</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 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/components.html#slide=98">background images</a>, <a href="../demos/components.html#slide=101">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 1200px -->
|
||||
<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://github.com/jlantunez/webslides/archive/master.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 -->
|
||||
|
||||
<!-- jQuery (required for slides to work) -->
|
||||
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="../static/js/svg-icons.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
854
demos/keynote.html
Normal file
854
demos/keynote.html
Normal file
@@ -0,0 +1,854 @@
|
||||
<!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/jlantunez/webslides
|
||||
|
||||
Thanks,
|
||||
@jlantunez.
|
||||
-->
|
||||
|
||||
<!-- SEO -->
|
||||
<title>WebSlides Keynote: Make a Keynote presentation using HTML</title>
|
||||
<meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS.">
|
||||
|
||||
<!-- 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/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.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="Make a Keynote presentation using HTML"> <!-- EDIT -->
|
||||
<meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
|
||||
<meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- 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="Make a Keynote presentation using HTML"> <!-- EDIT -->
|
||||
<meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 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/jlantunez/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/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
<article 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 1200px
|
||||
-->
|
||||
|
||||
<section class="bg-apple aligncenter">
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap">
|
||||
<h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap size-50">
|
||||
<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><code>.bg-apple</code></p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap">
|
||||
<h2>HTML presentations can be easy</h2>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<h2>Features</h2>
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<span>→</span>
|
||||
Simple Navigation
|
||||
</h2>
|
||||
with arrow keys and swipe.
|
||||
</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 class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h2>WebSlides was made to inspire people.</h2>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<p>WebSlides is an wonderful way to showcase your company. All content is for demo purposes only. Images are property of their respective owners.</p>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<ul class="flexblock">
|
||||
<li>
|
||||
<div>
|
||||
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<img class="whitelogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h2>WebSlides help you build a culture of excellence.</h2>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<p>The art of storytelling. Hypertext, clean code, and beauty as narrative elements. Just essential features and lovely CSS. All content is for demo purposes only. </p>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<ul class="flexblock metrics">
|
||||
<li> Founded
|
||||
<span>1976</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-users">
|
||||
<use xlink:href="#fa-users"></use>
|
||||
</svg>
|
||||
</span>
|
||||
524M Subscribers
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-line-chart">
|
||||
<use xlink:href="#fa-line-chart"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Revenue: $16M
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<!--.wrap o <nav> = container 1200px -->
|
||||
<div class="wrap">
|
||||
<ul class="flexblock metrics border">
|
||||
<li> Founded
|
||||
<span>1976</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-users">
|
||||
<use xlink:href="#fa-users"></use>
|
||||
</svg>
|
||||
</span>
|
||||
524M Subscribers
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-line-chart">
|
||||
<use xlink:href="#fa-line-chart"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Revenue: $16M
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-building-o">
|
||||
<use xlink:href="#fa-building-o"></use>
|
||||
</svg>
|
||||
</span>
|
||||
6 Offices
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-smile-o">
|
||||
<use xlink:href="#fa-smile-o"></use>
|
||||
</svg>
|
||||
</span>
|
||||
14K Employees
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
$4M
|
||||
</span>
|
||||
EBITDA
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-university">
|
||||
<use xlink:href="#fa-university"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Bank: $76B
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/pb_lF8VWaPU/')"></span>
|
||||
<div class="wrap">
|
||||
<h2 class="text-data">3,456,789</h2>
|
||||
<h3>iPhone 7 in first 24 hours</h3>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap">
|
||||
<h2 class="text-data">$48 Billion</h2>
|
||||
<h3>Revenue in Q4 2024</h3>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple slide-bottom">
|
||||
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||||
<span class="background" style="background-image:url('https://source.unsplash.com/Y5Tjb62cxl8/')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<p>
|
||||
<svg class="large fa-tree">
|
||||
<use xlink:href="#fa-tree"></use>
|
||||
</svg>
|
||||
</p>
|
||||
<h2>1,000,000</h2>
|
||||
<h3>We're working to protect up to a million acres of sustainable forest.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="card-50">
|
||||
<figure><img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"></figure>
|
||||
<div class="flex-content">
|
||||
<h2>
|
||||
<svg class="fa-apple">
|
||||
<use xlink:href="#fa-apple"></use>
|
||||
</svg>
|
||||
iPhone 7
|
||||
</h2>
|
||||
<p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
|
||||
<p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
|
||||
</div>
|
||||
<!-- end .flex-content-->
|
||||
</div>
|
||||
<!-- end .card-50-->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="grid vertical-align">
|
||||
<div class="column">
|
||||
<h2>
|
||||
<svg class="fa-apple">
|
||||
<use xlink:href="#fa-apple"></use>
|
||||
</svg>
|
||||
iPhone 7
|
||||
</h2>
|
||||
<p class="text-intro">We worked closely with the very talented people at Acme and created a new website. Content demo. </p>
|
||||
<ul class="description">
|
||||
<li>
|
||||
<span class="text-label">
|
||||
Client:
|
||||
</span>
|
||||
Apple (2016)
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-label">
|
||||
Services:
|
||||
</span>
|
||||
Web Design
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-label">
|
||||
Website:
|
||||
</span>
|
||||
<a href="https://apple.com/iphone/">apple.com/iphone</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end .column-->
|
||||
<div class="column">
|
||||
<figure>
|
||||
<img src="../static/images/iphone.png" alt="iPhone">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- end figure-->
|
||||
</div>
|
||||
<!-- end .grid-->
|
||||
</div>
|
||||
<!-- end .wrap-->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="card-50">
|
||||
<div class="flex-content">
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-wifi">
|
||||
<use xlink:href="#fa-wifi"></use>
|
||||
</svg>
|
||||
<h2>Ultra-Fast WiFi</h2>
|
||||
Faster LTE with the best worldwide roaming.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-camera">
|
||||
<use xlink:href="#fa-camera"></use>
|
||||
</svg>
|
||||
<h2>Two cameras that shoot as one.</h2>
|
||||
12MP wide angle.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<h2>Lifetime Warranty </h2>
|
||||
We'll fix it or if we can't, we'll replace it.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end .flex-content-->
|
||||
<figure>
|
||||
<img class="aligncenter" src="../static/images/iphone.png" alt="iPhone 6">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<div class="wrap zoomIn">
|
||||
<h1>
|
||||
<svg class="fa-apple">
|
||||
<use xlink:href="#fa-apple"></use>
|
||||
</svg>
|
||||
Pay
|
||||
</h1>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<h2>
|
||||
Redesigning
|
||||
<svg class="fa-apple">
|
||||
<use xlink:href="#fa-apple"></use>
|
||||
</svg>
|
||||
Pay
|
||||
</h2>
|
||||
<p>We've been working with the Acme team over the last three months to build a new app.</p>
|
||||
<p>
|
||||
<a href="#" class="button" title="Case study">Case study ›</a>
|
||||
<a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site ›</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h2>Payments Made Simple</h2>
|
||||
<p>Apple Pay is so easy. Pay with your debit cards and credit cards with just a touch.</p>
|
||||
<div class="content-left">
|
||||
<h3>Secure</h3>
|
||||
<p>Your card is never stored. Apple Pay uses a device-specific number and unique transaction code.</p>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
<div class="content-left">
|
||||
<h3>Universal</h3>
|
||||
<p>Apple Pay works with most major credit and debit cards from nearly all banks.</p>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-bolt">
|
||||
<use xlink:href="#fa-bolt"></use>
|
||||
</svg>
|
||||
<h2>Incredibly fast</h2>
|
||||
Just hold your iPhone near the reader.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-globe">
|
||||
<use xlink:href="#fa-globe"></use>
|
||||
</svg>
|
||||
<h2>Works with all major banks</h2>
|
||||
Apple Pay is accepted in restaurants, hotels...
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-lock">
|
||||
<use xlink:href="#fa-lock"></use>
|
||||
</svg>
|
||||
<h2>The safer way to pay</h2>
|
||||
Your card number is never stored.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h1>
|
||||
<svg class="fa-apple">
|
||||
<use xlink:href="#fa-apple"></use>
|
||||
</svg>
|
||||
Pay
|
||||
</h1>
|
||||
<p>Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch. See where you can use Apple Pay:
|
||||
</p>
|
||||
<form class="user" action="/" method="post">
|
||||
<input type="text" name="location" placeholder="Stores in your city..." required>
|
||||
<button type="submit" title="Search">Search ›</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap">
|
||||
<blockquote class="wall">
|
||||
<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>
|
||||
<cite>
|
||||
<!-- <img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> --> Steve Jobs.
|
||||
</cite>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<blockquote>
|
||||
<p>“We see that privacy is a fundamental human right that people have. We are going to do everything that we can to help maintain that trust.”</p>
|
||||
<p><cite>Tim Cook, CEO of Apple.</cite></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<header>
|
||||
<!--.wrap o <nav> = container 1200px -->
|
||||
<div class="wrap">
|
||||
<p>Header <span class="alignright">.alignright</span></p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aligncenter fadeInUp">
|
||||
<h2>Simple CSS Alignments</h2>
|
||||
<p>Put content wherever you want.</p>
|
||||
</div>
|
||||
<footer class="bg-trans-dark">
|
||||
<div class="wrap">
|
||||
<p>
|
||||
<span class="alignleft">
|
||||
Footer
|
||||
</span>
|
||||
<span class="alignright">
|
||||
<a href="#" title="Twitter">
|
||||
<svg class="fa-twitter">
|
||||
<use xlink:href="#fa-twitter"></use>
|
||||
</svg>
|
||||
@username
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="bg-apple slide-top">
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>1/9 left top</h3>
|
||||
<p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
|
||||
<p><code>.slide-top and .content-left</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple slide-top">
|
||||
<div class="wrap">
|
||||
<div class="content-center">
|
||||
<h3>2/9 center top</h3>
|
||||
<p>Apple I was designed and hand-built by Steve Wozniak. Steve Jobs had the idea of selling the computer.</p>
|
||||
<p><code>.slide-top and .content-center</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple slide-top">
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<h3>3/9 right top</h3>
|
||||
<p>The Apple II is one of the first highly successful computers.</p>
|
||||
<p><code>.slide-top and .content-right</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>4/9 left center</h3>
|
||||
<p>The Apple III is a business-oriented personal computer that was intended as the successor to the Apple II series.</p>
|
||||
<p><code>.content-left</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="content-center">
|
||||
<h3>5/9 center</h3>
|
||||
<p>Apple Lisa was one of the first personal computers to offer a graphical user interface.</p>
|
||||
<p><code>.content-center</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<h3>6/9 right center</h3>
|
||||
<p>The Macintosh was the company's first mass-market personal computer featuring a GUI and mouse.</p>
|
||||
<p><code>.content-right</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple slide-bottom">
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>7/9 left bottom</h3>
|
||||
<p>The iBook was a line of laptop computers designed and marketed by Apple Inc. from 1999 to 2006.</p>
|
||||
<p><code>.slide-bottom</code> and <code>.content-left</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple slide-bottom">
|
||||
<div class="wrap">
|
||||
<div class="content-center">
|
||||
<h3>8/9 center bottom</h3>
|
||||
<p>Apple introduced the first generation iPod on October 23, 2001, with the slogan "1,000 songs in your pocket".</p>
|
||||
<p><code>.slide-bottom</code> and <code>.content-center</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple slide-bottom">
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<h3>9/9 right bottom</h3>
|
||||
<p>The original iPhone was introduced by Steve Jobs on January 9, 2007. Jobs introduced the iPhone as a combination of three devices.</p>
|
||||
<p><code>.slide-bottom</code> and <code>.content-right</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap size-50">
|
||||
<h2>CSS Animations</h2>
|
||||
<p>Fadein transition to all slides.</p>
|
||||
<pre><article id="webslides">
|
||||
<section>
|
||||
<div class="wrap fadeInUp">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section>
|
||||
</article></pre>
|
||||
<p>Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<span class="background light" style="background-image:url('https://source.unsplash.com/bopC0sTGu-E/')"></span>
|
||||
<div class="wrap">
|
||||
<h2>Embedding Media</h2>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple">
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>Responsive Videos</h3>
|
||||
<pre><div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||
</iframe>
|
||||
</div></pre>
|
||||
<p><code>.embed</code></p>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<!-- <div class="embed"> = Responsive -->
|
||||
<div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/CQY3KUR3VzM" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple fullscreen">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/mtY0K2fiFOA" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<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>
|
||||
<div class="wrap size-50">
|
||||
<h2><strong>Be Awesome</strong></h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<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 -->
|
||||
<div class="wrap size-50">
|
||||
<h2><strong>Think Different</strong></h2>
|
||||
<p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p>
|
||||
</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">
|
||||
<h1>One more thing...</h1>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<div class="wrap">
|
||||
<div class="cta">
|
||||
<div class="number">
|
||||
<p><span>Ag</span></p>
|
||||
</div>
|
||||
<!--end .number -->
|
||||
<div class="benefit">
|
||||
<p class="text-subtitle">San Francisco</p>
|
||||
<h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
|
||||
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
|
||||
<p>abcdefghijklmnopqrstuvwxyz</p>
|
||||
<p>1234567890(,.;:?!$&*)</p>
|
||||
</div>
|
||||
<!--end .benefit -->
|
||||
</div>
|
||||
<!--end .cta -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<!-- .wrap = container 1200px -->
|
||||
<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/archive/master.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>
|
||||
<section class="bg-apple aligncenter">
|
||||
<h2><strong>Thank you!</strong></h2>
|
||||
<p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
|
||||
<p class="text-symbols">* * *</p>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
<!-- jQuery (required for slides to work) -->
|
||||
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="../static/js/svg-icons.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1928
demos/landings.html
Normal file
1928
demos/landings.html
Normal file
File diff suppressed because it is too large
Load Diff
1869
demos/portfolios.html
Normal file
1869
demos/portfolios.html
Normal file
File diff suppressed because it is too large
Load Diff
349
demos/why-webslides.html
Normal file
349
demos/why-webslides.html
Normal file
@@ -0,0 +1,349 @@
|
||||
<!doctype html>
|
||||
<html lang="en-US" 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/jlantunez/webslides
|
||||
|
||||
Thanks,
|
||||
@jlantunez.
|
||||
-->
|
||||
|
||||
<!-- 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/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.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?" />
|
||||
<meta property="og:description" content="WebSlides is about good karma. Create your own HTML presentation instantly."> <!-- 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 about telling stories beautifully."> <!-- 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="https://webslides.tv" title="WebSlides">WebSlides</a></p>
|
||||
<ul>
|
||||
<li class="github">
|
||||
<a rel="external" href="https://github.com/jlantunez/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/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</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 1200px / <div class="wrap size-50"> = 600px;
|
||||
-->
|
||||
|
||||
<section>
|
||||
<!--.wrap = container 1200px -->
|
||||
<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/jlantunez/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>
|
||||
<!--.wrap = container 1200px -->
|
||||
<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 1200px -->
|
||||
<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 1200px -->
|
||||
<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 1200px</h2>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</pre>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container 1200px -->
|
||||
<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/jlantunez/webslides" title="Github"><img 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">Make your keynote — <code>.bg-apple</code></a></p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
<!-- jQuery (required for slides to work) -->
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="../static/js/svg-icons.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user