1934 lines
77 KiB
HTML
1934 lines
77 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 Landings: Create your web presence easily</title>
|
||
|
|
<meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use.">
|
||
|
|
|
||
|
|
<!-- 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 Landings: Create your web presence easily"> <!-- EDIT -->
|
||
|
|
<meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
|
||
|
|
<meta property="og:updated_time" content="2017-01-04T16:54:27"> <!-- 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 Landings: Create your web presence easily"> <!-- EDIT -->
|
||
|
|
<meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 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">
|
||
|
|
|
||
|
|
<!-- 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 class="bg-purple aligncenter">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
|
||
|
|
<!--.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/webslides/webslides" title="Download WebSlides for free"><svg class="fa-github">
|
||
|
|
<use xlink:href="#fa-github"></use>
|
||
|
|
</svg> WebSlides</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.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>
|
||
|
|
</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 looks neat, pure. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a>. <strong>Tutorials</strong>: <a href="../demos/components.html" title="WebSlides Components">Components</a> · <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</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 size-50">
|
||
|
|
<h3>Let's check out some examples.</h3>
|
||
|
|
<p>All content is for demo purposes only. </p>
|
||
|
|
<hr>
|
||
|
|
<ol class="text-cols">
|
||
|
|
<li><a target="_blank" href="#slide=5">Welcomes</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=12">Covers</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=21">Abouts & Teams</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=29">Features & Benefits</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=37">Cards</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=41">Metrics & Data</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=46">Pricing & Offers</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=52">Quotes</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=58">Buttons & Badges</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=59">Forms</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=64">SVG Icons</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=65">Logos</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=66">CSS Animations</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=71">Embedding videos, maps, charts...</a></li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!--.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>
|
||
|
|
Make it simple, but significant.</p>
|
||
|
|
<nav class="aligncenter">
|
||
|
|
<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>
|
||
|
|
</section>
|
||
|
|
<section class="bg-secondary">
|
||
|
|
<!--.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>
|
||
|
|
<p>Stories have the power to change the world. WebSlides helps you write better content, faster. Your slides are there to support your story. Choose words wisely, create meaning with them, keep it simple.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3>
|
||
|
|
<hr>
|
||
|
|
<div class="bg-white shadow">
|
||
|
|
<ul class="flexblock reasons">
|
||
|
|
<li>
|
||
|
|
<h2>We're web people.</h2>
|
||
|
|
<p>There're excellent presentation tools out there. WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code 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="https://webslides.tv/demos" 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>
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<h2><strong>Why WebSlides?</strong></h2>
|
||
|
|
<p class="text-intro">There are amazing presentation tools out there.</p>
|
||
|
|
<p>Everyone loves a good story. WebSlides is about <strong>good karma</strong>. This is about telling the story, and sharing it in a beautiful way. How? Making HTML presentations easy. Hypertext, clean code, and beauty as narrative elements.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
<p class="aligncenter">Best,<br>
|
||
|
|
<a href="https://twitter.com/jlantunez">@jlantunez</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="cta-cover">
|
||
|
|
<h1><strong>HTML Presentations</strong> Made Easy</h1>
|
||
|
|
<p class="alignright">
|
||
|
|
<a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides">
|
||
|
|
<svg class="fa-cloud-download">
|
||
|
|
<use xlink:href="#fa-cloud-download"></use>
|
||
|
|
</svg>
|
||
|
|
WebSlides
|
||
|
|
</a>
|
||
|
|
<span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<ul class="flexblock features">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2><span>100<sup>%</sup></span> customizable</h2>
|
||
|
|
Clean markup.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-heart-o">
|
||
|
|
<use xlink:href="#fa-heart-o"></use>
|
||
|
|
</svg>
|
||
|
|
Good Karma
|
||
|
|
</h2>
|
||
|
|
Just the right features.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-code">
|
||
|
|
<use xlink:href="#fa-code"></use>
|
||
|
|
</svg>
|
||
|
|
Prototype faster
|
||
|
|
</h2>
|
||
|
|
Design landings, portfolios...
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</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">
|
||
|
|
<p class="text-subtitle">Welcomes</p>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-apple">
|
||
|
|
<use xlink:href="#fa-apple"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Call to Action</strong>
|
||
|
|
</h2>
|
||
|
|
<p>Make secure purchases in stores, in apps, and now on the web. The safer way to pay. </p>
|
||
|
|
<p>
|
||
|
|
<a href="#" class="badge-ios" title="iOS App">iOS app</a>
|
||
|
|
<a href="#" class="badge-android" title="Android app">Android app</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid vertical-align">
|
||
|
|
<div class="column">
|
||
|
|
<figure>
|
||
|
|
<img src="../static/images/android.png" alt="Pixel Phone">
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<!-- end column-->
|
||
|
|
<div class="column">
|
||
|
|
<h2>
|
||
|
|
Cari is your best friend
|
||
|
|
</h2>
|
||
|
|
<p class="text-intro">Your life will be more complete.</p>
|
||
|
|
<p>Cari makes connections based on your relationships, uses humor, and is eager to learn more about your world and how to make your life easier to manage.</p>
|
||
|
|
<p>
|
||
|
|
<a href="#" class="badge-ios" title="iOS App">iOS app</a>
|
||
|
|
<a href="#" class="badge-android" title="Android app">Android app</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column-->
|
||
|
|
</div>
|
||
|
|
<!-- end .grid-->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap-->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/wn7Vdl8_yXc/1600x800')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="text-landing"><strong>Covers</strong></h2>
|
||
|
|
</div>
|
||
|
|
</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/Vti8XHv2XjU/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1 class="text-landing text-shadow"><strong>California</strong></h1>
|
||
|
|
<p class="text-shadow">
|
||
|
|
<svg class="fa-map-marker">
|
||
|
|
<use xlink:href="#fa-map-marker"></use>
|
||
|
|
</svg>
|
||
|
|
Yosemite National Park.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<div class="wrap">
|
||
|
|
<p>
|
||
|
|
<span class="alignleft"> <a href="#" title="Instagram">
|
||
|
|
<img class="whitelogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
|
||
|
|
</a></span>
|
||
|
|
<span class="alignright">
|
||
|
|
<a href="#" class="badge-ios" title="iOS App">iOS app</a>
|
||
|
|
<a href="#" class="badge-android" title="Android app">Android app</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-v">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/nxfuA21kNHY/1440x1440')"></span>
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<p class="text-context">GOOD KARMA</p>
|
||
|
|
<h2>WebSlides is about <strong>telling the story</strong>, and sharing it in a beautiful way.</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/YMOHw3F1Hdk/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="alignright size-50 bg-trans-dark">
|
||
|
|
<p class="text-subtitle text-serif">New in London</p>
|
||
|
|
<h3><strong>Hotel Daenerys</strong></h3>
|
||
|
|
<p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p>
|
||
|
|
<p class="aligncenter"><a class="button" href="#">More info</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black aligncenter">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/mGYxAWITqMg/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-subtitle">Plan your next trip</p>
|
||
|
|
<h1 class="text-landing text-shadow">Summ.er</h1>
|
||
|
|
<p class="text-intro">The best places at the best price.</p>
|
||
|
|
<p>
|
||
|
|
<a href="#" class="badge-ios" title="iOS App">Install iOS app</a>
|
||
|
|
<a href="#" class="badge-android" title="Android app">Install Android app</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/7waHOTcvcT4/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-data">$975</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black slide-top">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/sK1hW5knKkw/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="text-landing">Living on Mars</h2>
|
||
|
|
<p class="text-context text-intro">Paula Chan, CEO of SpaceY.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
<footer>
|
||
|
|
<div class="wrap">
|
||
|
|
<p>
|
||
|
|
<span class="alignright"><img class="whitelogo" src="../static/images/logos/nyt.svg" alt="The New York Times"></span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
<section class="slide-top">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/5gn2soeAc40/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-context"><strong>PROBLEM & SOLUTION</strong></p>
|
||
|
|
<h2>The history of the music industry is also the story of the development of technology.</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black slide-bottom">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/Q1p7bh3SHj8/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-subtitle">Location Intelligence</p>
|
||
|
|
<h2><strong>The application of geographic mapping to data</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Abouts & Teams</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-primary">
|
||
|
|
<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>WebSlides is the easiest HTML presentation framework. All content is for demo purposes only. All images are the copyright 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>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>About/Services/Clients</h3>
|
||
|
|
<p><code>ul.flexblock.blink.border</code></p>
|
||
|
|
<ul class="flexblock blink border">
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3>Interfaces</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Architecture</li>
|
||
|
|
<li>Design</li>
|
||
|
|
<li>Development</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3>Content Strategy</h3>
|
||
|
|
Beautiful and engaging stories that inspires consumers to take action.
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3>Customer Experience</h3>
|
||
|
|
Attitude. Little details. People always remember how you made them feel.
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3>Recruitment</h3>
|
||
|
|
We like to help startups by working with them since the beginning.
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<img class="aligncenter" src="../static/images/logos/google.svg" alt="Google"> Collaboration with the Acme team to design their mobile apps.
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<img class="aligncenter blacklogo" src="../static/images/logos/google.svg" alt="Google"> We worked closely with the UX team on photography for the site. <code>img.blacklogo</code>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<img class="aligncenter graylogo" src="../static/images/logos/google.svg" alt="Google"> Acme hired us to help make the reading experience totally engaging. <code>img.graylogo</code>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="bg-blue">
|
||
|
|
<a href="#" title="Block Link = .blink">
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<img class="aligncenter whitelogo" src="../static/images/logos/google.svg" alt="Google"> We worked with Acme to develop recruiting processes. <code>img.whitelogo</code>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.steps</h3>
|
||
|
|
<ul class="flexblock steps">
|
||
|
|
<!-- li>a? Add blink = <ul class="flexblock steps blink">-->
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-heartbeat">
|
||
|
|
<use xlink:href="#fa-heartbeat"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<h2>01. Passion</h2>
|
||
|
|
<p>When you're really passionate about your job, you can change the world.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="process step-2"></div>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-magic">
|
||
|
|
<use xlink:href="#fa-magic"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<h2>02. Purpose</h2>
|
||
|
|
<p>Why does this business exist? How are you different? Why matters?</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="process step-3"></div>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-balance-scale">
|
||
|
|
<use xlink:href="#fa-balance-scale"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<h2>03. Principles</h2>
|
||
|
|
<p>Leadership through usefulness, openness, empathy, and good taste.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="process step-4"></div>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-cog">
|
||
|
|
<use xlink:href="#fa-cog"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<h2>04. Process</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Useful</li>
|
||
|
|
<li>Easy</li>
|
||
|
|
<li>Fast</li>
|
||
|
|
<li>Beautiful</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="column">
|
||
|
|
<h3 class="text-context">
|
||
|
|
FAQs</h3>
|
||
|
|
<p>WebSlides is an open source solution by <a href="https://twitter.com/jlantunez">@jlantunez</a>. If you have additional questions, <a href="https://twitter.com/webslides" title="@WebSlides">get in touch!</a></p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<h6>Why WebSlides?</h6>
|
||
|
|
<p>There are excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p>
|
||
|
|
<p class="text-symbols">* * *</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">
|
||
|
|
<h6>What can I 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>
|
||
|
|
<p class="text-symbols">* * *</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>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>Why WebSlides?</h2>
|
||
|
|
<p><code>.text-cols (2 columns)</code>.</p>
|
||
|
|
<div class="text-cols">
|
||
|
|
<p>Everyone loves a good story. WebSlides is about sharing and <strong>good karma</strong>. This is about telling the story, and sharing it in a beautiful way. How? Making HTML presentations easy. Hypertext, clean code, and beauty as narrative elements. </p>
|
||
|
|
<p><strong>WebSlides help you build a culture of innovation and excellence</strong>. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste. When you're really passionate about your job, you can change the world. </p>
|
||
|
|
</div>
|
||
|
|
<ul class="flexblock metrics">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-twitter">
|
||
|
|
<use xlink:href="#fa-twitter"></use>
|
||
|
|
</svg>
|
||
|
|
@WebSlides
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-github">
|
||
|
|
<use xlink:href="#fa-github"></use>
|
||
|
|
</svg>
|
||
|
|
Contribute
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-phone">
|
||
|
|
<use xlink:href="#fa-phone"></use>
|
||
|
|
</svg>
|
||
|
|
Call us at 555.345.6789
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>Team</h3>
|
||
|
|
<ul class="flexblock gallery">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/E6MWxCjNhYs/800x600">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Alicia Jiménez</h2>
|
||
|
|
<p>Founder & CEO</p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/6anudmpILw4/800x600">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Sam Trololovitz</h2>
|
||
|
|
<p>Master of nothing</p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/IFxjDdqK_0U/800x600">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Erin Gustafson</h2>
|
||
|
|
<p>VP of Design</p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>Team</h3>
|
||
|
|
<ul class="flexblock gallery">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/IFxjDdqK_0U/800x600">
|
||
|
|
<div class="overlay">
|
||
|
|
<h2>Mila Yang</h2>
|
||
|
|
<p>The Boss</p>
|
||
|
|
</div>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/zhkTCCmD4xI/800x600">
|
||
|
|
<div class="overlay">
|
||
|
|
<h2>Shin Ahmed</h2>
|
||
|
|
<p>CTO</p>
|
||
|
|
</div>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/uPGOEbjbVGA/800x600">
|
||
|
|
<div class="overlay">
|
||
|
|
<h2>Julia Porter</h2>
|
||
|
|
<p>Digital Designer</p>
|
||
|
|
</div>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Features & Benefits</strong></h2>
|
||
|
|
</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 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-brown">
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="column">
|
||
|
|
<svg class="fa-line-bolt large">
|
||
|
|
<use xlink:href="#fa-bolt"></use>
|
||
|
|
</svg>
|
||
|
|
<h3><strong>Feature 1</strong></h3>
|
||
|
|
<p>Test your web and mobile designs, and quickly incorporate user feedback.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<a href="#" title="Link">
|
||
|
|
<svg class="fa-heartbeat large">
|
||
|
|
<use xlink:href="#fa-heartbeat"></use>
|
||
|
|
</svg>
|
||
|
|
<h3><strong>Benefit 2</strong></h3>
|
||
|
|
</a>
|
||
|
|
<p>When you're really passionate about your job, you can change the world.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<span>
|
||
|
|
<svg class="fa-line-chart large">
|
||
|
|
<use xlink:href="#fa-line-chart"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<h3><strong>Design Better</strong></h3>
|
||
|
|
<p>The most popular elements commonly used for creating landings and portfolios.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end .grid-->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap-->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid vertical-align">
|
||
|
|
<div class="column">
|
||
|
|
<figure><img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"></figure>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h1>
|
||
|
|
<svg class="fa-apple">
|
||
|
|
<use xlink:href="#fa-apple"></use>
|
||
|
|
</svg>
|
||
|
|
iPhone 7
|
||
|
|
</h1>
|
||
|
|
<p class="text-intro">3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align</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>
|
||
|
|
<p><a class="button" href="http://apple.com/iphone/">apple.com/iphone</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end .grid-->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h2>iPhone 7</h2>
|
||
|
|
<p>A phone should be absolutely simple, beautiful, and magical to use. 3D Touch, 12MP photos, and 4K video.</p>
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>Benefit 1</h3>
|
||
|
|
<p>The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .content-left -->
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>Benefit 2</h3>
|
||
|
|
<p>The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .content-left -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .content-left -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid vertical-align">
|
||
|
|
<div class="column">
|
||
|
|
<figure>
|
||
|
|
<img src="../static/images/android.png" alt="Pixel Phone">
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<!-- end column-->
|
||
|
|
<div class="column">
|
||
|
|
<h2>
|
||
|
|
A Phone by Google
|
||
|
|
</h2>
|
||
|
|
<p class="text-intro">Pixel's camera lets you take brilliant photos in low light, bright light or any light.</p>
|
||
|
|
<ul class="description">
|
||
|
|
<li>
|
||
|
|
<span class="text-label">
|
||
|
|
Client:
|
||
|
|
</span>
|
||
|
|
Google (2016).
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span class="text-label">
|
||
|
|
Services:
|
||
|
|
</span>
|
||
|
|
Industrial Design.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span class="text-label">
|
||
|
|
Website:
|
||
|
|
</span>
|
||
|
|
<a href="https://madeby.google.com/phone/">madeby.google.com/phone</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- end .column-->
|
||
|
|
</div>
|
||
|
|
<!-- end .grid-->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap-->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<!-- [class*="content-"] = container max-width:50% = 600px -->
|
||
|
|
<div class="content-center">
|
||
|
|
<h3>ul.flexblock.specs</h3>
|
||
|
|
<ul class="flexblock specs">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-long-arrow-right">
|
||
|
|
<use xlink:href="#fa-long-arrow-right"></use>
|
||
|
|
</svg>
|
||
|
|
Navigation with arrow keys and slide counter
|
||
|
|
</h2>
|
||
|
|
Fade transition to all slides.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-link">
|
||
|
|
<use xlink:href="#fa-link"></use>
|
||
|
|
</svg>
|
||
|
|
Permalinks
|
||
|
|
</h2>
|
||
|
|
Go to a specific slide. URL: #slide=number
|
||
|
|
</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>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- end .content-center -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<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-battery-full">
|
||
|
|
<use xlink:href="#fa-battery-full"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>All day battery life</h2>
|
||
|
|
Your battery worries may be over.
|
||
|
|
</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">
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<!-- .end card-50 -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Cards</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="card-50 bg-white">
|
||
|
|
<figure>
|
||
|
|
<img src="https://source.unsplash.com/wvVX5xcAYhU/800x600" alt="Man in a motorcycle">
|
||
|
|
<figcaption>
|
||
|
|
<a href="https://unsplash.com/@hollowaykryan" title="Victoriano Izquierdo">
|
||
|
|
<svg class="fa-camera">
|
||
|
|
<use xlink:href="#fa-camera"></use>
|
||
|
|
</svg>
|
||
|
|
Ryan Holloway (Unsplash)
|
||
|
|
</a>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
<!-- end figure-->
|
||
|
|
<div class="flex-content">
|
||
|
|
<h2>
|
||
|
|
Cards
|
||
|
|
</h2>
|
||
|
|
<p>Price: $64 — <strong>.card-50</strong></p>
|
||
|
|
<ul class="description">
|
||
|
|
<li>
|
||
|
|
<strong class="text-label">Size:</strong> 24/32.
|
||
|
|
</li>
|
||
|
|
<li><strong class="text-label">Color:</strong> Black.</li>
|
||
|
|
<li><strong class="text-label">Composition:</strong> Cotton 99%; Elastane 1%.</li>
|
||
|
|
</ul>
|
||
|
|
<p>
|
||
|
|
5-pocket low-rise jeans in washed stretch denim with a button fly and slim legs. The jeans are made partly from recycled cotton.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
</div>
|
||
|
|
<!-- .end .card50 -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="card-60 bg-white">
|
||
|
|
<figure>
|
||
|
|
<img src="https://source.unsplash.com/HoevDVvxInw/960x720" alt="Alhambra, Granada">
|
||
|
|
<figcaption>
|
||
|
|
<a href="https://unsplash.com/@victoriano" title="Victoriano Izquierdo">
|
||
|
|
<svg class="fa-camera">
|
||
|
|
<use xlink:href="#fa-camera"></use>
|
||
|
|
</svg>
|
||
|
|
Victoriano Izquierdo (Unsplash)
|
||
|
|
</a>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
<!-- end figure-->
|
||
|
|
<div class="flex-content">
|
||
|
|
<h2>
|
||
|
|
Cards
|
||
|
|
</h2>
|
||
|
|
<p>Alhambra, Granada — <strong>.card-60</strong></p>
|
||
|
|
<ul class="description">
|
||
|
|
<li>
|
||
|
|
<strong class="text-label">Area:</strong> 105.000 m<sup>2</sup>
|
||
|
|
</li>
|
||
|
|
<li><strong class="text-label">Date:</strong> S. XIII-XIV.</li>
|
||
|
|
<li><strong class="text-label">Website:</strong> <a href="http://www.alhambra-patronato.es/"> alhambra-patronato.es</a></li>
|
||
|
|
</ul>
|
||
|
|
<p>
|
||
|
|
The palatial city consist of six palaces and two tower-palaces, of which only the Palaces of Comares and of the Lions have been preserved.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
</div>
|
||
|
|
<!-- .end .card50 -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen bg-white">
|
||
|
|
<div class="card-50">
|
||
|
|
<figure>
|
||
|
|
<img src="https://source.unsplash.com/ALtNa-uKy3M/" alt="Bonsai">
|
||
|
|
</figure>
|
||
|
|
<!-- end figure-->
|
||
|
|
<div class="flex-content">
|
||
|
|
<h2><strong>Bonsai</strong></h2>
|
||
|
|
<p class="text-intro">Bonsai is a Japanese art form using trees grown in containers — .fullscreen > .card-50.</p>
|
||
|
|
<p>Similar practices exist in other cultures, including the Chinese tradition of penjing from which the art originated, and the miniature living landscapes of Vietnamese hòn non bộ.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Metrics & Data</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h2>WebSlides help you build a culture of innovation.</h2>
|
||
|
|
</div>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
<div class="content-left">
|
||
|
|
<p><code>.flexblock.metrics</code> All content is for demo purposes only, to show an example of a live site. All images are the copyright of their respective owners.</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
<ul class="flexblock metrics">
|
||
|
|
<li> Founded
|
||
|
|
<span>1986</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>120+</span>
|
||
|
|
Prebuilt Slides
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-users">
|
||
|
|
<use xlink:href="#fa-users"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
32M Downloads
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-line-chart">
|
||
|
|
<use xlink:href="#fa-line-chart"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
Revenue: $72M
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-green">
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>Metrics</h3>
|
||
|
|
<!-- li>a? Add blink (block link) = <ul class="flexblock metrics blink">-->
|
||
|
|
<ul class="flexblock metrics border">
|
||
|
|
<li> Founded
|
||
|
|
<span>1972</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-users">
|
||
|
|
<use xlink:href="#fa-users"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
24M 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>
|
||
|
|
8 Offices
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-smile-o">
|
||
|
|
<use xlink:href="#fa-smile-o"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
48 Employees
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-usd">
|
||
|
|
<use xlink:href="#fa-usd"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
EBITDA: $2,4M
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>
|
||
|
|
<svg class="fa-university">
|
||
|
|
<use xlink:href="#fa-university"></use>
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
Bank: $32M
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black aligncenter">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/rCOWMC8qf8A/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="text-data">2,356,478</h2>
|
||
|
|
<h3>downloads in first 72 hours </h3>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black slide-bottom">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/RSOxw9X-suY/')"></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>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Pricing & Offers</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<ul class="flexblock plans blink">
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Register">
|
||
|
|
<h2>Basic</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price">Free</span>
|
||
|
|
<p>Good karma. Just the right features. 100% customizable. Make it yours.</p>
|
||
|
|
<span class="button ghost">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Medium</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
|
||
|
|
<p>Content is for demo purposes only. Minimum effort, amazing results.</p>
|
||
|
|
<span class="button radius">Buy Now</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Premium <sup>(save 20%)</sup></h2>
|
||
|
|
<div>
|
||
|
|
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
|
||
|
|
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
|
||
|
|
<span class="button ghost">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-purple">
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<ul class="flexblock plans blink">
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Register">
|
||
|
|
<h2>Basic</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price">Free</span>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Free</strong> forever
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Eternal</strong> sunshine
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Ads</strong>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="button ghost">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Good Karma</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Exclusive</strong> content
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Unlimited</strong> projects
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Unlimited</strong> users
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="button">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-v">
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="aligncenter">Choose one plan</h2>
|
||
|
|
<p class="aligncenter">Simple pricing. No credit card required!</p>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Plans</th>
|
||
|
|
<th>Good</th>
|
||
|
|
<th>Better</th>
|
||
|
|
<th>Awesome</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Price</td>
|
||
|
|
<td>Free</td>
|
||
|
|
<td>$6</td>
|
||
|
|
<td>$10</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>HD Streaming</td>
|
||
|
|
<td>No</td>
|
||
|
|
<td>Yes</td>
|
||
|
|
<td>Yes</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Screens you can watch on at the same time</td>
|
||
|
|
<td>1</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>Unlimited</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Access to exclusive content</td>
|
||
|
|
<td>No</td>
|
||
|
|
<td>No</td>
|
||
|
|
<td>Yes</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="frame bg-red">
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="cta">
|
||
|
|
<div class="number">
|
||
|
|
<p><span><sup>$</sup>40</span></p>
|
||
|
|
</div>
|
||
|
|
<!--end .number -->
|
||
|
|
<div class="benefit">
|
||
|
|
<h2>Watch TV shows anytime, anywhere</h2>
|
||
|
|
<p>.frame.bg-red</p>
|
||
|
|
</div>
|
||
|
|
<!--end .benefit -->
|
||
|
|
</div>
|
||
|
|
<!--end .cta -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="frame bg-red">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="cta">
|
||
|
|
<div class="number">
|
||
|
|
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
||
|
|
</div>
|
||
|
|
<!--end .number -->
|
||
|
|
<div class="benefit">
|
||
|
|
<h2>Get 8 weeks free</h2>
|
||
|
|
</div>
|
||
|
|
<!--end .benefit -->
|
||
|
|
</div>
|
||
|
|
<!--end .cta -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Quotes</strong></h2>
|
||
|
|
</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 #WebSlides."</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 class="bg-black-blue">
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<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>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="card-50">
|
||
|
|
<a href="https://en.wikipedia.org/wiki/Leonardo_da_Vinci" title="Leonardo da Vinci - Wikipedia">
|
||
|
|
<figure><img src="../static/images/davinci.png" alt="Leonardo da Vinci"></figure>
|
||
|
|
<blockquote>
|
||
|
|
<p>“WebSlides helped us build a culture of innovation and excellence.”</p>
|
||
|
|
<p><cite>Leonardo da Vinci</cite></p>
|
||
|
|
</blockquote>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-primary">
|
||
|
|
<span class="background-left-bottom" style="background-image:url('https://webslides.tv/static/images/satya.png')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-right">
|
||
|
|
<blockquote>
|
||
|
|
<p>"We will reinvent productivity to empower every person and every organization on the planet to do more and achieve more."</p>
|
||
|
|
<p><cite>Satya Nadella.</cite></p>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
<footer>
|
||
|
|
<p class="alignright"><img class="whitelogo" src="../static/images/logos/microsoft.svg" alt="Microsoft"></p>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
<section class="bg-apple">
|
||
|
|
<span class="background-left-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-right">
|
||
|
|
<blockquote>
|
||
|
|
<p>"Some people see innovation as change, but we have never really seen it like that. It's making things better."</p>
|
||
|
|
<p><cite>Tim Cook, CEO of Apple.</cite></p>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h2>Buttons</h2>
|
||
|
|
<p>
|
||
|
|
<a href="#" class="button" title="Button">
|
||
|
|
.button</a>
|
||
|
|
<a href="#" class="button" title="Button">
|
||
|
|
<svg class="fa-github">
|
||
|
|
<use xlink:href="#fa-github"></use>
|
||
|
|
</svg>
|
||
|
|
svg icon
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a href="#" class="button radius" title="Button">
|
||
|
|
.button.radius</a> <a href="#" class="button ghost" title="Button">
|
||
|
|
.button.ghost</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="content-left">
|
||
|
|
<h2>Badges</h2>
|
||
|
|
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
|
||
|
|
<p>
|
||
|
|
<a href="#" class="badge-ios" title="Download iOS App">
|
||
|
|
iOS App</a>
|
||
|
|
<a href="#" class="badge-android" title="Download Android App">
|
||
|
|
Android App</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2>Forms</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
|
||
|
|
<!--.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>
|
||
|
|
<form action="/" method="post" class="bg-trans-dark">
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li><input type="email" tabindex="1" name="email" placeholder="your@email.com" required></li>
|
||
|
|
<li><input type="password" tabindex="2" name="password" placeholder="Password" required></li>
|
||
|
|
<li><button type="submit" class="radius" tabindex="3" title="Sign Up">Sign Up ›</button></li>
|
||
|
|
</ul>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-white">
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="grid vertical-align">
|
||
|
|
<div class="column">
|
||
|
|
<form action="/" method="post">
|
||
|
|
<fieldset>
|
||
|
|
<legend>Create a free account</legend>
|
||
|
|
<p><input type="text" tabindex="1" name="username" placeholder="Username" required></p>
|
||
|
|
<p><input type="email" tabindex="2" name="email" placeholder="your@email.com" required></p>
|
||
|
|
<p><input type="password" tabindex="3" name="password" placeholder="Password" required></p>
|
||
|
|
<p><button type="submit" tabindex="4" title="Sign Up">Sign Up ›</button></p>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<!-- .end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<ul class="flexblock specs">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-heart-o">
|
||
|
|
<use xlink:href="#fa-heart-o"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Good karma </h2>
|
||
|
|
Just the right features.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-bolt">
|
||
|
|
<use xlink:href="#fa-bolt"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Fast & Versatile</h2>
|
||
|
|
No need to know code. 120+ slides.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-lock">
|
||
|
|
<use xlink:href="#fa-lock"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Private Network</h2>
|
||
|
|
Simple and secure file sharing.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .column -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .grid -->
|
||
|
|
</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>
|
||
|
|
Accepting
|
||
|
|
<svg class="fa-apple">
|
||
|
|
<use xlink:href="#fa-apple"></use>
|
||
|
|
</svg>
|
||
|
|
Pay is easy
|
||
|
|
</h2>
|
||
|
|
<p>Check out all the places where you can check out. If you already accept credit and debit cards, simply contact your payment provider to start accepting Apple Pay:
|
||
|
|
</p>
|
||
|
|
<form action="/" class="user" method="post">
|
||
|
|
<input type="search" name="location" tabindex="1" placeholder="Stores in your city..." required>
|
||
|
|
<button type="submit" tabindex="2" title="Search">Search ›</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-primary">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
|
||
|
|
<!--.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">
|
||
|
|
<fieldset>
|
||
|
|
<legend>Welcome back</legend>
|
||
|
|
<p><label>Username or Email</label>
|
||
|
|
<input type="text" tabindex="1" name="email" placeholder="your@email.com" required>
|
||
|
|
</p>
|
||
|
|
<p><label>Password <span class="alignright"><a href="#" title="Forgot password?">Forgot?</a></span></label>
|
||
|
|
<input type="password" tabindex="2" name="password" placeholder="6 characters minimum" required>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<button type="submit" tabindex="3" title="Login">Login ›</button>
|
||
|
|
</p>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
<p class="aligncenter">Don't have an account? <a href="#" title="Sign up">Sign up!</a></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<p class="text-subtitle">Optional · 500+ icons</p>
|
||
|
|
<h2>
|
||
|
|
<a href="http://fontawesome.io/icons/">
|
||
|
|
<svg class="fa-flag">
|
||
|
|
<use xlink:href="#fa-flag"></use>
|
||
|
|
</svg>
|
||
|
|
Font Awesome
|
||
|
|
</a>
|
||
|
|
as SVG icons
|
||
|
|
</h2>
|
||
|
|
<pre><svg class="fa-flag">
|
||
|
|
<use xlink:href="#fa-flag"></use>
|
||
|
|
</svg></pre>
|
||
|
|
<p>How to change icons?</p>
|
||
|
|
<ol class="text-cols">
|
||
|
|
<li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
|
||
|
|
<li>Create a free account.</li>
|
||
|
|
<li>Select new icons.</li>
|
||
|
|
<li>Publish as SVG sprite.</li>
|
||
|
|
<li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>Transparent Logos</h2>
|
||
|
|
<p>
|
||
|
|
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
|
||
|
|
</p>
|
||
|
|
<hr>
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<img src="../static/images/logos/google.svg" alt="Google">
|
||
|
|
<p><strong>Height recommended</strong>: 48px</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
|
||
|
|
<p><code>img.blacklogo</code></p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<img class="graylogo" src="../static/images/logos/google.svg" alt="Google">
|
||
|
|
<p><code>img.graylogo</code></p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="bg-green">
|
||
|
|
<div>
|
||
|
|
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
|
||
|
|
<p><code>img.whitelogo</code></p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<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 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter fadeInUp">
|
||
|
|
<h2>The little things mean the most</h2>
|
||
|
|
<p>.fadeInUp</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-40 zoomIn aligncenter">
|
||
|
|
<figure>
|
||
|
|
<img src="../static/images/android.png" alt="Pixel Phone">
|
||
|
|
</figure>
|
||
|
|
<p>.zoomIn</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<h3>.slow (animation duration)</h3>
|
||
|
|
<pre><section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="fadeIn slow">Slide 1</h2>
|
||
|
|
</div>
|
||
|
|
</section></pre>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2 class="fadeIn slow">h2.fadeIn.slow</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap aligncenter">
|
||
|
|
<h2><strong>Embedding Media</strong></h2>
|
||
|
|
<p>Images, videos, maps, charts...</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/)"></span>
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<h3>
|
||
|
|
<svg class="fa-camera">
|
||
|
|
<use xlink:href="#fa-camera"></use>
|
||
|
|
</svg>
|
||
|
|
Unsplash = Fullscreen Backgrounds
|
||
|
|
</h3>
|
||
|
|
<p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? →</a></p>
|
||
|
|
<pre><section>
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>Slide</h1>
|
||
|
|
</div>
|
||
|
|
</section></pre>
|
||
|
|
<p>
|
||
|
|
<svg class="fa-info">
|
||
|
|
<use xlink:href="#fa-info"></use>
|
||
|
|
</svg>
|
||
|
|
Position .background outside of .wrap container.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
|
||
|
|
<p>Embed videos with loop, autoplay, and muted attributes.</p>
|
||
|
|
<pre><div class="embed">
|
||
|
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||
|
|
</iframe>
|
||
|
|
</div></pre>
|
||
|
|
<p><code>.embed</code> (responsive)</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
<div class="content-left">
|
||
|
|
<!-- <div class="embed"> = Responsive -->
|
||
|
|
<div class="embed">
|
||
|
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
<!-- end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- end .content-left -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<!-- Responsive video/iframe... Add <div class="embed"> -->
|
||
|
|
<div class="embed">
|
||
|
|
<div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen">
|
||
|
|
<!-- Fullscreen Video -->
|
||
|
|
<div class="embed">
|
||
|
|
<div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen bg-black aligncenter">
|
||
|
|
<div class="embed">
|
||
|
|
<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><!-- .end .embed -->
|
||
|
|
<!-- .wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>Every end is a new beginning</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen bg-blue aligncenter">
|
||
|
|
<div class="embed dark">
|
||
|
|
<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><!-- .end .embed -->
|
||
|
|
<!-- .wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>Overlay</strong></h2>
|
||
|
|
<p><code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
|
||
|
|
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
||
|
|
<div class="embed">
|
||
|
|
<!-- I love Quartz's charts -->
|
||
|
|
<div class="atlas-chart" data-id="H1tz4P9G" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_H1tz4P9G.png" style="max-width: 100%;"></div>
|
||
|
|
<script src="https://www.theatlas.com/javascripts/atlas.js"></script>
|
||
|
|
</div>
|
||
|
|
<!-- end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black-blue frame">
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<p class="text-context">Status of Net Neutrality around the world.</p>
|
||
|
|
<div class="embed">
|
||
|
|
<iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
|
||
|
|
</div>
|
||
|
|
<!-- .end .embed -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!-- .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://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>
|
||
|
|
<!--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>
|