created slides

This commit is contained in:
sven 2021-10-01 12:02:03 +02:00
commit c8cc4fc95c
47 changed files with 23158 additions and 0 deletions

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2017 José Luis Antúnez
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

105
README.md Normal file
View file

@ -0,0 +1,105 @@
# WebSlides = Create stories with Karma
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
* * *
### Download
Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
* * *
### What's in the download?
The download includes demos and images (devices and logos).
All content is for demo purposes only. Images are property of their respective owners.
```
webslides/
├── index.html
├── css/
│ ├── base.css
│ └── colors.css
│ └── svg-icons.css (optional)
├── js/
│ ├── webslides.js
│ └── svg-icons.js (optional)
└── demos/
└── images/
```
## Features
- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
- Slide counter.
- Permalinks: go to a specific slide.
- Autoslide.
- Click to nav.
- Simple CSS alignments. Put content wherever you want (vertical centering...)
- 40+ components: background images/videos, quotes, cards, covers...
- Flexible blocks with auto-fill and equal height.
- Fonts: Roboto, Maitree (Serif), and San Francisco.
- Vertical rhythm (use multiples of 8).
## Markup
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
- Each parent `<section>` in the `#webslides` element is an individual slide.
```html
<article id="webslides">
<section>
<h1>Slide 1</h1>
</section>
<section class="bg-black aligncenter">
<!-- .wrap = container 1200px -->
<div class="wrap">
<h1>Slide 2</h1>
</div>
</section>
</article>
```
### Vertical Sliding
```html
<article id="webslides" class="vertical">
```
### CSS Syntax (classes)
- Typography: `.text-landing`, `.text-data`, `.text-intro`...
- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
- Background Images: `.background`,`.background-center-bottom`...
- Cards: `.card-50`, `.card-40`...
- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
### Extensions
You can add:
- [Unsplash](https://unsplash.com) photos
- [animate.css](https://daneden.github.io/animate.css)
- [particles.js](https://github.com/VincentGarreau/particles.js)
- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
- [pt](http://williamngan.github.io/pt/)
### Dive In!
- Do not miss [our demos](https://webslides.tv/).
- Want to get techie? Read [our wiki](wiki):
- [FAQ](https://github.com/webslides/WebSlides/wiki)
- [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
- [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
- [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
### Credits
- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).

1943
demos/classes.html Normal file

File diff suppressed because it is too large Load diff

3148
demos/components.html Normal file

File diff suppressed because it is too large Load diff

265
demos/index.html Normal file
View file

@ -0,0 +1,265 @@
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides Demos</title>
<meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article">
<meta property="og:title" content="WebSlides Demos"> <!-- EDIT -->
<meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides Demos"> <!-- EDIT -->
<meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
<nav role="navigation">
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul>
<li class="github">
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
<em>WebSlides</em>
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
<em>@WebSlides</em>
</a>
</li>
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
</ul>
</nav>
</header>
<main role="main">
<article> <!-- Slideshow? id="webslides" -->
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
-->
<section>
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<h1><strong>WebSlides Demos</strong></h1>
<p class="text-intro">All of these presentations are free and responsive.<br>
40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
<p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<ul class="flexblock gallery">
<li>
<a href="../demos/why-webslides.html" title="Why WebSlides?">
<figure>
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
<figcaption>
<h2>Why WebSlides?</h2>
<time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/landings.html" title="Landings">
<figure>
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
<figcaption>
<h2>Landings</h2>
<time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/portfolios.html" title="Portfolios">
<figure>
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
<figcaption>
<h2>Portfolios</h2>
<time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/keynote.html" title="Apple Keynote">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
<figcaption>
<h2>Apple Keynote</h2>
<time datetime="2017-01-05T20:13:48-08:00">Jan 05, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/netflix-culture.html" title="Netflix's Culture">
<figure>
<img alt="Thumbnail Netflix's Culture" src="https://webslides.tv/static/images/demos-netflix.png">
<figcaption>
<h2>Netflix's Culture</h2>
<time datetime="2017-04-16T20:16:48-08:00">Mar 16, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/longforms.html" title="Longform Articles">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
<figcaption>
<h2>Longforms</h2>
<time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="../demos/interviews.html" title="Interviews">
<figure>
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
<figcaption>
<h2>Interviews</h2>
<time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) with fadein animation -->
<div class="wrap">
<h2 class="aligncenter">General Questions</h2>
<p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> &middot; <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
<div class="grid">
<div class="column">
<h6>Why WebSlides? Good karma</h6>
<p>There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.</p>
<h6>Is WebSlides a framework?</h6>
<p>We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic <a href="../demos/components.html" title="WebSlides Components">structural components</a> and a scalable <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
</div>
<!-- end .column -->
<div class="column">
<figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
</div>
<!-- end .column -->
<div class="column">
<h6>What can you do with WebSlides?</h6>
<p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
</p>
<h6>How easy is WebSlides?</h6>
<p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
</div>
<!-- end .column -->
</div>
<!-- end .grid -->
</div>
<!-- end .wrap -->
</section>
<section class="bg-white aligncenter">
<!-- .wrap = container (width: 90%) -->
<div class="wrap">
<h2><strong>Start in seconds</strong> </h2>
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>
Free Download
</a>
<span class="try">
<a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
<svg class="fa-paypal">
<use xlink:href="#fa-paypal"></use>
</svg>
Pay what you want.
</a>
</span>
</p>
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!-- end main -->
<!-- Required -->
<script src="../static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

358
demos/interviews.html Normal file
View file

@ -0,0 +1,358 @@
<!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 Demo: Longform Interviews</title>
<meta name="description" content="WebSlides is about telling stories. Create longform interviews with ease.">
<!-- 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&amp;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 Demo: Longform Interviews" />
<!-- EDIT -->
<meta property="og:description" content="Create longform interviews with ease. Just the essentials.">
<!-- EDIT -->
<meta property="og:updated_time" content="2017-03-28T12:17:24">
<!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.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="WebSlides Demo: Longform Interviews">
<!-- EDIT -->
<meta name="twitter:description" content="Create longform interviews with ease. Just the essentials.">
<!-- 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>
<section class="bg-black">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/E695OZJiju4/1600x800')"></span>
<!--.wrap = container width: 90% -->
<div class="wrap">
<p class="text-subtitle">Powered by <a href="https://webslides.tv">WebSlides</a>.</p>
<h1>
<strong>Designing Interviews</strong>
</h1>
<p>All content is for demo purposes only.</p>
<p><img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar David Yang"> By David Yang. Nov 8th, 2024.</p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
<div class="wrap longform">
<h2><strong>The Art of the Interview</strong></h2>
<p class="text-intro">The stories you tell, whether in text form, by way of video or through audio, are only as good as the information you gather.</p>
<p>Interviewing is the cornerstone of journalism. Interviews usually take place face to face and in person, although modern communications technologies such as the Internet have enabled conversations to happen in which parties are separated geographically, such as with videoconferencing software, and of course telephone interviews can happen without visual contact.</p>
<hr>
<dl class="text-interview">
<dt>David:</dt>
<dd>
<p><strong>Hi, this is a WebSlides Demo, where we interview the people who make us happy. Im your host, David González. This week I interviewed lawyer Sheryl Hadid. Hi Sheryl!</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>Hi David!</p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>Are interviews copyrighted? When does an interview become copyrightable?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>The answer is it depends. Copyright of speech given during an interview relies heavily on the "fixation" element of copyright law. When a work is fixed in a copy or recording, the work is created. This gives the work its copyright. Therefore, when an interview is physically recorded it becomes copyrighted.</p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>How could the person being interviewed own the copyright to an interview?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>This may be a surprise but there are moments when the person being interviewed could in fact have copyright ownership in their words. For example, if the person being interviewed receives a list of questions from the interviewer and records their calculated responses, they could have copyright ownership in their answers because they not the interviewer actually wrote down or otherwise recorded their response.</p>
</dd>
<dd>
<blockquote class="text-quote">
<p>People want to be smart. So, if you ask smart questions and show an interest in a particular subject they love sharing their insight.<code>.text-quote</code>.</p>
</blockquote>
</dd>
<dd>
<p>However, courts are hesitant to apply this concept broadly to spoken interviews because of the impact it could have on the First Amendment and the heavy caseload it would bring to an already overloaded court system. See Falwell v. Penthouse Intern., Ltd. This also opens the door for other legal arguments such as fair use. Furthermore, there are times when contractual releases could affect the copyright and alter default copyright rules. </p>
</dd>
</dl>
<hr>
<div class="text-pull embed">
<iframe width="800" height="450" src="https://www.youtube.com/embed/7xYZ3rMT8_A?rel=0&amp;controls=0" allowfullscreen></iframe>
</div>
<!--.text-pull.embed (responsive video) -->
<hr>
<dl class="text-interview">
<dt>David:</dt>
<dd>
<p><strong>What are some methods to record an interview and what should the person being interviewed do?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>Most often when problems with interview ownership arise its because persons being interviewed are unhappy with the way an interviewer uses their responses during interviews to mislead readers or viewers of a broadcast. This causes interviewees to claim their copyright was infringed because they claim to own the copyright to their speech during the interview.</p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>When do problems with interview ownership arise, and who usually owns the copyright?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>The most successful way to fix an interview is for interviewers to audio record or hand write the responses of the person being interviewed. If the interview is recorded by hand, it is helpful if the writing is legible and clearly communicates the conversation because it may help solve questions about fixation. Short hand that only describes excerpts from the interview typically are not enough to constitute fixation and copyright ownership. So please remember, if there is no fixation of the interview then no copyright exists in that interview.</p>
</dd>
<dd>
<p>Further, if you are being interviewed please be aware that you do not possess ownership over your responses in most situations. It is always best to briefly think about your answer before you respond to avoid the misuse of your words by others. And if you truly dont feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.</p>
</dd>
</dl>
</div>
</section>
<section>
<!--.wrap = container width: 90% -->
<div class="wrap size-50 aligncenter">
<h3><strong>Things you can do with WebSlides</strong></h3>
<p class="text-intro"><a href="/demos/why-webslides" title="Why WebSlides?">Presentations</a>, <a href="/demos/landings" title="Landings">landings</a>, <a href="/demos/portfolios" title="Portfolios">portfolios</a>, and <a href="/demos/longforms" title="Longforms">longforms</a>.</p>
<div class="bg-white shadow">
<ul class="flexblock reasons">
<li>
<h2>An opportunity to engage.</h2>
<p><a href="https://webslides.tv" title="WebSlides">WebSlides</a> is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
</li>
<li>
<h2>Work better, faster.</h2>
<p>Designers, marketers, and journalists can now focus on the content. Simply <a href="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 class="bg-white">
<!--.wrap = container width: 90% -->
<div class="wrap longform">
<dl class="text-interview">
<dt>David:</dt>
<dd>
<p><strong>Is a web address (a domain name) subject to copyright law?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>No, for a variety of reasons web addresses (also known as a domain names or URLs) aren't protected by copyright. Even though copyright doesnt protect domain names, that doesnt mean domain names are entirely unprotected. Trademark law protects web addresses. And for a variety of reasons, companies are often more apt to go after individual instances of trademark infringement than individual copyright infringers. </p>
</dd>
<dt>David:</dt>
<dd>
<p><strong>Are there easier alternatives than copyright?</strong></p>
</dd>
<dt>Sheryl:</dt>
<dd>
<p>Some persons and organizations hope to make the rules about using and reusing work more user-friendly. These groups may make their work freely available under <a href="https://creativecommons.org/">Creative Commons</a> licenses or expressly abandon them into the public domain. </p>
</dd>
<dd>
<p>But just because an author employs either of these copyright alternatives, that doesnt mean that they are completely free of legal issues. For example, imagine youre an advertising designer for Virgin Mobile, and you need a photo of a pretty teenage girl for your latest ad. You find a photo on Flickr that is free to use under a Creative Commons Attribution license. You use the photo in your ad campaign and plaster the photo on bus stops across Australia. This is exactly what happened, and since the photographer was adequately credited and copyright issues were non-existent everybody lived happily ever after, right?</p>
</dd>
<dd>
<p>If you have any questions about alternatives to the standard copyright scheme or how these alternatives are being utilized by thousands of artists every day, feel free to contact <a href="https://www.newmediarights.org/about_us/contact_us">New Media Rights</a>.</p>
</dd>
</dl>
<p><a href="http://www.newmediarights.org/are_interviews_copyrighted" target="_blank">"Are interviews copyrighted"</a> by NewMediaRights is licensed under CC BY NC 3.0.</p>
<hr>
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
<p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
<form action="/" class="bg-light user" method="post">
<input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
<button type="submit" tabindex="2" title="Subscribe">Subscribe &rsaquo;</button>
</form>
</div>
<!-- .end .wrap -->
</section>
<section>
<!-- .wrap = container width: 90% -->
<div class="wrap aligncenter">
<h2><strong>Ready to start?</strong> </h2>
<p class="text-intro">Create your stories instantly.</p>
<p>
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
<svg class="fa-cloud-download">
<use xlink:href="#fa-cloud-download"></use>
</svg>
Free Download
</a>
<span class="try">
<a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
<svg class="fa-paypal">
<use xlink:href="#fa-paypal"></use>
</svg>
Pay what you want.
</a>
</span>
</p>
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<footer role="contentinfo">
<div class="wrap">
<div class="grid">
<div class="column">
<h3>Company</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Support</h3>
<ul>
<li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Legal</h3>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Community</h3>
<ul>
<li>
<a href="#">
<svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use>
</svg>
Facebook
</a>
</li>
<li>
<a href="#">
<svg class="fa-youtube">
<use xlink:href="#fa-youtube"></use>
</svg>
YouTube
</a>
</li>
<li>
<a href="#">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
Twitter
</a>
</li>
</ul>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
</div>
<!-- .end .wrap -->
</footer>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>

858
demos/keynote.html Normal file
View file

@ -0,0 +1,858 @@
<!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 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&amp;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="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/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-apple aligncenter">
<!--.wrap = container (width: 90%) -->
<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 (width: 90%) -->
<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 (width: 90%) -->
<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>&rarr;</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 a 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 (width: 90%) -->
<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 &rsaquo;</a>
<a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site &rsaquo;</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 (width: 90%) -->
<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 &rsaquo;</button>
</form>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple">
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<blockquote class="text-quote">
<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>&ldquo;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.&rdquo;</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>