From c8cc4fc95c6ff8eb9df6b16238523492f68d8de9 Mon Sep 17 00:00:00 2001 From: sven Date: Fri, 1 Oct 2021 12:02:03 +0200 Subject: [PATCH] created slides --- LICENSE | 21 + README.md | 105 + demos/classes.html | 1943 ++++++++++++ demos/components.html | 3148 ++++++++++++++++++++ demos/index.html | 265 ++ demos/interviews.html | 358 +++ demos/keynote.html | 858 ++++++ demos/landings.html | 1933 ++++++++++++ demos/longforms.html | 415 +++ demos/media.html | 947 ++++++ demos/netflix-culture.html | 388 +++ demos/portfolios.html | 1874 ++++++++++++ demos/why-webslides.html | 351 +++ error.html | 86 + index.html | 407 +++ static/css/svg-icons.css | 2350 +++++++++++++++ static/css/webslides.css | 3791 ++++++++++++++++++++++++ static/images/android.png | Bin 0 -> 73712 bytes static/images/avatar.jpg | Bin 0 -> 3063 bytes static/images/bt-appstore.png | Bin 0 -> 1382 bytes static/images/bt-playstore.png | Bin 0 -> 1965 bytes static/images/davinci.png | Bin 0 -> 84082 bytes static/images/favicons/favicon-120.png | Bin 0 -> 425 bytes static/images/favicons/favicon-152.png | Bin 0 -> 527 bytes static/images/favicons/favicon-180.png | Bin 0 -> 618 bytes static/images/favicons/favicon-192.png | Bin 0 -> 656 bytes static/images/favicons/favicon-32.png | Bin 0 -> 220 bytes static/images/favicons/favicon-76.png | Bin 0 -> 335 bytes static/images/favicons/favicon.png | Bin 0 -> 153 bytes static/images/iphone-hand.png | Bin 0 -> 55644 bytes static/images/iphone.png | Bin 0 -> 58563 bytes static/images/logos/airbnb.svg | 89 + static/images/logos/apple.svg | 68 + static/images/logos/facebook.svg | 46 + static/images/logos/google.svg | 102 + static/images/logos/instagram.svg | 82 + static/images/logos/logo.svg | 31 + static/images/logos/microsoft.svg | 52 + static/images/logos/netflix.svg | 42 + static/images/logos/nyt.svg | 88 + static/images/logos/thetimes.svg | 143 + static/images/setup.png | Bin 0 -> 9522 bytes static/images/share-webslides.jpg | Bin 0 -> 4442 bytes static/images/swipe.svg | 45 + static/js/svg-icons.js | 12 + static/js/webslides.js | 3109 +++++++++++++++++++ static/js/webslides.min.js | 9 + 47 files changed, 23158 insertions(+) create mode 100644 LICENSE create mode 100644 README.md create mode 100644 demos/classes.html create mode 100644 demos/components.html create mode 100644 demos/index.html create mode 100644 demos/interviews.html create mode 100644 demos/keynote.html create mode 100644 demos/landings.html create mode 100644 demos/longforms.html create mode 100644 demos/media.html create mode 100644 demos/netflix-culture.html create mode 100644 demos/portfolios.html create mode 100644 demos/why-webslides.html create mode 100644 error.html create mode 100644 index.html create mode 100644 static/css/svg-icons.css create mode 100644 static/css/webslides.css create mode 100644 static/images/android.png create mode 100644 static/images/avatar.jpg create mode 100644 static/images/bt-appstore.png create mode 100644 static/images/bt-playstore.png create mode 100644 static/images/davinci.png create mode 100644 static/images/favicons/favicon-120.png create mode 100644 static/images/favicons/favicon-152.png create mode 100644 static/images/favicons/favicon-180.png create mode 100644 static/images/favicons/favicon-192.png create mode 100644 static/images/favicons/favicon-32.png create mode 100644 static/images/favicons/favicon-76.png create mode 100644 static/images/favicons/favicon.png create mode 100644 static/images/iphone-hand.png create mode 100644 static/images/iphone.png create mode 100644 static/images/logos/airbnb.svg create mode 100644 static/images/logos/apple.svg create mode 100644 static/images/logos/facebook.svg create mode 100644 static/images/logos/google.svg create mode 100644 static/images/logos/instagram.svg create mode 100644 static/images/logos/logo.svg create mode 100644 static/images/logos/microsoft.svg create mode 100644 static/images/logos/netflix.svg create mode 100644 static/images/logos/nyt.svg create mode 100644 static/images/logos/thetimes.svg create mode 100644 static/images/setup.png create mode 100644 static/images/share-webslides.jpg create mode 100644 static/images/swipe.svg create mode 100644 static/js/svg-icons.js create mode 100644 static/js/webslides.js create mode 100644 static/js/webslides.min.js diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..378f4b3 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..a069a62 --- /dev/null +++ b/README.md @@ -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 `
` in the `#webslides` element is an individual slide. + +```html +
+
+

Slide 1

+
+
+ +
+

Slide 2

+
+
+
+``` + +### Vertical Sliding + +```html +
+``` + +### 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). diff --git a/demos/classes.html b/demos/classes.html new file mode 100644 index 0000000..7954f2e --- /dev/null +++ b/demos/classes.html @@ -0,0 +1,1943 @@ + + + + + + + + + + WebSlides Tutorial: Classes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Classes

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+ +
+

WebSlides Classes

+

Friendly naming conventions.

+ +
+ +
+
+
+

+ + + + CSS Syntax +

+

WebSlides is so easy to understand and love. Baseline: 8.

+
+
    +
  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
    • +
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
    • +
  • BG Images: .background, .background-center-bottom...
    • +
  • Cards: .card-60, .card-50, .card-40...
    • +
  • Sizes: .size-50, .size-40...
    • +
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
    • +
+
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container (width: 90%) with fadein</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+

Vertical sliding? <article id="webslides" class="vertical">

+
+ +
+
+
+ +
+

Header (logo) .alignright

+
+
+
+

Simple CSS Alignments

+

Put content wherever you want.

+
+ +
+
+
+ iPhone +

img.alignleft

+

img.alignleft.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.alignright

+

img.alignright.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.aligncenter.size-40

+
+ +
+
+
+
+

1/9 left top

+

Put content wherever you want. Have less. Do more. Create beautiful solutions.

+

.slide-top and .content-left

+
+
+ +
+
+
+
+

2/9 center top

+

In a village of La Mancha, the name of which I have no desire to call to mind,

+

.slide-top and .content-center

+
+
+ +
+
+
+
+

3/9 right top

+

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.

+

.slide-top and .content-right

+
+
+ +
+
+
+
+

4/9 left center

+

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,

+

.content-left

+
+
+ +
+
+
+
+

5/9 center

+

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.

+

.content-center

+
+
+ +
+
+
+
+

6/9 right center

+

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,

+

.content-right

+
+
+ +
+
+
+
+

7/9 left bottom

+

while on week-days he made a brave figure in his best homespun.

+

.slide-bottom and .content-left

+
+
+ +
+
+
+
+

8/9 center bottom

+

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,

+

.slide-bottom and .content-center

+
+
+ +
+
+
+
+

9/9 right bottom

+

who used to saddle the hack as well as handle the bill-hook.

+

.slide-bottom and .content-right

+
+
+ +
+
+ +
+

.grid + .column

+

Basic Grid (auto-fill and equal height).

+
+
+
Why WebSlides?
+

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
+ +
+
WebSlides Files
+
+ +
+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+

* * *

+
+ +
+ +
+ +
+
+ +
+

.grid.vertical-align + .column

+

Basic Grid (auto-fill and equal height).

+
+
+
Why WebSlides?
+

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
+ +
+
WebSlides Files
+
+ +
+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+

* * *

+
+ +
+ +
+ +
+
+
+

.grid.sm (sidebar + main)

+
+
+
+

.column 1

+

Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.

+
+
+

.column 2

+

The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.

+

When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion.

+
+
+ +
+ +
+
+
+

.grid.ms (main + sidebar)

+
+
+
+

.column 1

+

Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology.

+

An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.

+
+
+

.column 2

+

The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.

+
+
+ +
+ +
+
+
+

.grid.sms (sidebar + main + sidebar)

+
+
+
+

.column 1

+

Information architecture is considered to have been founded by Richard Saul Wurman.

+
+
+

.column 2

+

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

+
+
+

.column 3

+

The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields.

+
+
+ +
+ +
+
+
+
+
+

Unsplash +

+

.card-50.bg-white

+

Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great. +

+
    +
  • + Role: Frontend +
    • +
  • Client: Acme
    • +
  • Year: 2018
    • +
+
+ +
+ Apple Watch +
+ + + + + Crew (Unsplash) + +
+
+ +
+ +
+ +
+
+
+
+
+ +
+ + + + + Google Maps + +
+
+ +
+

+ Discover London +

+

.card-50.bg-white

+
    +
  • + Density: 5,518/km2 +
    • +
  • Population: 8,673,713
    • +
  • Website: visitlondon.com
    • +
+

+ There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region. +

+
+ +
+ +
+ +
+
+
+
+ Yosemite National Park +
+ + + + + Chad Madden (Unsplash) + +
+
+ +
+

+ What is inspiration? +

+

+ In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology. +

+
+ +
+ +
+
+

Backgrounds

+

<section class="bg-apple">

+
+
+
+

Corporate Backgrounds

+
    +
  • +

    .bg-primary

    + #44d +
    • +
  • +

    .bg-secondary

    + #67d +
    • +
  • +

    .bg-light

    + #edf2f7 +
    • +
  • +

    body

    + #f7f9fb +
    • +
+
+

General Colors

+
    +
  • +

    .bg-black

    + #111 +
    • +
  • +

    .bg-black-blue

    + #123 +
    • +
  • +

    .bg-gray

    + #d5d9e2 +
    • +
  • +

    .bg-white

    + #fff +
    • +
+
+ +
+
+
+
    +
  • +

    .bg-red

    + #c23 +
    • +
  • +

    .bg-green

    + #077 +
    • +
  • +

    .bg-blue

    + #346 +
    • +
  • +

    .bg-purple

    + #b6d +
    • +
+
+

Transparent Backgrounds

+
    +
  • +

    .bg-trans-dark

    + rgba(0,0,0 , 0.5) +
    • +
  • +

    .bg-trans-light

    + rgba(255,255,255 , 0.2) +
    • +
+
+ +
+
+
+

Gradients

+
    +
  • Horizontal .bg-gradient-h
    • +
  • Radial .bg-gradient-r
    • +
  • Vertical .bg-gradient-v
    • +
+
+ +
+
+ +
+

Horizontal Gradient

+

section.bg-gradient-h

+
+ +
+
+
+

Radial Gradient

+

section.bg-gradient-r

+
+ +
+
+ +
+

Vertical Gradient

+

section.bg-gradient-v

+
+ +
+
+
+

Background Videos

+ 
<video class="background-video" autoplay muted loop poster="image.jpg">
+  <source src="video.mp4" type="video/mp4">
+</video>
+

.background-video

+
+ +
+
+ +
+

.background-video

+

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

+
+ +
+
+ +
+

BG Video with Overlay

+

section.bg-blue > .background-video.dark or .light

+
+ +
+
+
+
+

Fullscreen Background Images

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

How to embed Unsplash photos?

+
+
+

16 Different Backgrounds

+
    +
  • .background (cover)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
  • .background-video (fullscreen)
    • +
+
+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

Iceland

+

section[class*="bg-"] > .background.dark

+
+
+
+ + +
+

Iceland

+

section[class*="bg-"] > .background.light

+
+
+
+ + +
+

.background.anim

+
+ +
+
+
+

Flexible blocks

+

ul.flexblock = Flexible blocks with auto-fill and equal height.

+
+
    +
  • +

    + + + + .flexblock li 1 +

    + Multipurpose: services, features, specs... +
    • +
  • +

    + + + + .flexblock li 2 +

    + Multipurpose: benefits, clients, work... +
    • +
  • +

    + + + + .flexblock li 3 +

    + Multipurpose: news, metrics, plans... +
    • +
+
+ +
+
+
+
+

Flexible Block = .flexblock

+

Auto-fill & Equal height columns:

+ 
<ul class="flexblock">
+  <li>
+    Item 1
+  </li>
+  <li>
+    Item 2
+  </li>
+  <li>
+    Item 3
+  </li>
+  <li>
+    Item 4
+  </li>
+</ul>
+
+
+

Block Link = .flexblock.blink

+

Make the whole block clickable:

+ 
<ul class="flexblock blink">
+  <li>
+    <a href="#">
+      Item 1
+    </a>
+  </li>
+  <li>
+    <a href="">
+      Item 2
+    </a>
+  </li>
+</ul>
+
+
+ +
+
+
+

ul.flexblock

+
    +
  • +

    + + + + Purpose +

    + Businesses that people love +
    • +
  • +

    + + + + Principles +

    + Ethics of openness and good taste +
    • +
  • +

    + + + + Process +

    + Useful → Easy → Fast → Beautiful +
    • +
+
+

ul.flexblock.blink

+ +
+ +
+
+
+

ul.flexblock.blink.border

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients.border

+ +
+ +
+
+
+

ul.flexblock.features

+
    +
  • +
    +

    100% customizable

    + Well documented. +
    +
    • +
  • +
    + $48 +

    Extra virgin olive oil

    + The Spanish caviar. +
    +
    • +
  • +
    +

    + + + + Ultra-fast Wifi +

    + Simple file sharing. +
    +
    • +
+
+

ul.flexblock.features.blink

+ +
+ +
+
+
+

ul.flexblock.gallery

+ +
+ +
+
+
+

ul.flexblock.gallery + .overlay

+ +
+ +
+
+
+

ul.flexblock.metrics

+ +
    +
  • Founded + 2016 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + Benefits: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

ul.flexblock.metrics.border

+ +
    +
  • Founded + 2016 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + Benefits: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

.flexblock.plans.blink

+

All content is for demo purposes only.

+ +
+ +
+
+
+ +
+ +
+
+
+
+

ul.flexblock.specs

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+ Pixel Phone +
+
+ +
+
+ +
+

.flexblock.reasons

+
+
+
    +
  • +

    Why WebSlides? Work better, faster.

    +

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    +
    • +
  • +

    Good karma. Just the essentials and using lovely CSS.

    +

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    +
    • +
+
+ +
+ +
+
+
+

ul.flexblock.steps

+
    + +
  • + + + + + +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    + + + + + +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    + + + + + +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    + + + + + +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+ +
+
+
+

ul.flexblock.activity

+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Roboto in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+
+

Landings

+

.text-landing

+
+ +
+
+
+

Landings

+

Create a simple web presence.

+

.text-intro

+
+ +
+
+
+

Powered by #WebSlides .text-subtitle

+

Landings

+

Create a simple web presence.

+
+ +
+
+ +
+

Landings

+

.text-shadow

+
+ +
+
+

4,235,678

+

.text-data

+
+
+ +
+

Why WebSlides? .text-context

+

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

+
+ +
+
+
+

.text-cols (2 columns)

+
+

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <section> in the #webslides element is an individual slide.

+

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

+
+
    +
  • +
    + + + + Call us at 555.345.6789 +
    +
    • +
  • +
    + + + + @username +
    +
    • +
  • +
    + + + + Send us an email +
    +
    • +
+
+ +
+
+
+
+
+

+ A Phone by Google +

+

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

+
    +
  • + + .text-label: + + Google (2016). +
    • +
  • + + Services: + + Industrial Design. +
    • +
  • + + Website: + + madeby.google.com/phone/ +
    • +
+
+ +
+
+ Pixel Phone +
+
+ +
+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Maitree in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+ +
+
+

WebSlides is incredibly easy and versatile.

+

.text-serif (Maitree)

+
+
+

Each parent <section> in the #webslides element is an individual slide.

+

Clean markup with popular naming conventions. Minimum effort. Just focus on your content.

+
+
+ +
+
+
+

What is Stendhal Syndrome?

+

Beauty overdose. .text-pull-right

+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+

Psychiatrists have long debated whether it really exists.

+

The syndrome is not only associated with viewing a beautiful place, but also good art.

+

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

+

* * *

+
+ +
+
+

One more thing...

+

.text-apple / .bg-apple

+
+
+
+ +
+ +
+
+ +
+

Start in seconds

+

Create your own presentation instantly.
120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + + + + diff --git a/demos/components.html b/demos/components.html new file mode 100644 index 0000000..fad2a65 --- /dev/null +++ b/demos/components.html @@ -0,0 +1,3148 @@ + + + + + + + + + + WebSlides Documentation: Components + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Components

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+
+

WebSlides Components

+

A quick reference guide for beginners.

+ +
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code looks superb. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Just focus on your ideas. Based on SimpleSlides, by Jenn Schiffer :)

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container (width: 90%) with fadein</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+

Vertical sliding? <article id="webslides" class="vertical">

+
+ +
+
+
+

+ + + + CSS Syntax +

+

WebSlides is so easy to understand and love. Baseline: 8.

+
+
    +
  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
    • +
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
    • +
  • BG Images: .background, .background-center-bottom...
    • +
  • Cards: .card-60, .card-50, .card-40...
    • +
  • Sizes: .wrap.size-50, .img.size-40...
    • +
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
    • +
+
+ +
+
+
+ +
+ +
+
+
+

Layout

+

Centering vertically and horizontally.

+
+ +
+
+
+ +
+ +
+
+
+

Headers

+

<header class="bg-white">

+
+
+
+
+

Footers

+

<footer class="bg-white">

+
+ +
+
+
+

Navigation

+ +

nav

+ +

nav.navbar

+
+
+
+

Company

+ +
+ +
+

Support

+ +
+ +
+

Legal

+ +
+ +
+

Community

+ +
+ +
+ +
+ +
+
+
+

.grid > .column

+

Basic Grid (auto-fill and equal height).

+
+
+
+

.column 1

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+

.column 2

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more.

+
+
+

.column 3

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+ +
+ +
+
+
+

.grid.vertical-align > .column

+
+
+
+

.column 1

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+

.column 2

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more. Create beautiful solutions. Our children's world will be better.

+
+
+

.column 3

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+ +
+ +
+
+
+

.grid.sm (sidebar + main)

+
+
+
+

.column 1

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+

.column 2

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more. Create beautiful solutions. Our children's world will be better.

+
+
+ +
+ +
+
+
+

.grid.ms (main + sidebar)

+
+
+
+

.column 1

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+

.column 2

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more. Create beautiful solutions. Our children's world will be better.

+
+
+ +
+ +
+
+
+

.grid.sms (sidebar + main + sidebar)

+
+
+
+

.column 1

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.

+
+
+

.column 2

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more. Create beautiful solutions. Our children's world will be better.

+
+
+

.column 3

+

Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more. Create beautiful solutions. Our children's world will be better.

+
+
+ +
+ +
+
+

Simple CSS Alignments

+

Put content wherever you want.

+
+
+
+
+

1/9 left top

+

Put content wherever you want. Have less. Do more. Create beautiful solutions.

+

.slide-top and .content-left

+
+
+ +
+
+
+
+

2/9 center top

+

Your story needs to be clear. A great lasting story is about everyone or it will not last.

+

.slide-top and .content-center

+
+
+ +
+
+
+
+

3/9 right top

+

Your story needs to be short. Select words carefully, each one must convey a meaning.

+

.slide-top and .content-right

+
+
+ +
+
+
+
+

4/9 left center

+

Your slides should be clear and well structured. What's the point of the story? Why is that relevant?

+

.content-left

+
+
+ +
+
+
+
+

5/9 center

+

Stories are all around us. They are what move us, make us feel alive, and inspire us.

+

.content-center

+
+
+ +
+
+
+
+

6/9 right center

+

Your presentation should have the same elements as a good book. Action, failure, and success.

+

.content-right

+
+
+ +
+
+
+
+

7/9 left bottom

+

How to tell strategic stories? What Promised Land is the company conveying through its words and images.

+

.slide-bottom and .content-left

+
+
+ +
+
+
+
+

8/9 center bottom

+

What's the Promised Land? What change do you want to bring to the world? The Promised Land is the North Star.

+

.slide-bottom and .content-center

+
+
+ +
+
+
+
+

9/9 right bottom

+

Your origin story helps people decide whether or not to trust you. How was your life before the life-changing event?

+

.slide-bottom and .content-right

+
+
+ +
+
+
+ iPhone +

img.size-50

+

img.alignright.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.size-50

+

img.alignleft.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.size-30

+

img.alignleft.size-30

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+

Corporate Backgrounds

+
    +
  • +

    .bg-primary

    + #44d +
    • +
  • +

    .bg-secondary

    + #67d +
    • +
  • +

    .bg-light

    + #edf2f7 +
    • +
  • +

    body

    + #f7f9fb +
    • +
+
+

General Colors

+
    +
  • +

    .bg-black

    + #111 +
    • +
  • +

    .bg-black-blue

    + #123 +
    • +
  • +

    .bg-white

    + #fff +
    • +
+
+ +
+
+
+
    +
  • +

    .bg-red

    + #c23 +
    • +
  • +

    .bg-green

    + #077 +
    • +
  • +

    .bg-blue

    + #346 +
    • +
  • +

    .bg-purple

    + #62b +
    • +
+
+

Transparent Backgrounds

+
    +
  • +

    .bg-trans-dark

    + rgba(0,0,0 , 0.5) +
    • +
  • +

    .bg-trans-light

    + rgba(255,255,255 , 0.2) +
    • +
+
+ +
+
+
+

Gradients

+
    +
  • Horizontal .bg-gradient-h
    • +
  • Radial .bg-gradient-r
    • +
  • Vertical .bg-gradient-v
    • +
+
+ +
+
+
+

Vertical Gradient

+

.bg-gradient-v

+
+ +
+
+
+

Radial Gradient

+

.bg-gradient-r

+
+ +
+
+

One more background :)

+

.bg-apple

+
+
+
+
+

Contents

+

ul.flexblock = Flexible blocks
with auto-fill and equal height.

+
+
+
    +
  • +

    + + + + .flexblock li 1 +

    + Multipurpose: services, features, specs... +
    • +
  • +

    + + + + .flexblock li 2 +

    + Multipurpose: benefits, clients, work... +
    • +
  • +

    + + + + .flexblock li 3 +

    + Multipurpose: news, metrics, plans... +
    • +
+
+ +
+
+
+

Multipurpose (services, work...)

+

ul.flexblock.blink (block link)

+ +
+

Multipurpose (services, work...)

+

ul.flexblock.border

+
    +
  • +

    + + + + Purpose +

    + Businesses that people love +
    • +
  • +

    + + + + Principles +

    + Ethics of openness and good taste +
    • +
  • +

    + + + + Process +

    + Useful → Easy → Fast → Beautiful +
    • +
+
+ +
+
+
+

Multipurpose (services, clients...)

+

ul.flexblock.blink.border

+ +
+ +
+
+
+

Multipurpose

+

ul.flexblock.blink.border

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients.border

+ +
+ +
+
+
+

ul.flexblock.steps

+
    + +
  • + + + + + +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    + + + + + +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    + + + + + +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    + + + + + +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+ +
+
+
+

ul.flexblock.features

+
    +
  • +
    +

    + → + Simple Navigation +

    + with arrow keys and swipe. +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. +
    +
    • +
  • +
    +

    + + + + Slide Counter +

    + Current/Total number +
    +
    • +
  • +
    +

    + 40+ + Beautiful Components +

    + Covers, cards, quotes... +
    +
    • +
  • +
    +

    + + + + Vertical Rhythm +

    + Use multiples of 8. +
    +
    • +
  • +
    +

    + 500+ + SVG Icons +

    + Font Awesome Kit. +
    +
    • +
+
+ +
+
+
+ +
+

ul.flexblock.specs

+
    +
  • +
    +

    + + + + Navigation with arrow keys and slide counter +

    + Fade transition to all slides. +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. URL: #slide=number +
    +
    • +
  • +
    +

    + + + + Vertical rhythm +

    + Use multiples of 8. +
    +
    • +
+
+ +
+ +
+
+
+
+
+

ul.flexblock.specs

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+ iPhone +
+
+ +
+ +
+
+
+

CVS and News

+

ul.flexblock.activity

+ +
+ +
+
+
+

Portfolio, team, work, showcase...

+

ul.flexblock.gallery

+ +
+ +
+
+
+

Portfolio, team, work, showcase...

+

ul.flexblock.gallery + .overlay

+ +
+ +
+
+
+ +
+ +
+
+
+

ul.flexblock.metrics.border

+ +
    +
  • Founded + 2024 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + EBITDA: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

ul.flexblock.plans.blink

+ +
+ +
+
+
+ +
+ +
+
+
+

ul.work

+ +
+ +
+
+ +
+

Powered by #WebSlides

+

Landings

+

Create a simple web presence easily.
Clean markup and lovely CSS. +

+

+ + + + + WebSlides + +

+
+ +
+
+ +
+
+

Welcomes

+

+ + + + Call to action +

+

Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch.

+

+ iOS app + Android app +

+
+
+ +
+
+ +
+
+

HTML Presentations Made Easy

+

+ + + + + WebSlides + + Demos · Github +

+
+
    +
  • +
    +

    100% customizable

    + Clean markup. +
    +
    • +
  • +
    +

    + + + + Good Karma +

    + Just essential features. +
    +
    • +
  • +
    +

    + + + + Prototype faster +

    + Design landings, portfolios... +
    +
    • +
+
+ +
+
+
+

Design for understanding

+
    +
  • +
    +

    100% purpose

    + Businesses that people love +
    +
    • +
  • +
    +

    + + + + Principles +

    + Useful → Easy → Fast → Beautiful +
    +
    • +
+
+ +
+
+ +
+
+

Tell a Story

+

Hi, this is WebSlides. HTML presentations made simple.
I'm a cute solution with clean markup and lovely CSS.

+
+
+
    +
  • +
    + + + +

    Indexed content

    + Sharing is caring. +
    +
    • +
  • +
    +

    + + + + Just essential features +

    + Keyboard navigation... +
    +
    • +
  • +
    + + + +

    + Prototype faster +

    + with clean code +
    +
    • +
+
+
    +
  • Purpose
    • +
  • Benefits
    • +
+
+
+
+ + +
+

Covers

+
+ +
+
+ + +
+

Plan your next trip

+

Summ.er

+

The best places at the best price.

+

+ Install iOS app + Install Android app +

+
+ +
+
+ +
+

California

+

+ + + + Yosemite National Park. +

+
+ +
+
+ +
+

GOOD KARMA

+

Making HTML Presentations Easy

+
+ +
+
+ +
+

Living on Mars

+

Paula Chan, CEO of SpaceY.

+
+ +
+
+

+ +

+
+ +
+
+
+ +
+

PROBLEM & SOLUTION

+

The history of the music industry is also the story of the development of technology.

+
+ +
+
+ +
+

4,623,781

+

downloads in first 24 hours

+
+ +
+
+ +
+

$56 Billion

+

Revenue in Q3 2017

+
+ +
+
+ +
+
+

+ + + +

+

1,000,000

+

We're working to protect up to a million acres of sustainable forest.

+
+
+ +
+
+
+
+

WebSlides help you build a culture of innovation.

+
+ +
+

All content is for demo purposes only, to show an example of a live site. The easiest way to make HTML presentations. Inspire and engage.

+
+ +
    +
  • Founded + 2040 +
    • +
  • + 120+ + Prebuilt Slides +
    • +
  • + + + + + + 24M Downloads +
    • +
  • + + + + + + Revenue: $16M +
    • +
+
+ +
+
+
+

Abouts

+
+ +
+
+ +
+
+

WebSlides was made to inspire people.

+
+
+

There are great presentation tools out there. This is about good karma: hypertext, clean code, and beauty as narrative elements. Three essential features.

+
+
    +
  • +
    +

    + → + Keyboard navigation +

    + and swipe gestures. +
    +
    • +
  • +
    +

    + + + + Go to a specific slide +

    + URL: #slide=number +
    +
    • +
  • +
    +

    + + + + Slide counter +

    + Current/Total number. +
    +
    • +
+
+ +
+
+
+
+

WebSlides help you build a culture of excellence.

+
+ +
+

All content is for demo purposes only, to show an example of a live site. All images are the copyright of their respective owners.

+
+ +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+
+ +
+
+
+

Table of Contents

+
+
+
    +
  1. + + Prologue: Learning to See + 01 + +
    2. +
  2. What is Design? + 04 +
    3. +
  3. + What is Beauty? + 08 +
      +
    1. Harmony + 12 +
      2. +
    2. Simplicity vs. Clarity + 14 +
      3. +
    +
    4. +
  4. + Building a Culture + 16 +
      +
    1. + Purpose + 17 +
        +
      1. + Valuable + 18 +
          +
        1. Easy + 20 +
          2. +
        2. Elegant + 21 +
          3. +
        +
      +
      2. +
    2. Principles + 24 +
      3. +
    +
    5. +
  5. Epilogue + 40 +
    6. +
+
+ +
+ +
+
+ +
+
+

iPhone 7

+

A phone should be absolutely simple, beautiful, and magical to use. 3D Touch, 12MP photos, and 4K video.

+
+

Benefit 1

+

The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.

+
+ +
+

Benefit 2

+

The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.

+
+ +
+ +
+ iPhone +
+ +
+ +
+
+
+
+
+
iPhone
+
+
+

+ + + + iPhone 7 +

+

3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align

+

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.

+

apple.com/iphone

+
+
+ +
+ +
+
+
+
+
+

+ + + + Pixel +

+

The first phone with the Google Assistant built in. Centering vertically using grid.vertical-align.

+

It has the highest rated smartphone camera. Ever. A battery that lasts all day. Unlimited storage for all your photos and videos. And it’s the first phone with the Google Assistant built in.

+
+ +
+
+ Pixel Phone +
+
+ +
+ +
+ +
+
+
+

Cards

+

Centering vertically using flexbox.

+
+ +
+
+
+
+
+ Florence, Italy +
+ + + + + Jonathan Körner (Unsplash) + +
+
+ +
+

+ Cards +

+

Florence, Italy — .card-50

+
    +
  • + Area: 102.41 km2 +
    • +
  • Population: 383,083.
    • +
  • Website: comune.fi.it
    • +
+

+ Florence was a centre of medieval European trade and finance and one of the wealthiest cities of the time. It is considered the birthplace of the Renaissance, and has been called "the Athens of the Middle Ages". +

+
+ +
+ +
+ +
+
+
+
+
+ Il Doumo, Florence +
+ + + + + Karlye Wolff (Unsplash) + +
+
+ +
+

+ Cards +

+

Il Duomo, Florence — .card-60

+

+ Stendhal syndrome is a disorder that causes rapid heartbeat and dizziness when an individual is exposed to an experience of great personal significance, particularly viewing art. +

+

+ The illness is named after the 19th-century French author Stendhal, who described his experience with the phenomenon during his 1817 visit to Florence. +

+
+ +
+ +
+ +
+
+
+
+ Áqaba, Jordan +
+ + + + + Daniel Burka (Unsplash) + +
+
+ +
+

Discover Jordan +

+

.fullscreen > .card-50

+

Aqaba is the only coastal city in Jordan and the largest and most populous city on the Gulf of Aqaba.

+

Read more »

+
+ +
+ +
+
+
+

Offers and Discounts

+
+ +
+
+
+
+
+

$40

+
+ +
+

Watch TV shows anytime, anywhere

+

.frame.bg-red

+
+ +
+ +
+ +
+
+
+
+
+ +
+ +
+

Get 8 weeks free

+
+ +
+ +
+ +
+
+ +
+
+
+ +
+ +
+

Get 8 weeks free

+
+ +
+ +
+ +
+
+
+

Choose one plan

+

Simple pricing. No credit card required!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlansGoodBetterAwesome
PriceFree$6$10
HD StreamingNoYesYes
Screens you can watch on at the same time12Unlimited
Access to exclusive contentNoNoYes
+
+ +
+
+ +
+

Quotes

+
+ +
+
+ +
+ +
+

Why WebSlides?

+
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

+

Avatar @jlantunez

+
+
+
+ +
+
+ +
+
+

Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good.

+

Sheryl Sandberg, COO of Facebook.

+
+
+ +
+
+ +
+
+

Finally, everything you need to make HTML presentations in a simple way.

+

@jlantunez

+
+
+ +
+
+

+ + #TechConf +

+
+
+
+
+
+
+ +
+

“WebSlides helped us build a culture of innovation and excellence.”

+

Leonardo da Vinci

+
+
Leonardo da Vinci
+ +
+
+ +
+
+ +
+
+
+

"Businesses and users are going to use technology only if they can trust it."

+

Satya Nadella.

+
+
+
+ +
+

+
+
+
+
+
+

Buttons

+

+ + .button + + + + + svg icon + +

+

+ + .button.radius + .button.ghost +

+
+
+

Badges

+

a.badge-ios and a.badge-android

+

+ + iOS App + + Android App +

+
+
+ +
+
+ +
+

Forms

+
+ +
+
+ + +
+

Planning a vacation?

+

Hidden attractions and unusual things to do.

+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+ +
+
+
+
+
+ Create a free account +

+

+

+

+
+
+
+ +
+
    +
  • +
    + + + +

    Good karma

    + Just essential features. +
    +
    • +
  • +
    + + + +

    Fast & Versatile

    + No need to know code. 120+ slides. +
    +
    • +
  • +
    + + + +

    Private Network

    + Simple and secure file sharing. +
    +
    • +
+
+ +
+ +
+ +
+
+ +
+
+

+ + + + Pay +

+

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: +

+
+ + +
+
+
+ +
+
+ + +
+

+
+
+ Welcome back +

+ +

+

+ +

+

+ +

+
+
+

Don't have an account? Sign up!

+
+ +
+
+ +
+

Media

+

Background images, videos, charts, maps...

+
+ +
+
+ +
+

+ + + + Unsplash = Fullscreen Backgrounds +

+

How to embed Unsplash photos? →

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

+ + + + Position .background outside of .wrap container. +

+
+ +
+
+ +
+

Opacity

+

[class*="bg-"] > .background.light

+ 
<section>
+  <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+
+
+
+ +
+

Opacity

+

[class*="bg-"] > .background.dark

+ 
<section>
+  <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+
+
+
+
+

16 Different Backgrounds

+
    +
  • .background (cover)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
  • .background-video (fullscreen)
    • +
+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

.background.anim

+
+ +
+
+
+

Background videos

+ 
<section class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="image.jpg">
+      <source src="video.mp4" type="video/mp4">
+    </video>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive) > video

+
+ +
+
+
+ +
+ +
+

Muted

+

Overlay: section.fullscreen.bg-blue > embed.dark or .light

+
+ +
+
+ + + +
+

Embedding Media

+

Videos, charts, maps...

+
+ +
+
+
+
+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes.

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
+ </iframe>
+</div>
+

.embed (responsive)

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+

Charts

+ +
+ +
Chart
+ +
+ +
+ +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+
+
+
+ +
+ + + + + Google Maps + +
+
+ +
+

+ Discover Seville +

+

.card-50.bg-white

+ +

+ There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcázar palace complex, the Cathedral and the General Archive of the Indies. +

+
+ +
+ +
+ +
+
+
+

Optional · 500+ icons

+

+ + + + + Font Awesome + + as SVG icons +

+ 
<svg class="fa-flag">
+	<use xlink:href="#fa-flag"></use>
+</svg>
+

How to change icons?

+
    +
  1. Go to fontastic.me.
    2. +
  2. Create a free account.
    3. +
  3. Select new icons.
    4. +
  4. Publish as SVG sprite.
    5. +
  5. Edit svg-icons.css and svg.icons.js.
    6. +
+
+ +
+
+
+

Transparent Logos

+

+ Change the color of a .svg/.png image using CSS. Images are property of their respective owners. +

+
+ +
+ +
+
+ +
+
+

"An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism."

+

Avatar @username, .avatar-56

+
+
+

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

+
+ +
+
+
+
+
+

Devices

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+
+ iPhone +
+
+ +
+ +
+ +
+
+
+
+
+ Screenshot +
+
+ +
+

Screenshots

+

HTML/CSS Browser.

+ 
<figure class="browser">
+  <img alt="Screenshot" src="image.png">
+</figure>
+
+ +
+ +
+
+
+

CSS Animations

+

Fadein transition to all slides.

+ 
<article id="webslides">
+  <section>
+    <div class="wrap fadeInUp">
+      <h1>Slide</h1>
+    </div>
+  </section>
+</article>
+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

+
+ +
+
+
+

Slide

+

.fadeInUp

+
+ +
+
+
+
+ Pixel Phone +
+

.zoomIn

+
+ +
+
+
+

.slow (animation duration)

+ 
<section>
+      <div class="wrap">
+      	<h2 class="fadeIn slow">Slide 1</h2>
+      </div>
+</section>
+
+ +
+
+
+

h2.fadeIn.slow

+
+ +
+
+ +
+

Start in Seconds

+

Create your own presentation instantly.
120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + + + + diff --git a/demos/index.html b/demos/index.html new file mode 100644 index 0000000..2e349ff --- /dev/null +++ b/demos/index.html @@ -0,0 +1,265 @@ + + + + + + + + + + WebSlides Demos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

WebSlides Demos

+

All of these presentations are free and responsive.
+ 40+ components with a solid CSS architecture.

+

Share your slides using #WebSlides.

+
+ +
+
+ +
+ +
+ +
+
+ +
+

General Questions

+

WebSlides Documentation: Components · Classes · Media.

+
+
+
Why WebSlides? Good karma
+

There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.

+
Is WebSlides a framework?
+

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture.

+
+ +
+
WebSlides Files
+
+ +
+
What can you do with WebSlides?
+

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want, add background images, videos... +

+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+
+ +
+ +
+ +
+
+ +
+

Start in seconds

+

Create your own presentation instantly.
120+ premium slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + + + diff --git a/demos/interviews.html b/demos/interviews.html new file mode 100644 index 0000000..64a2b3a --- /dev/null +++ b/demos/interviews.html @@ -0,0 +1,358 @@ + + + + + + + + + + WebSlides Demo: Longform Interviews + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+ + + +
+

Powered by WebSlides.

+

+ Designing Interviews +

+

All content is for demo purposes only.

+

Avatar David Yang By David Yang. Nov 8th, 2024.

+
+ +
+
+ +
+

The Art of the Interview

+

The stories you tell, whether in text form, by way of video or through audio, are only as good as the information you gather.

+

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.

+
+
+
David:
+
+

Hi, this is a WebSlides Demo, where we interview the people who make us happy. I’m your host, David González. This week I interviewed lawyer Sheryl Hadid. Hi Sheryl!

+
+
Sheryl:
+
+

Hi David!

+
+
David:
+
+

Are interviews copyrighted? When does an interview become copyrightable?

+
+
Sheryl:
+
+

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.

+
+
David:
+
+

How could the person being interviewed own the copyright to an interview?

+
+
Sheryl:
+
+

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.

+
+
+
+

People want to be smart. So, if you ask smart questions and show an interest in a particular subject they love sharing their insight..text-quote.

+
+
+
+

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.

+
+
+
+
+ +
+ +
+
+
David:
+
+

What are some methods to record an interview and what should the person being interviewed do?

+
+
Sheryl:
+
+

Most often when problems with interview ownership arise it’s 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.

+
+
David:
+
+

When do problems with interview ownership arise, and who usually owns the copyright?

+
+
Sheryl:
+
+

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.

+
+
+

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 don’t feel comfortable being interviewed by a particular media source, remember you always have the power to say no to doing the interview.

+
+
+
+
+
+ +
+

Things you can do with WebSlides

+

Presentations, landings, portfolios, and longforms.

+
+
    +
  • +

    An opportunity to engage.

    +

    WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

    +
    • +
  • +

    Work better, faster.

    +

    Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

    +
    • +
+
+ +
+ +
+
+ +
+
+
David:
+
+

Is a web address (a domain name) subject to copyright law?

+
+
Sheryl:
+
+

No, for a variety of reasons web addresses (also known as a domain names or URLs) aren't protected by copyright. Even though copyright doesn’t protect domain names, that doesn’t 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.

+
+
David:
+
+

Are there easier alternatives than copyright?

+
+
Sheryl:
+
+

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 Creative Commons licenses or expressly abandon them into the public domain.

+
+
+

But just because an author employs either of these copyright alternatives, that doesn’t mean that they are completely free of legal issues. For example, imagine you’re 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?

+
+
+

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 New Media Rights.

+
+
+

"Are interviews copyrighted" by NewMediaRights is licensed under CC BY NC 3.0.

+
+

Stories that stay with you

+

Subscribe to our newsletter. All content is for demo purposes only.

+
+ + +
+
+ +
+
+ +
+

Ready to start?

+

Create your stories instantly.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + diff --git a/demos/keynote.html b/demos/keynote.html new file mode 100644 index 0000000..4d95df4 --- /dev/null +++ b/demos/keynote.html @@ -0,0 +1,858 @@ + + + + + + + + + + WebSlides Keynote: Make a Keynote presentation using HTML + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ +
+

+
+ +
+
+ +
+

Make a Keynote presentation using HTML

+

WebSlides is an open source framework for building HTML presentations, landings, and portfolios.

+

.bg-apple

+
+ +
+
+ +
+

HTML presentations can be easy

+
+ +
+
+
+

Features

+
    +
  • +
    +

    + → + Simple Navigation +

    + with arrow keys and swipe. +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. +
    +
    • +
  • +
    +

    + + + + Slide Counter +

    + Current/Total number +
    +
    • +
  • +
    +

    + 40+ + Beautiful Components +

    + Covers, cards, quotes... +
    +
    • +
  • +
    +

    + + + + Vertical Rhythm +

    + Use multiples of 8. +
    +
    • +
  • +
    +

    + 500+ + SVG Icons +

    + Font Awesome Kit. +
    +
    • +
+
+
+
+
+
+

WebSlides was made to inspire people.

+
+ +
+

WebSlides is a wonderful way to showcase your company. All content is for demo purposes only. Images are property of their respective owners.

+
+ +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+
+ +
+
+
+
+

WebSlides help you build a culture of excellence.

+
+ +
+

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.

+
+ +
    +
  • Founded + 1976 +
    • +
  • + + + + + + 524M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
+
+ +
+
+ +
+
    +
  • Founded + 1976 +
    • +
  • + + + + + + 524M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 6 Offices +
    • +
  • + + + + + + 14K Employees +
    • +
  • + + $4M + + EBITDA +
    • +
  • + + + + + + Bank: $76B +
    • +
+
+ +
+
+ +
+

3,456,789

+

iPhone 7 in first 24 hours

+
+ +
+
+ +
+

$48 Billion

+

Revenue in Q4 2024

+
+ +
+
+ + +
+
+

+ + + +

+

1,000,000

+

We're working to protect up to a million acres of sustainable forest.

+
+
+ +
+
+
+
+
iPhone
+
+

+ + + + iPhone 7 +

+

3D Touch, 12MP photos, and 4K video.

+

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.

+
+ +
+ +
+ +
+
+
+
+
+

+ + + + iPhone 7 +

+

We worked closely with the very talented people at Acme and created a new website. Content demo.

+
    +
  • + + Client: + + Apple (2016) +
    • +
  • + + Services: + + Web Design +
    • +
  • + + Website: + + apple.com/iphone +
    • +
+
+ +
+
+ iPhone +
+
+ +
+ +
+ +
+
+
+
+
+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Faster LTE with the best worldwide roaming. +
    +
    • +
  • +
    + + + +

    Two cameras that shoot as one.

    + 12MP wide angle. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+ iPhone 6 +
+
+
+ +
+
+
+

+ + + + Pay +

+
+ +
+
+ +
+
+

+ Redesigning + + + + Pay +

+

We've been working with the Acme team over the last three months to build a new app.

+

+ Case study › + Open site › +

+
+
+ +
+
+ + +
+
+

Payments Made Simple

+

Apple Pay is so easy. Pay with your debit cards and credit cards with just a touch.

+
+

Secure

+

Your card is never stored. Apple Pay uses a device-specific number and unique transaction code.

+
+ +
+

Universal

+

Apple Pay works with most major credit and debit cards from nearly all banks.

+
+ +
+ +
+ +
+
+ +
+
+
    +
  • +
    + + + +

    Incredibly fast

    + Just hold your iPhone near the reader. +
    +
    • +
  • +
    + + + +

    Works with all major banks

    + Apple Pay is accepted in restaurants, hotels... +
    +
    • +
  • +
    + + + +

    The safer way to pay

    + Your card number is never stored. +
    +
    • +
+
+
+ +
+
+ +
+
+

+ + + + Pay +

+

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: +

+
+ + +
+
+
+ +
+
+ +
+
+

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.

+

+ + Steve Jobs. + +

+
+
+ +
+
+ +
+
+
+

“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.”

+

Tim Cook, CEO of Apple.

+
+
+
+ +
+
+
+ +
+

Header .alignright

+
+
+
+

Simple CSS Alignments

+

Put content wherever you want.

+
+ +
+
+
+
+

1/9 left top

+

Put content wherever you want. Have less. Do more. Create beautiful solutions.

+

.slide-top and .content-left

+
+
+ +
+
+
+
+

2/9 center top

+

Apple I was designed and hand-built by Steve Wozniak. Steve Jobs had the idea of selling the computer.

+

.slide-top and .content-center

+
+
+ +
+
+
+
+

3/9 right top

+

The Apple II is one of the first highly successful computers.

+

.slide-top and .content-right

+
+
+ +
+
+
+
+

4/9 left center

+

The Apple III is a business-oriented personal computer that was intended as the successor to the Apple II series.

+

.content-left

+
+
+ +
+
+
+
+

5/9 center

+

Apple Lisa was one of the first personal computers to offer a graphical user interface.

+

.content-center

+
+
+ +
+
+
+
+

6/9 right center

+

The Macintosh was the company's first mass-market personal computer featuring a GUI and mouse.

+

.content-right

+
+
+ +
+
+
+
+

7/9 left bottom

+

The iBook was a line of laptop computers designed and marketed by Apple Inc. from 1999 to 2006.

+

.slide-bottom and .content-left

+
+
+ +
+
+
+
+

8/9 center bottom

+

Apple introduced the first generation iPod on October 23, 2001, with the slogan "1,000 songs in your pocket".

+

.slide-bottom and .content-center

+
+
+ +
+
+
+
+

9/9 right bottom

+

The original iPhone was introduced by Steve Jobs on January 9, 2007. Jobs introduced the iPhone as a combination of three devices.

+

.slide-bottom and .content-right

+
+
+ +
+
+
+

CSS Animations

+

Fadein transition to all slides.

+ 
<article id="webslides">
+  <section>
+    <div class="wrap fadeInUp">
+      <h1>Slide</h1>
+    </div>
+  </section>
+</article>
+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

+
+ +
+
+ +
+

Embedding Media

+
+ +
+
+
+
+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

+ 
<div class="embed">
+ <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay ></div>
+</div>
+

.embed (responsive)

+
+ +
+ +
+
+
+ +
+ +
+ +
+
+ +
+
+
+ +
+
+
+ +
+ +
+

Be Awesome

+
+
+
+
+ +
+ +
+

Think Different

+

Overlay: fullscreen.bg-black > .embed.dark or .light

+
+ +
+
+ +
+

One more thing...

+
+ +
+
+
+
+
+

Ag

+
+ +
+

San Francisco

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+ +
+

Start in seconds

+

120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+
+

😎

+

Thank you!

+

@WebSlides

+
+ +
+
+ + + + + + + + + + + + diff --git a/demos/landings.html b/demos/landings.html new file mode 100644 index 0000000..1ddb483 --- /dev/null +++ b/demos/landings.html @@ -0,0 +1,1933 @@ + + + + + + + + + + WebSlides Landings: Create your web presence easily + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ + + +
+ + +
+

Landings

+

* * *

+

+ + WebSlides +

+
+ +
+
+ +
+

The interface is your brand:

+

Create a stylish web presence easily

+
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code looks neat, pure. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer. Tutorials: Components · Classes.

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container (width: 90%)</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+ +
+
+
+

Let's check out some examples.

+

All content is for demo purposes only.

+
+
    +
  1. Welcomes
    2. +
  2. Covers
    3. +
  3. Abouts & Teams
    4. +
  4. Features & Benefits
    5. +
  5. Cards
    6. +
  6. Metrics & Data
    7. +
  7. Pricing & Offers
    8. +
  8. Quotes
    9. +
  9. Buttons & Badges
    10. +
  10. Forms
    11. +
  11. SVG Icons
    12. +
  12. Logos
    13. +
  13. CSS Animations
    14. +
  14. Embedding videos, maps, charts...
    15. +
+
+ +
+
+ +
+

Welcomes

+

WebSlides is an open source tool for telling stories.
+ Make it simple, but significant.

+ +
+
+
+ +
+

How to Tell Your Story?

+

* * *

+

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.

+
+
+
+ +
+

Why WebSlides? Good karma and productivity.

+
+
+
    +
  • +

    We're web people.

    +

    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.

    +
    • +
  • +

    Work better, faster.

    +

    Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

    +
    • +
+
+
+ +
+
+
+

Why WebSlides?

+

There are amazing presentation tools out there.

+

Everyone loves a good story. WebSlides is about good karma. 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.

+

* * *

+

Best,
+ @jlantunez. +

+
+ +
+
+ +
+
+

HTML Presentations Made Easy

+

+ + + + + WebSlides + + Demos · Github +

+
+
    +
  • +
    +

    100% customizable

    + Clean markup. +
    +
    • +
  • +
    +

    + + + + Good Karma +

    + Just the right features. +
    +
    • +
  • +
    +

    + + + + Prototype faster +

    + Design landings, portfolios... +
    +
    • +
+
+ +
+
+ +
+
+

Welcomes

+

+ + + + Call to Action +

+

Make secure purchases in stores, in apps, and now on the web. The safer way to pay.

+

+ iOS app + Android app +

+
+
+ +
+
+
+
+
+
+ Pixel Phone +
+
+ +
+

+ Cari is your best friend +

+

Your life will be more complete.

+

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.

+

+ iOS app + Android app +

+
+ +
+ +
+ +
+
+ + +
+

Covers

+
+
+
+ + +
+

California

+

+ + + + Yosemite National Park. +

+
+ +
+
+ +
+

GOOD KARMA

+

WebSlides is about telling the story, and sharing it in a beautiful way.

+
+ +
+
+ +
+
+

New in London

+

Hotel Daenerys

+

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.

+

More info

+
+
+ +
+
+ +
+

Plan your next trip

+

Summ.er

+

The best places at the best price.

+

+ Install iOS app + Install Android app +

+
+ +
+
+ +
+

$975

+
+ +
+
+ +
+

Living on Mars

+

Paula Chan, CEO of SpaceY.

+
+ +
+
+

+ +

+
+ +
+
+
+ +
+

PROBLEM & SOLUTION

+

The history of the music industry is also the story of the development of technology.

+
+ +
+
+ +
+

Location Intelligence

+

The application of geographic mapping to data

+
+ +
+
+
+

Abouts & Teams

+
+ +
+
+
+
+

WebSlides help you build a culture of excellence.

+
+ +
+

WebSlides is the easiest HTML presentation framework. All content is for demo purposes only. All images are the copyright of their respective owners.

+
+ +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+
+ +
+
+
+

About/Services/Clients

+

ul.flexblock.blink.border

+ +
+ +
+
+
+

ul.flexblock.steps

+
    + +
  • + + + + + +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    + + + + + +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    + + + + + +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    + + + + + +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+ +
+
+ +
+
+
+

+ FAQs

+

WebSlides is an open source solution by @jlantunez. If you have additional questions, get in touch!

+
+ +
+
Why WebSlides?
+

There are excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
Is WebSlides a framework?
+

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture.

+
+ +
+
What can I do with WebSlides?
+

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want, add background images, videos... +

+

* * *

+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+
+ +
+ +
+ +
+
+
+

Why WebSlides?

+

.text-cols (2 columns).

+
+

Everyone loves a good story. WebSlides is about sharing and good karma. 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.

+

WebSlides help you build a culture of innovation and excellence. 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.

+
+
    +
  • +
    + + + + @WebSlides +
    +
    • +
  • +
    + + + + Contribute +
    +
    • +
  • +
    + + + + Call us at 555.345.6789 +
    +
    • +
+
+ +
+
+
+

Team

+ +
+ +
+
+
+

Team

+ +
+ +
+
+
+

Features & Benefits

+
+ +
+
+
+

Features

+
    +
  • +
    +

    + → + Simple Navigation +

    + with arrow keys and swipe. +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. +
    +
    • +
  • +
    +

    + + + + Slide Counter +

    + Current/Total number +
    +
    • +
  • +
    +

    + 40+ + Beautiful Components +

    + Covers, cards, quotes... +
    +
    • +
  • +
    +

    + + + + Vertical Rhythm +

    + Use multiples of 8. +
    +
    • +
  • +
    +

    + 500+ + SVG Icons +

    + Font Awesome Kit. +
    +
    • +
+
+
+
+
+
+
+ + + +

Feature 1

+

Test your web and mobile designs, and quickly incorporate user feedback.

+
+
+ + + + +

Benefit 2

+ +

When you're really passionate about your job, you can change the world.

+
+
+ + + + + +

Design Better

+

The most popular elements commonly used for creating landings and portfolios.

+
+
+ +
+ +
+
+
+
+
+
iPhone
+
+
+

+ + + + iPhone 7 +

+

3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align

+

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.

+

apple.com/iphone

+
+
+ +
+ +
+
+ + +
+
+

iPhone 7

+

A phone should be absolutely simple, beautiful, and magical to use. 3D Touch, 12MP photos, and 4K video.

+
+

Benefit 1

+

The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.

+
+ +
+

Benefit 2

+

The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.

+
+ +
+ +
+ +
+
+
+
+
+
+ Pixel Phone +
+
+ +
+

+ A Phone by Google +

+

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

+
    +
  • + + Client: + + Google (2016). +
    • +
  • + + Services: + + Industrial Design. +
    • +
  • + + Website: + + madeby.google.com/phone +
    • +
+
+ +
+ +
+ +
+
+
+ +
+

ul.flexblock.specs

+
    +
  • +
    +

    + + + + Navigation with arrow keys and slide counter +

    + Fade transition to all slides. +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. URL: #slide=number +
    +
    • +
  • +
    +

    + + + + Vertical rhythm +

    + Use multiples of 8. +
    +
    • +
+
+ +
+ +
+
+
+
+
+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Faster LTE with the best worldwide roaming. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+ iPhone +
+
+ +
+ +
+
+
+

Cards

+
+ +
+
+
+
+
+ Man in a motorcycle +
+ + + + + Ryan Holloway (Unsplash) + +
+
+ +
+

+ Cards +

+

Price: $64 — .card-50

+
    +
  • + Size: 24/32. +
    • +
  • Color: Black.
    • +
  • Composition: Cotton 99%; Elastane 1%.
    • +
+

+ 5-pocket low-rise jeans in washed stretch denim with a button fly and slim legs. The jeans are made partly from recycled cotton. +

+
+ +
+ +
+ +
+
+
+
+
+ Alhambra, Granada +
+ + + + + Victoriano Izquierdo (Unsplash) + +
+
+ +
+

+ Cards +

+

Alhambra, Granada — .card-60

+ +

+ 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. +

+
+ +
+ +
+ +
+
+
+
+ Bonsai +
+ +
+

Bonsai

+

Bonsai is a Japanese art form using trees grown in containers — .fullscreen > .card-50.

+

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ộ.

+

* * *

+
+ +
+
+
+
+

Metrics & Data

+
+ +
+
+
+
+

WebSlides help you build a culture of innovation.

+
+ +
+

.flexblock.metrics All content is for demo purposes only, to show an example of a live site. All images are the copyright of their respective owners.

+
+ +
    +
  • Founded + 1986 +
    • +
  • + 120+ + Prebuilt Slides +
    • +
  • + + + + + + 32M Downloads +
    • +
  • + + + + + + Revenue: $72M +
    • +
+
+ +
+
+
+

Metrics

+ +
    +
  • Founded + 1972 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + EBITDA: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+ +
+

2,356,478

+

downloads in first 72 hours

+
+ +
+
+ +
+
+

+ + + +

+

1,000,000

+

We're working to protect up to a million acres of sustainable forest.

+
+
+ +
+
+
+

Pricing & Offers

+
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+

Choose one plan

+

Simple pricing. No credit card required!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PlansGoodBetterAwesome
PriceFree$6$10
HD StreamingNoYesYes
Screens you can watch on at the same time12Unlimited
Access to exclusive contentNoNoYes
+
+ +
+
+
+
+
+

$40

+
+ +
+

Watch TV shows anytime, anywhere

+

.frame.bg-red

+
+ +
+ +
+ +
+
+ +
+
+
+ +
+ +
+

Get 8 weeks free

+
+ +
+ +
+ +
+
+
+

Quotes

+
+ +
+
+ +
+ +
+

Why WebSlides?

+
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

+

Avatar @jlantunez

+
+
+
+ +
+
+ +
+
+

I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers. +

+

Zaha Hadid

+
+
+ +
+
+
+
+ +
Leonardo da Vinci
+
+

“WebSlides helped us build a culture of innovation and excellence.”

+

Leonardo da Vinci

+
+ +
+
+ +
+
+ +
+
+
+

"We will reinvent productivity to empower every person and every organization on the planet to do more and achieve more."

+

Satya Nadella.

+
+
+
+ +
+

+
+
+
+ +
+
+
+

"Some people see innovation as change, but we have never really seen it like that. It's making things better."

+

Tim Cook, CEO of Apple.

+
+
+
+ +
+
+
+
+

Buttons

+

+ + .button + + + + + svg icon + +

+

+ + .button.radius + .button.ghost +

+
+
+

Badges

+

a.badge-ios and a.badge-android

+

+ + iOS App + + Android App +

+
+
+ +
+
+
+

Forms

+
+ +
+
+ + +
+

Planning a vacation?

+

Hidden attractions and unusual things to do.

+
+
    +
    • +
    • +
    • +
+
+
+ +
+
+ +
+
+
+
+
+ Create a free account +

+

+

+

+
+
+
+ +
+
    +
  • +
    + + + +

    Good karma

    + Just the right features. +
    +
    • +
  • +
    + + + +

    Fast & Versatile

    + No need to know code. 120+ slides. +
    +
    • +
  • +
    + + + +

    Private Network

    + Simple and secure file sharing. +
    +
    • +
+
+ +
+ +
+ +
+
+ +
+
+

+ Accepting + + + + Pay is easy +

+

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: +

+
+ + +
+
+
+ +
+
+ + +
+

+
+
+ Welcome back +

+ +

+

+ +

+

+ +

+
+
+

Don't have an account? Sign up!

+
+ +
+
+
+

Optional · 500+ icons

+

+ + + + + Font Awesome + + as SVG icons +

+ 
<svg class="fa-flag">
+	<use xlink:href="#fa-flag"></use>
+</svg>
+

How to change icons?

+
    +
  1. Go to fontastic.me.
    2. +
  2. Create a free account.
    3. +
  3. Select new icons.
    4. +
  4. Publish as SVG sprite.
    5. +
  5. Edit svg-icons.css and svg.icons.js.
    6. +
+
+ +
+
+
+

Transparent Logos

+

+ Change the color of a .svg/.png image using CSS. Images are property of their respective owners. +

+
+
    +
  • +
    + Google +

    Height recommended: 48px

    +
    +
    • +
  • +
    + +

    img.blacklogo

    +
    +
    • +
  • +
    + +

    img.graylogo

    +
    +
    • +
  • +
    + +

    img.whitelogo

    +
    +
    • +
+
+ +
+
+
+

CSS Animations

+

Fadein transition to all slides.

+ 
<article id="webslides">
+  <section>
+    <div class="wrap fadeInUp">
+      <h1>Slide</h1>
+    </div>
+  </section>
+</article>
+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

+
+ +
+
+
+

The little things mean the most

+

.fadeInUp

+
+ +
+
+
+
+ Pixel Phone +
+

.zoomIn

+
+ +
+
+
+

.slow (animation duration)

+ 
<section>
+      <div class="wrap">
+      	<h2 class="fadeIn slow">Slide 1</h2>
+      </div>
+</section>
+
+ +
+
+
+

h2.fadeIn.slow

+
+ +
+
+
+

Embedding Media

+

Images, videos, maps, charts...

+
+ +
+
+ +
+

+ + + + Unsplash = Fullscreen Backgrounds +

+

How to embed Unsplash photos? →

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

+ + + + Position .background outside of .wrap container. +

+
+ +
+
+
+
+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes.

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
+ </iframe>
+</div>
+

.embed (responsive)

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+ +
+ +
+

Every end is a new beginning

+
+ +
+
+
+ +
+ +
+

Overlay

+

section.fullscreen.bg-blue > .embed.dark or .light

+
+ +
+
+
+

Charts

+ +
+ +
Chart
+ +
+ +
+ +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+ +
+

Start in seconds

+

120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + + + + diff --git a/demos/longforms.html b/demos/longforms.html new file mode 100644 index 0000000..5c1ba78 --- /dev/null +++ b/demos/longforms.html @@ -0,0 +1,415 @@ + + + + + + + + + + WebSlides Demo: Longforms + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+ + + +
+

+ Longform Demo +

+

How to engage readers with longform journalism?
All content is for demo purposes only. +

+

+ + + + + WebSlides + +

+
+ +
+
+ +
+

The Art of Storytelling

+

David Yang David Yang. Nov 16th, 2032.

+

+ WebSlides want to help tell stories that are meaningful. All content is for demo purposes only. +

+

People share content that makes them feel inspired. WebSlides is free and open source. We built it because we need a platform for beautiful storytelling. Longform journalism has grown in popularity over the past several years, with blogs and media organizations including Medium, The Huffington Post, and The New York Times creating or expanding longform coverage and new companies such as The Atavist, Longreads.com and Longform.org being founded to capitalize on the new interest.

+
+

.wrap.longform = 72rem (720px).
+ Why? Reading efficiency is highest at 90-95 characters per line. +

+
+

Longform journalism is a branch of journalism dedicated to longer articles with larger amounts of content. Typically this will be between 1,000 and 20,000 words.

+

Storytelling is the social and cultural activity of sharing stories, often with improvisation, theatrics, or embellishment. Stories or narratives have been shared in every culture as a means of entertainment, education, cultural preservation and instilling moral values.

+

Crucial elements of stories and storytelling include plot, characters and narrative point of view. The term 'storytelling' is used in a narrow sense to refer specifically to oral storytelling and also in a looser sense to refer to techniques used in other media to unfold or disclose the narrative of a story.

+

Storytelling predates writing, with the earliest forms of storytelling usually oral combined with gestures and expressions. In addition to being part of religious rituals, some archaeologists believe rock art may have served as a form of storytelling for many ancient cultures.

+

Alignments

+

This is an image of a Nao (robot), aligned to the right. It also has a small caption.

+
+ Robot +
+

figure.alignright

+
+
+

For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text.

+

Nao (pronounced now) is an autonomous, programmable humanoid robot developed by Aldebaran Robotics, a French robotics company headquartered in Paris. The robot's development began with the launch of Project Nao in 2004. On 15 August 2007, Nao replaced Sony's robot dog Aibo as the robot used in the RoboCup Standard Platform League (SPL), an international robot soccer competition. The Nao was used in RoboCup 2008 and 2009, and the NaoV3R was chosen as the platform for the SPL at RoboCup 2010.

+
+
+ Skater +
+

.text-pull-left

+
+
+

This is an image of a skate, aligned to the left. It also has a small caption. For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text

+

Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.

+
+

The story was then told using a combination of oral narrative, music, rock art and dance, which bring understanding and meaning of human existence through remembrance and enactment of stories. People have used the carved trunks of living trees and ephemeral media (such as sand and leaves) to record stories in pictures or with writing. Complex forms of tattooing may also represent stories, with information about genealogy, affiliation and social status.

+
+

"The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories." — .text-pull-right.

+
+

With the advent of writing and the use of stable, portable media, stories were recorded, transcribed and shared over wide regions of the world. Stories have been carved, scratched, painted, printed or inked onto wood or bamboo, ivory and other bones, pottery, clay tablets, stone, palm-leaf books, skins (parchment), bark cloth, paper, silk, canvas and other textiles, recorded on film and stored electronically in digital form. Oral stories continue to be created, improvisationally by impromptu storytellers, as well as committed to memory and passed from generation to generation, despite the increasing popularity of written and televised media in much of the world.

+
+

Center aligned

+
+ Scene from the Women’s March on Washington, DC. +
+

figure.aligncenter

+
+
+

This is a center aligned image. It also has a small caption. The sky (or celestial dome) is everything that lies above the surface of the Earth, including the atmosphere and outer space. The intensity of the sky varies greatly over the day, and the primary cause of that intensity differs as well.

+
+
+ Japan +
+

figure.text-pull

+
+
+

When the sun is well above the horizon, direct scattering of sunlight (Rayleigh scattering) is the overwhelmingly dominant source of light. However, in twilight, the period of time between sunset and night and between night and sunrise, the situation is more complicated.

+
+
+
+
+

Building a platform for storytelling

+

.text-cols (2 columns).

+
+

The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories.

+

Human knowledge is based on stories and the human brain consists of cognitive machinery necessary to understand, remember and tell stories.

+

Humans are storytelling organisms that both individually and socially, lead storied lives. Stories mirror human thought as humans think in narrative structures and most often remember facts in story form.

+

Facts can be understood as smaller versions of a larger story, thus storytelling can supplement analytical thinking. Because storytelling requires auditory and visual senses from listeners, one can learn to organize their mental representation of a story, recognize structure of language and express his or her thoughts.

+

Stories with karma

+

For many multi-media communication complex institutions, communicating by using storytelling techniques can be a more compelling and effective route of delivering information than that of using only dry facts. Uses include:

+
+
+ +
+
+
+

Heading one

+

Heading two

+

Heading three

+

Heading four

+
Heading five
+
Heading six
+
+

Ordered List

+
    +
  1. Medium = Beautiful articles.
    2. +
  2. Typeform = Beautiful forms.
    3. +
  3. WebSlides = Beautiful presentations and longforms.
    4. +
+

Unordered List

+
    +
  • List Item 1
    • +
  • List Item 2
    • +
  • List Item 3
    • +
+

Mixed List

+
    +
  1. + List Item 1 +
      +
    • List Item 1
      • +
    • + List Item 2 +
        +
      1. List Item 1
        2. +
      2. + List Item 2 +
          +
        • List Item 1
          • +
        • List Item 2
          • +
        • List Item 3
          • +
        +
        3. +
      3. List Item 3
        4. +
      +
      • +
    • List Item 3
      • +
    +
    2. +
  2. List Item 2
    3. +
  3. List Item 3
    4. +
+
+

Table Styles

+ + + + + + + + + + + + + + + + + + + + + + + +
Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
+
+

Blockquote

+

The blockquote tag can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:

+
+

"Women, like men, should try to do the impossible. And when they fail, their failure should be a challenge to others."

+

Amelia Earhart.

+
+

Modern storytelling has a broad purview. In addition to its traditional forms (fairytales, folktales, mythology, legends, fables etc.), it has extended itself to representing history, personal narrative, political commentary and evolving cultural norms. Contemporary storytelling is also widely used to address educational objectives.

+
+

"Without freedom of thought, there can be no such thing as wisdom - and no such thing as public liberty without freedom of speech." .text-pull

+

Benjamin Franklin.

+
+

Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.

+

A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.

+
+

Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place.

+

Sheryl Sandberg.

+
+

Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. Stories are universal in that they can bridge cultural, linguistic and age-related divides. Storytelling can be adaptive for all ages, leaving out the notion of age segregation. +

+

Storytelling can be used as a method to teach ethics, values and cultural norms and differences. Learning is most effective when it takes place in social environments that provide authentic social cues about how knowledge is to be applied. Stories function as a tool to pass on knowledge in a social context. So, every story has 3 parts. First, The setup (The Hero's world before the adventure starts). Second, The Confrontation (The hero's world turned upside down). Third, The Resolution (Hero conquer's villain, but it's not enough for Hero to survive. The Hero or World must be transformed). Any story can be framed in such format.

+
+

Stories that stay with you

+

Subscribe to our newsletter. All content is for demo purposes only.

+
+ + +
+
+
+
+ +
+

Ready to start?

+

Create your stories instantly.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + diff --git a/demos/media.html b/demos/media.html new file mode 100644 index 0000000..2636259 --- /dev/null +++ b/demos/media.html @@ -0,0 +1,947 @@ + + + + + + + + + + WebSlides Tutorial: Videos, Images, and Maps + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Media

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+
+

A quick reference guide for beginners

+

Videos, images, maps, and charts.

+ +
+ +
+
+
+

+ + + + Insert images wherever you want +

+

15 different positions.

+
+ +
+
+
+

15 Different Backgrounds

+
    +
  • .background (fullscreen)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
+
+ +
+
+
+

+ + + + .background = Fullscreen Backgrounds +

+

How to embed Unsplash photos? →

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

+ + + + Position .background outside of .wrap container. +

+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ +
+
+

.background-(position)

+

.background-left-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

.background.anim

+
+ +
+
+ +
+

Opacity

+

[class*="bg-"] > .background.light

+ 
<section class="bg-black">
+  <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+
+
+
+ +
+

Opacity

+

[class*="bg-"] > .background.dark

+ 
<section class="bg-black">
+  <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+
+
+
+
+

Optional · 500+ icons

+

+ + + + + Font Awesome + + as SVG icons +

+ 
<svg class="fa-flag">
+	<use xlink:href="#fa-flag"></use>
+</svg>
+

How to change icons?

+
    +
  1. Go to fontastic.me.
    2. +
  2. Create a free account.
    3. +
  3. Select new icons.
    4. +
  4. Publish as SVG sprite.
    5. +
  5. Edit svg-icons.css and svg.icons.js.
    6. +
+
+ +
+
+
+

ul.flexblock.metrics.border

+ +
    +
  • Founded + 2024 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + EBITDA: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

Transparent Logos

+

+ Change the color of a .svg/.png image using CSS. Images are property of their respective owners. +

+
+ +
+ +
+
+ +
+
+

An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

+

Avatar @username, .avatar-56

+
+
+

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

+
+ +
+
+
+
+
+

Devices

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+
+ iPhone +
+
+ +
+ +
+ +
+
+
+
+
+ Screenshot +
+
+ +
+

Screenshots

+

HTML/CSS Browser.

+ 
<figure class="browser">
+  <img alt="Screenshot" src="image.jpg">
+</figure>
+
+ +
+ +
+
+ + + +
+

+ Videos +

+
+ +
+
+
+

Background videos

+ 
<section class="fullscreen">
+  <div class="embed">
+    <video autoplay loop poster="image.jpg">
+      <source src="video.mp4" type="video/mp4">
+    </video>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive) > video

+
+ +
+
+
+ +
+
+
+
+

Background videos

+

Transparent overlay:

+ 
<section class="fullscreen bg-blue">
+  <div class="embed dark">
+    <video autoplay muted loop poster="image.jpg">
+      <source src="video.mp4" type="video/mp4">
+    </video>
+  </div>
+</section>
+
+

.fullscreen.bg-blue > .embed.dark (or .light) > video

+
+ +
+
+
+ +
+ +
+

Muted

+

Overlay: section.fullscreen.bg-blue > embed.dark or .light

+
+ +
+
+
+
+

Responsive Videos

+

Just copy and paste the code from YouTube to your slide.

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
+ </iframe>
+</div>
+

.embed (responsive)

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+

Fullscreen YouTube Video

+ 
<section class="fullscreen">
+  <div class="embed">
+    <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
+    </iframe>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive)

+
+ +
+
+ +
+ +
+ +
+
+

+ + + +

+
+

+ + + + + YouTube API + +

+

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

+

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

+
+ +
+
+
+

+ + + + YouTube API Parameters +

+

Syntax: data-autoplay, data-loop, data-no-controls, data-mute.

+
+
+
+ 
<div class="embed">
+  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
+  </div>
+</div>
+

autoplay + loop

+
+ +
+ 
<div class="embed">
+  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
+  </div>
+</div>
+

autoplay + mute + no controls.

+
+ +
+ +
+ +
+
+
+
+

YouTube API

+

autoplay + loop

+ 
<div class="embed">
+  <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop>
+  </div>
+</div>
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+

+ + + + Autoplay Feature +

+

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.

+
+ +
+
+
+

Let's make some magic with the YouTube API

+

How to make a fullscreen YouTube video? .fullscreen > .embed

+
+ 
<section class="fullscreen">
+  <div class="embed">
+    <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
+  </div>
+</section>
+
+

The video will automatically play when the slide is loaded.

+
+ +
+
+ +
+
+
+ +
+
+
+

Fullscreen YouTube video background

+

Overlaying a transparent background on an embedded Youtube video:

+
+ 
<section class="fullscreen bg-black">
+  <div class="embed dark">
+    <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
+  </div>
+</section>
+
+

.fullscreen[class*="bg-"] > .embed.dark or .light

+
+ +
+
+ +
+
+
+ +
+

Overlay

+

.fullscreen[class*="bg-"] > .embed.dark or .light

+
+ +
+
+ +
+

+ + + + Maps & Charts +

+
+ +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+
+
+
+ +
+ + + + + Google Maps + +
+
+ +
+

+ Discover Seville +

+

.card-50.bg-white

+ +

+ There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies. +

+
+ +
+ +
+ +
+
+
+ +
+ +
+
+
+

Charts

+ +
+ +
Chart
+ +
+ +
+ +
+
+ +
+

Start in seconds

+

120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+
+

😎

+

@WebSlides

+
+ +
+
+ + + + + + + + + + + + diff --git a/demos/netflix-culture.html b/demos/netflix-culture.html new file mode 100644 index 0000000..1c237f8 --- /dev/null +++ b/demos/netflix-culture.html @@ -0,0 +1,388 @@ + + + + + + + + + + Netflix's Culture · WebSlides + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

+ Netflix's Culture +

+

* * *

+

+ + + WebSlides +

+
+ +
+
+
+

+ + + + A bit of context +

+
+

Patty McCord created Netflix's culture. She wrote the document called "Netflix Culture: Freedom & Responsibility." (2009). So far, it's been shared over 16 million times on Slideshare and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.

+
+ +
+
+ +
+
+
+

We seek excellence

+
+
+

We value candor, transparency, and courage. We embrace context and avoid control, seeking insight and understanding to make sound decisions. +

+
+
+
+ +
+
+ + +
+

Diversity & Inclusiveness

+
+ +
+
+ +
+

7 Aspects of our Culture

+
+
    +
  1. Values are what we Value
    2. +
  2. High Performance
    3. +
  3. Freedom & Responsibility
    4. +
  4. Context, not Control
    5. +
  5. Highly Alined, Loosely Coupled
    6. +
  6. Pay Top of Market
    7. +
  7. Promotions & Development
    8. +
+
+ +
+
+ +
+

1/7 Values are what we value

+

Make your values mean something.

+
+

Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went bankrupt from fraud had these values displayed in their lobby: integrity, communication, respect, and excellence.

+
+ +
+
+ +
+

9 Behaviors

+

At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.

+
+
    +
  1. Judgment
    2. +
  2. Communication
    3. +
  3. Impact
    4. +
  4. Curiosity
    5. +
  5. Innovation
    6. +
  6. Courage
    7. +
  7. Passion
    8. +
  8. Honesty
    9. +
  9. Selflessness
    10. +
+
+ +
+
+ +
+

7 Aspects of our Culture

+
+
    +
  1. Values are what we Value
    2. +
  2. High Performance
    3. +
  3. Freedom & Responsibility
    4. +
  4. Context, not Control
    5. +
  5. Highly Alined, Loosely Coupled
    6. +
  6. Pay Top of Market
    7. +
  7. Promotions & Development
    8. +
+
+ +
+
+ +
+

2/7 High Performance

+
    +
  • +
    +

    + + + + We're a team +

    + not a family. +
    +
    • +
  • +
    +

    + + + + We're a pro sports team +

    + not a kid's recreational team. +
    +
    • +
  • +
    +

    + + + + We have stars +

    + in every position. +
    +
    • +
+
+ +
+
+ +
+

Why are we so manic on high performance?

+

In procedural work, the best are 2x better than the average.

+
+

In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.

+
+ +
+
+ +
+

Content that people love

+
+ +
+
+
+ +
+ +
+
+
+

3/7 Freedom & Responsibility

+

Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.

+
+

Netflix's Policy: "Act in Netflix's best interest" (5 words long).

+
+ +
+
+
+

"Act in Netflix's best interest" generally means...

+
    +
  • + Expense only what you would otherwise not spend. +
    • +
  • + Travel as you would if it were your own money. +
    • +
  • + What gifts you can accept? + Disclose non-trivial vendor gifts. +
    • +
  • + Take from Netflix only when it is inefficient to not take (calls...) +
    • +
+
+ +
+
+
+

Summary of Freedom & Responsibility

+
+
    +
  1. As we grow, minimize rules.
    2. +
  2. Inhibit chaos with ever more high performance people.
    3. +
  3. Flexibility is more important than efficiency in the long term.
    4. +
+
+ +
+
+
+
+
+

+ This is a homage. +

+

Patty McCord wrote "Netflix Culture: Freedom & Responsibility". Go to Slideshare to read the whole document.

+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+
+

+ Netflix +

+
+
+ + + + + + + + + + diff --git a/demos/portfolios.html b/demos/portfolios.html new file mode 100644 index 0000000..7a7c944 --- /dev/null +++ b/demos/portfolios.html @@ -0,0 +1,1874 @@ + + + + + + + + + + WebSlides Portfolios: Showcase your work + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ +
+

Portfolios

+

* * *

+

+ + WebSlides +

+
+
+
+ +
+

Design faster, better.

+

Create a beautiful portfolio for your work

+
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code looks superb. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer. Tutorials: Components · Classes.

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container (width: 90%)</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+ +
+
+
+

Examples

+

All content is for demo purposes only.

+
+
    +
  1. Welcomes & Abouts
    2. +
  2. Covers & Case Studies
    3. +
  3. Metrics & Data
    4. +
  4. Services & Clients
    5. +
  5. Galleries
    6. +
  6. Cards
    7. +
  7. Features & Benefits
    8. +
  8. CV/Resumé
    9. +
  9. Quotes
    10. +
  10. SVG Icons
    11. +
  11. Logos
    12. +
  12. CSS Alignments
    13. +
  13. CSS Animations
    14. +
  14. Background images
    15. +
  15. Embedding videos, maps, charts...
    16. +
  16. Typography
    17. +
+
+ +
+
+
+

Design for trust

+ +
+ +
+
+
+

Design for understanding

+
    +
  • +
    +

    100% purpose

    + Businesses that people love +
    +
    • +
  • +
    +

    + + + + Principles +

    + Useful → Easy → Fast → Beautiful +
    +
    • +
+
+ +
+
+
+
+

We make interfaces and content strategy.

+
+ +
+

We are digital people by nature. When we develop a vision, it is based on knowledge, research and experience. Those images are for demo purposes only.

+
+ +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+
+ +
+
+
+

How we work?

+
    + +
  • + + + + + +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    + + + + + +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    + + + + + +

    03. Principles

    +

    Leadership through openness, empathy, usefulness, and good taste.

    +
    • +
  • +
    + + + + + +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+ +
+
+ + +
+

Covers

+
+
+
+ +
+

Mercedes-Benz

+

Defining a new platform for the connected car

+
+ +
+
+ + +
+
+ +
+

Designing Experiences

+

Meet locals who share your interests.

+
+
+ +
+
+ +
+
+

+ Redesigning + + + + Pay +

+

Content demo. We've been working with the Acme team over the last three months to build a new app.

+

+ Case study › + Open site › +

+
+
+ +
+
+ +
+
+

Christmas Campaign 2016

+

A new home for Apple +

+

We established visual branding and photography direction. All content is for demo purposes only.

+

+ Case study › +

+
+
+ +
+
+
+
+
+

+ A Phone by Google +

+

We worked closely with the very talented people at Acme and created a new website. Content demo.

+
    +
  • + + Client: + + Google (2016) +
    • +
  • + + Services: + + Web Design +
    • +
  • + + Website: + + madeby.google.com/phone +
    • +
+
+ +
+
+ Pixel Phone +
+
+ +
+ +
+ +
+
+
+
+ Screenshot +
+

HTML/CSS Browser: .browser

+
+ +
+
+
+

Metrics & Data

+
+ +
+
+
+
+

WebSlides help you build a culture of innovation.

+
+ +
+

Everyone loves stories. WebSlides is about good karma. Hypertext, clean code, and beauty as narrative elements. All content is for demo purposes only.

+
+ +
    +
  • Founded + 1976 +
    • +
  • + 120+ + Prebuilt Slides +
    • +
  • + + + + + + 24M Downloads +
    • +
  • + + + + + + Revenue: $16M +
    • +
+
+ +
+
+
+ +
    +
  • Founded + 2032 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + EBITDA: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+ +
+

3,456,789

+

downloads in first 48 hours

+
+ +
+
+ +
+
+

+ + + +

+

1,000,000

+

We're working to protect up to a million acres of sustainable forest.

+
+
+ +
+
+ +
+

$48 Billion

+

Revenue in Q2 2019

+
+ +
+
+
+

Services & Clients

+
+ +
+
+
+
+
+

+ + + + + Interfaces + +

+

Design for growth. We've built a team of world-class designers, developers, and managers.

+
+
+

+ + + + Videos +

+

We connect your audience needs, business goals, and brand values into a strategy.

+
+
+

+ + + + + Recruiting + +

+

We offer personalized services with deep expertise in design and technology.

+
+
+

+ + + + Formation +

+

We train teams to help organizations succeed in the digital age.

+
+
+ +
+

.grid > .column

+
+
+
+
+

Services

+

ul.flexblock (flexible blocks).

+
    +
  • + +
    +

    Interfaces

    +
      +
    1. Architecture
      2. +
    2. Design
      3. +
    3. Development
      4. +
    +
    +
    • +
  • + +
    +

    Content Strategy

    + Beautiful and engaging stories that inspires consumers to take action. +
    +
    • +
  • + +
    +

    Customer Experience

    + Attitude. Little details. People always remember how you made them feel. +
    +
    • +
  • + +
    +

    Recruitment

    + We like to help startups by working with them since the beginning. +
    +
    • +
+
+ +
+
+
+

Services

+

ul.flexblock.border.blink (.blink = block link)

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients.border

+ +
+ +
+
+
+

Galleries

+
+ +
+
+
+

.flexblock.gallery

+
+ +
+ +
+
+
+

Team

+

.flexblock.gallery

+ +
+ +
+
+
+

Team

+

.flexblock.gallery

+ +
+ +
+
+
+

.flexblock.gallery

+ +
+ +
+
+
+

Cards

+
+ +
+
+
+
+
+ Mobile Screenshot +
+ + + + + Annie Spratt (Unsplash) + +
+
+ +
+

+ Travis +

+

.card-50.bg-white

+

+ Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro. +

+
    +
  • + Role: Content Strategy +
    • +
  • Client: Travis
    • +
  • Year: 2017
    • +
+
+ +
+ +
+ +
+
+
+
+ iWatch +
+ + + + + Crew (Unsplash) + +
+
+ +
+

Watchly +

+

.fullscreen > .card-50

+

These days it's easy to make interfaces. There are a lot of + frameworks out there, but it's still really hard to make a great interface. +

+
    +
  • + Role: Frontend +
    • +
  • Client: Acme
    • +
  • Year: 2018
    • +
+
+ +
+
+
+
+

Features & Benefits

+
+ +
+
+
+

Features

+
    +
  • +
    +

    + → + Simple Navigation +

    + with arrow keys and swipe. +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. +
    +
    • +
  • +
    +

    + + + + Slide Counter +

    + Current/Total number +
    +
    • +
  • +
    +

    + 40+ + Beautiful Components +

    + Covers, cards, quotes... +
    +
    • +
  • +
    +

    + + + + Vertical Rhythm +

    + Use multiples of 8. +
    +
    • +
  • +
    +

    + 500+ + SVG Icons +

    + Font Awesome Kit. +
    +
    • +
+
+
+
+ +
+
+
    +
  • +
    + + + +

    Incredibly fast

    + Just hold your iPhone near the reader. +
    +
    • +
  • +
    + + + +

    Works with all major banks

    + Apple Pay is accepted in restaurants, hotels... +
    +
    • +
  • +
    + + + +

    The safer way to pay

    + Your card number is never stored. +
    +
    • +
+
+
+ +
+
+ + +
+
+

Call to action

+

WebSlides help you build a culture of innovation. Leadership through openness and good taste.

+
+

Benefit 1

+

The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.

+
+ +
+

Benefit 2

+

The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.

+
+ +
+ +
+ +
+
+
+

.grid > .column

+
+
+
+ + + +

Service

+

We make interfaces and help organizations connect with their audience.

+
+
+ + + +

Benefit 2

+

We are specialists in branding for organizations with a global market in mind.

+
+
+

+ + + + About 3 +

+

Over the years we've been fortunate to work with some of the most respected brands in the world.

+
+
+

+ + + + Feature 4 +

+

Finally, everything you need to make HTML presentations in a simple way.

+
+
+ +
+
+
+
+

CV/Resumé

+
+ +
+
+
+

Worked with

+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+

Quotes

+
+ +
+
+ +
+

Why WebSlides?

+
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

+

Avatar @jlantunez

+
+
+ +
+
+ +
+
+

When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.

+

R. Buckminster Fuller.

+
+
+ +
+
+ +
+
+
+

"There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective."

+

Satya Nadella, CEO of Microsoft.

+
+
+
+ +
+
+
+

Optional · 500+ icons

+

+ + + + + Font Awesome + + as SVG icons +

+ 
<svg class="fa-flag">
+	<use xlink:href="#fa-flag"></use>
+</svg>
+

How to change icons?

+
    +
  1. Go to fontastic.me.
    2. +
  2. Create a free account.
    3. +
  3. Select new icons.
    4. +
  4. Publish as SVG sprite.
    5. +
  5. Edit svg-icons.css and svg.icons.js.
    6. +
+
+ +
+
+
+

Transparent Logos

+

+ Change the color of a .svg/.png image using CSS. Images are property of their respective owners. +

+
+
    +
  • +
    + Google +

    Height recommended: 48px

    +
    +
    • +
  • +
    + + img.blacklogo +
    +
    • +
  • +
    + + img.graylogo +
    +
    • +
  • +
    + + img.whitelogo +
    +
    • +
+
+ +
+
+
+

CSS Alignments

+
+ +
+
+
+ +
+ +
+
+
+

Simple CSS Alignments

+

Put content wherever you want.

+
+ +
+
+
+
+

1/9 left top

+

Put content wherever you want. Have less. Do more. Create beautiful solutions.

+

.slide-top and .content-left

+
+
+ +
+
+
+
+

2/9 center top

+

Beauty is a concept based on aesthetics which is quite subjective and cultural.

+

.slide-top and .content-center

+
+
+ +
+
+
+
+

3/9 right top

+

Harmony and admiration are two universal elements which guide us in order to consider something beautiful.

+

.slide-top and .content-right

+
+
+ +
+
+
+
+

4/9 left center

+

The term interaction design was first coined by Bill Moggridge and Bill Verplank in the mid-1980s.

+

.content-left

+
+
+ +
+
+
+
+

5/9 center

+

Emotional and pleasure theories exist to explain people's responses to the use of interactive products.

+

.content-center

+
+
+ +
+
+
+
+

6/9 right center

+

Simplicity is a major concern in interaction design. The aim is clarity.

+

.content-right

+
+
+ +
+
+
+
+

7/9 left bottom

+

Information architecture is the structural design of shared information environments.

+

.slide-bottom and .content-left

+
+
+ +
+
+
+
+

8/9 center bottom

+

The "a-ha moment" is the moment where there is suddenly a clear forward path.

+

.slide-bottom and .content-center

+
+
+ +
+
+
+
+

9/9 right bottom

+

Philosophy of language seeks to understand the relationship between language and reality.

+

.slide-bottom and .content-right

+
+
+ +
+
+
+

CSS Animations

+

Fadein transition to all slides.

+ 
<article id="webslides">
+  <section>
+    <div class="wrap fadeInUp">
+      <h1>Slide</h1>
+    </div>
+  </section>
+</article>
+

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

+
+ +
+
+
+

Slide

+

.fadeInUp

+
+ +
+
+
+
+ Pixel Phone +
+

.zoomIn

+
+ +
+
+
+

.slow (animation duration)

+ 
<section>
+      <div class="wrap">
+      	<h2 class="fadeIn slow">Slide 1</h2>
+      </div>
+</section>
+
+ +
+
+
+

h2.fadeIn.slow

+
+ +
+
+
+

Background Images

+
+ +
+
+ +
+

+ + + + Unsplash = Fullscreen Backgrounds +

+

How to embed Unsplash photos? →

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

+ + + + Position .background outside of .wrap container. +

+
+ +
+
+
+

15 Different Backgrounds

+
    +
  • .background (cover)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light
    • +
  • .background.dark
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim
    • +
+
+ +
+
+
+

Embedding Media

+

Videos, charts, maps...

+
+ +
+
+
+
+

YouTube API

+

Embed videos with loop, autoplay, and muted attributes.

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
+ </iframe>
+</div>
+

.embed (responsive)

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+ +
+ +
+

We build brands with integrity and substance

+
+ +
+
+
+ +
+ + +
+

We help with design direction

+

0verlay: section.fullscreen.bg-blue > .embed.dark or .light

+
+ +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+
+

Typography

+
+ +
+
+
+
+
+

Ag

+
+ +
+

Roboto in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Maitree in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

.text-apple, .bg-apple {font-family: "San Francisco";}

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+ +
+
+ + + + + + + + + + + + diff --git a/demos/why-webslides.html b/demos/why-webslides.html new file mode 100644 index 0000000..d523ee3 --- /dev/null +++ b/demos/why-webslides.html @@ -0,0 +1,351 @@ + + + + + + + + + + WebSlides: Why WebSlides is so inspiring? + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ +
+

Good Karma

+

+ WebSlides — HTML presentations made easy.
+ Hypertext and beauty as narrative elements. +

+ +
+ +
+
+ + + + + +
+

+ Everyone + + + + Stories +

+
+ +
+
+ +
+ +
+

Why WebSlides?

+
+

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

+

Avatar @jlantunez.

+
+
+
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is clean, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container (width: 90%)</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+ +
+
+ +
+
+

WebSlides was made to inspire people.

+
+
+

There are excellent presentation tools out there. WebSlides is an open source solution for telling stories. Hypertext and beauty as narrative elements.

+
+
    +
  • +
    +

    + → + Keyboard navigation +

    + with arrow keys. +
    +
    • +
  • +
    +

    + + + + Go to a specific slide +

    + URL: #slide=number +
    +
    • +
  • +
    +

    + + + + Slide counter +

    + Current/Total number. +
    +
    • +
+
+ +
+
+
+
    +
  • +
    +

    100% customizable

    + Well documented. +
    +
    • +
  • +
    +

    + 40+ + Beautiful Components +

    + Covers, cards, quotes... +
    +
    • +
  • +
    +

    + + + + Flexible blocks +

    + with auto-fill and equal height. +
    +
    • +
  • +
    +

    + + + + Vertical rhythm +

    + Use multiples of 8. +
    +
    • +
  • +
    +

    + + + + Fade transition +

    + to all slides. +
    +
    • +
  • +
    +

    + 500+ + SVG Icons +

    + Font Awesome Kit. +
    +
    • +
+
+ +
+
+
+
+
+

Support

+

Making a beautiful HTML presentation has never been so rewarding.

+ +
+
+ WebSlides Files +
+
+

Extensible

+

The best way to inspire with your content is to connect on a personal level:

+ +
+
+ +
+ +
+
+ +
+

One more thing...

+

Make your keynote — .bg-apple

+
+ +
+ +
+
+ + + + + + + + + + + + + diff --git a/error.html b/error.html new file mode 100644 index 0000000..b78de2f --- /dev/null +++ b/error.html @@ -0,0 +1,86 @@ + + + + + + + + + + Page not found (404) - WebSlides + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+
+

Page not found!

+

* * *

+

Please check your URL or return to the Home Page.

+
+ +
+ +
+ + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2d22278 --- /dev/null +++ b/index.html @@ -0,0 +1,407 @@ + + + + + + + + Beer and Open Source + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+

Beer and Open Source

+

+ Sven Wagner +

+
+ +
+
+
+

Who Am I?

+

+ Sven Wagner +

+
+
+
    +
  • +

    Open Source

    +
      +
    • Linux User >20years
      • +
    • Running several web, mail, XMPP server
      • +
    • After many trials, nearly every computer runs Debian
      • +
    +
    • +
  • +

    Beer

    +
      +
    • Started apprenticeship in a small brewery in 1996
      • +
    • TU München Weihenstephan from 1998 - 2002
      • +
    • Nearly 20 years commissioning of brewerys world wide
      • +
    • 2017 Co-founder of Waschraumbrauerei
      • +
    • 2020 Co-founder of freibier.cc
      • +
    +
    • +
+

+
+ +
+ +
+
+

How all began?

+

+ It all began with planned MiniDebConf Regensburg 2020 +

+
+
+
    +
  • Plan to make beer, company founded, but no idea at all about a concept.
    • +
  • On day, Cold Tobi asked, if we can brew a beer forr his planned MiniDebConf, we agreed.
    • +
  • On week later, Tobi mentioned, that if we brew a beer for the MiniDebConf, it has to comply with the DFSG
    • +
+

+
+
+ + +
+
+

License for beer recipes

+

+ Why we use CC-0 +

+
+
+
    +
  • In germany recipes have no threshold of originality by law
    • +
  • Only possible way was to hide it or release it to the public domain
    • +
+

+
+
+ +
+
+

Open Knowledge and Hobby Brewer

+

+ Everybody shares everything +

+
+
+
    +
  • If you ask, everybody will tell you his recipe.
    • +
  • A lot of people publish there recipes in billboards, blogs, recipe databeses.
    • +
  • Even on tournaments and championships, everybody is explainign you to the detail, how he made his beer
    • +
+

+
+
+

Open Knowledge and Pro-Brewer

+
+
+
  • If you ask, everybody will tell you his recipe.
+
+ +
+ +
+ +
+

Why WebSlides?

+

Presentations, landings, portfolios, and longforms.

+
+
    +
  • +

    An opportunity to engage.

    +

    WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

    +
    • +
  • +

    Work better, faster.

    +

    Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

    +
    • +
+
+ +
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast.

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container (width: 90%)</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+ +
+
+
+

Features

+
    +
  • +
    +

    + → + Simple Navigation +

    + with arrow keys, presenter... +
    +
    • +
  • +
    +

    + + + + Permalinks +

    + Go to a specific slide. +
    +
    • +
  • +
    +

    + + + + Slide Counter +

    + Current/Total number. +
    +
    • +
  • +
    +

    + 40+ + Beautiful Components +

    + Covers, cards, quotes... +
    +
    • +
  • +
    +

    + + + + Vertical Rhythm +

    + Use multiples of 8. +
    +
    • +
  • +
    +

    + 500+ + SVG Icons +

    + Font Awesome Kit. +
    +
    • +
+
+
+
+
+

WebSlides Demos

+

Contribute on Github. View all ›

+ +
+ +
+
+
+
+
+

+ + + + Guides +

+

If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:

+ +
+
+
WebSlides Files
+
+
+

+ + + + Built to expand +

+

The best way to inspire with your content is to connect on a personal level:

+ +
+
+ +
+
+
+ +
+

Ready to Start?

+

Create your own presentation instantly.
120+ premium slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+
+
+
+

+ Thanks. + + + + + +

+

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

+

Best,
@jlantunez, @belelros, and @luissacristan.

+
+ +
+ +
+ +
+ +
+ + + + + + + + + + + + + diff --git a/static/css/svg-icons.css b/static/css/svg-icons.css new file mode 100644 index 0000000..872ec70 --- /dev/null +++ b/static/css/svg-icons.css @@ -0,0 +1,2350 @@ +/*===================================================== +Important! +/js/svg-icons.js is required. +======================================================= */ + +/*===================================================== +Font Awesome 4.4 as SVG Icons via http://fontastic.me +class = .fa- (Go to https://fortawesome.github.io/Font-Awesome/icons/) + +SVG ICONS - Don't use icon fonts: +https://speakerdeck.com/ninjanails/death-to-fa-fonts +======================================================= */ + +svg { + display: inline-block; + vertical-align: middle; + width: 1em; + height: 1em; + +} +[class*="fa-"].large{font-size: 8rem;} + + +.fa-glass { + width: 1.0000000298023224em; +} + +.fa-music { + width: 0.8571396097540855em; +} + +.fa-search { + width: 0.9285706554849185em; +} + +.fa-envelope-o { + width: 1.000000972300768em; +} + +.fa-heart { + width: 0.9999999646097422em; +} + +.fa-star { + width: 0.9285713043063879em; +} + +.fa-star-o { + width: 0.9285713043063879em; +} + +.fa-user { + width: 0.785713868836563em; +} + +.fa-film { + width: 1.071429569274187em; +} + +.fa-th-large { + width: 0.9285712415972966em; +} + +.fa-th { + width: 1.0000000521540642em; +} + +.fa-th-list { + width: 1.0000000521540642em; +} + +.fa-check { + width: 1.0000000596046448em; +} + +.fa-close { + width: 0.7857149094343185em; +} + +.fa-search-plus { + width: 0.9285706554849185em; +} + +.fa-search-minus { + width: 0.9285706554849185em; +} + +.fa-power-off { + width: 0.8571455205480252em; +} + +.fa-signal { + width: 0.9999999916180968em; +} + +.fa-trash-o { + width: 0.7857138803228736em; +} + +.fa-home { + width: 0.928572153672576em; +} + +.fa-file-o { + width: 0.8571445867419243em; +} + +.fa-clock-o { + width: 0.8571425850192682em; +} + +.fa-road { + width: 1.0714228972792625em; +} + +.fa-download { + width: 0.9285713359713554em; +} + +.fa-arrow-circle-o-down { + width: 0.8571425850192682em; +} + +.fa-arrow-circle-o-up { + width: 0.8571425850192682em; +} + +.fa-inbox { + width: 0.8571455143392086em; +} + +.fa-play-circle-o { + width: 0.8571425850192682em; +} + +.fa-repeat { + width: 0.8571445668737852em; +} + +.fa-refresh { + width: 0.8571436268589423em; +} + +.fa-list-alt { + width: 1.000000972300768em; +} + +.fa-lock { + width: 1.000000972300768em; +} + +.fa-flag { + width: 1.0357158780097961em; +} + +.fa-headphones { + width: 0.9285684004426003em; +} + +.fa-volume-off { + width: 0.42857232317328453em; +} + +.fa-volume-down { + width: 0.642858412116766em; +} + +.fa-volume-up { + width: 0.9285729192197323em; +} + +.fa-qrcode { + width: 0.7857138514518738em; +} + +.fa-tag { + width: 0.8454238213598728em; +} + +.fa-tags { + width: 1.0597098506987095em; +} + +.fa-book { + width: 0.9302451089024544em; +} + +.fa-bookmark { + width: 0.7142852507531643em; +} + +.fa-print { + width: 0.9285733308643103em; +} + +.fa-camera { + width: 1.0714288031060732em; +} + +.fa-font { + width: 0.9285733103752136em; +} + +.fa-bold { + width: 0.7857098877429962em; +} + +.fa-italic { + width: 0.5714278221130371em; +} + +.fa-text-height { + width: 1.000002734363079em; +} + +.fa-text-width { + width: 0.857142724096775em; +} + +.fa-align-left { + width: 0.9999999664723873em; +} + +.fa-align-center { + width: 1.0000009797513485em; +} + +.fa-align-right { + width: 1.0000009797513485em; +} + +.fa-align-justify { + width: 1.0000009797513485em; +} + +.fa-list { + width: 0.9999999906867743em; +} + +.fa-dedent { + width: 0.9999989476054907em; +} + +.fa-indent { + width: 0.9999989476054907em; +} + +.fa-video-camera { + width: 0.9999980057277753em; +} + +.fa-image { + width: 1.071429569274187em; +} + +.fa-pencil { + width: 0.8454248607158661em; +} + +.fa-map-marker { + width: 0.8714316554367542em; + margin-top: -0.2em; +} + +.fa-adjust { + width: 0.8571425850192682em; +} + +.fa-tint { + width: 0.8714316815137863em; +} + +.fa-edit { + width: 0.9955342138805463em; +} + +.fa-share-square-o { + width: 0.9285693491497113em; +} + +.fa-check-square-o { + width: 0.9280096615352704em; +} + +.fa-arrows { + width: 0.9999999888241291em; +} + +.fa-step-backward { + width: 0.5714307241141796em; +} + +.fa-fast-backward { + width: 1.000000935047865em; +} + +.fa-backward { + width: 0.9966524690389633em; +} + +.fa-play { + width: 0.7851562518626451em; +} + +.fa-pause { + width: 0.8571436069905758em; +} + +.fa-stop { + width: 0.8571436069905758em; +} + +.fa-forward { + width: 0.8604901600629091em; +} + +.fa-fast-forward { + width: 0.9999990034848452em; +} + +.fa-step-forward { + width: 0.5714267063885927em; +} + +.fa-eject { + width: 0.85825614631176em; +} + +.fa-chevron-left { + width: 0.7500009983778em; +} + +.fa-chevron-right { + width: 0.6785712540149689em; +} + +.fa-plus-circle { + width: 0.8571425850192682em; +} + +.fa-minus-circle { + width: 0.8571425850192682em; +} + +.fa-times-circle { + width: 0.8571425850192682em; +} + +.fa-check-circle { + width: 0.8571425850192682em; +} + +.fa-question-circle { + width: 0.8571425850192682em; +} + +.fa-info-circle { + width: 0.8571425850192682em; +} + +.fa-crosshairs { + width: 0.8571436069905758em; +} + +.fa-times-circle-o { + width: 0.8571425850192682em; +} + +.fa-check-circle-o { + width: 0.8571425850192682em; +} + +.fa-ban { + width: 0.8571426247557004em; +} + +.fa-arrow-left { + width: 0.8928571492433548em; +} + +.fa-arrow-right { + width: 0.8214280630151052em; +} + +.fa-arrow-up { + width: 0.9285692870616913em; +} + +.fa-arrow-down { + width: 0.9285712018609047em; +} + +.fa-mail-forward { + width: 1.0000031888484955em; +} + +.fa-expand { + width: 0.8571445606648922em; +} + +.fa-compress { + width: 0.8571445886045694em; +} + +.fa-plus { + width: 0.785714827477932em; +} + +.fa-minus { + width: 0.7857138440012932em; +} + +.fa-asterisk { + width: 0.9285713285207748em; +} + +.fa-exclamation-circle { + width: 0.8571425850192682em; +} + +.fa-leaf { + width: 0.9999980080174282em; +} + +.fa-fire { + width: 0.7857128586620092em; +} + +.fa-eye { + width: 0.9999980051070452em; +} + +.fa-eye-slash { + width: 1.000001983717084em; +} + +.fa-exclamation-triangle { + width: 0.9999999636784196em; +} + +.fa-plane { + width: 0.7860879210056737em; +} + +.fa-calendar { + width: 0.9285707051554937em; +} + +.fa-random { + width: 0.9999999022111297em; +} + +.fa-comment { + width: 0.9999974196152834em; +} + +.fa-magnet { + width: 0.8571425850192682em; +} + +.fa-chevron-up { + width: 0.9999999701976776em; +} + +.fa-chevron-down { + width: 0.9999999850988388em; +} + +.fa-retweet { + width: 1.0714306645095348em; +} + +.fa-shopping-cart { + width: 0.9285732470452785em; +} + +.fa-folder { + width: 0.9285712813336886em; +} + +.fa-folder-open { + width: 1.0485479356721044em; +} + +.fa-arrows-v { + width: 0.42857228219509125em; +} + +.fa-arrows-h { + width: 1.000000972300768em; +} + +.fa-bar-chart { + width: 1.1428574323654175em; +} + + + +.fa-camera-retro { + width: 1.0000000074505806em; +} + +.fa-key { + width: 0.9391738375027963em; +} + +.fa-cogs { + width: 1.0714287403970957em; +} + +.fa-comments { + width: 1.0000034073991628em; +} + +.fa-thumbs-o-up { + width: 0.8571465983986855em; +} + +.fa-thumbs-o-down { + width: 0.8571435585618019em; +} + +.fa-star-half { + width: 0.4642870929092169em; +} + +.fa-heart-o { + width: 1.0000009778887033em; +} + +.fa-sign-out { + width: 0.875000032285854em; +} + +.fa-linkedin-square { + width: 0.8571416462459638em; +} + +.fa-thumb-tack { + width: 0.6428600810468197em; +} + +.fa-external-link { + width: 0.9999981845417096em; +} + +.fa-sign-in { + width: 0.8571436069905758em; +} + +.fa-trophy { + width: 0.9285706554849185em; +} + +.fa-upload { + width: 0.9285723492503166em; +} + +.fa-lemon-o { + width: 0.8565869312733412em; +} + +.fa-phone { + width: 0.7857128540053964em; +} + +.fa-square-o { + width: 0.7857118571796491em; +} + +.fa-bookmark-o { + width: 0.7142852507531643em; +} + +.fa-phone-square { + width: 0.8571416462459638em; +} + +.fa-unlock { + width: 1.000000972300768em; +} + +.fa-credit-card { + width: 1.0714279003441334em; +} + +.fa-feed { + width: 0.7864560410380363em; +} + +.fa-hdd-o { + width: 0.8571435995399952em; +} + +.fa-bullhorn { + width: 1.000001672655344em; +} + +.fa-bell-o { + width: 0.999999426305294em; +} + +.fa-certificate { + width: 0.8571425257250667em; +} + +.fa-hand-o-right { + width: 1.0000000074505806em; +} + +.fa-hand-o-left { + width: 0.9999989792704582em; +} + +.fa-hand-o-up { + width: 0.8571425552167966em; +} + +.fa-hand-o-down { + width: 0.8571416288614273em; +} + +.fa-arrow-circle-left { + width: 0.8571425850192682em; +} + +.fa-arrow-circle-right { + width: 0.8571425850192682em; +} + +.fa-arrow-circle-up { + width: 0.8571425850192682em; +} + +.fa-arrow-circle-down { + width: 0.8571425850192682em; +} + +.fa-wrench { + width: 0.9391775503754616em; +} + +.fa-tasks { + width: 1.0000009797513485em; +} + +.fa-filter { + width: 0.7857138165272772em; +} + +.fa-arrows-alt { + width: 0.857147540897131em; +} + +.fa-group { + width: 1.071428755919138em; +} + +.fa-chain { + width: 0.9285723119974136em; +} + +.fa-cloud { + width: 1.0714285423358234em; +} + +.fa-flask { + width: 0.9285696372389793em; +} + +.fa-cut { + width: 0.9975810423493385em; +} + +.fa-copy { + width: 1.0000010058283806em; +} + +.fa-paperclip { + width: 0.7857148349285126em; +} + +.fa-floppy-o { + width: 0.8571445867419243em; +} + +.fa-square { + width: 0.8571416462459638em; +} + +.fa-bars { + width: 0.8571436069905758em; +} + +.fa-list-ul { + width: 1.0000010132789612em; +} + +.fa-list-ol { + width: 1.0083701331168413em; +} + +.fa-strikethrough { + width: 0.9999989485368133em; +} + +.fa-underline { + width: 0.8571445560082793em; +} + +.fa-table { + width: 0.9285723157227039em; +} + +.fa-magic { + width: 0.9436386581510305em; +} + +.fa-truck { + width: 1.0357128381729126em; +} + +.fa-pinterest { + width: 0.8571391701698303em; +} + +.fa-pinterest-square { + width: 0.8571406031646802em; +} + +.fa-google-plus-square { + width: 0.8571416462459638em; +} + +.fa-google-plus { + width: 1.2857149516544268em; +} + +.fa-money { + width: 1.0714295767247677em; +} + +.fa-caret-down { + width: 0.571429718285799em; +} + +.fa-caret-up { + width: 0.5714296959340572em; +} + +.fa-caret-left { + width: 0.3928574174642563em; +} + +.fa-caret-right { + width: 0.32142970090126255em; +} + +.fa-columns { + width: 0.9285723157227039em; +} + +.fa-sort { + width: 0.5714296959340572em; +} + +.fa-sort-desc { + width: 0.571429718285799em; +} + +.fa-sort-asc { + width: 0.5714296959340572em; +} + +.fa-envelope { + width: 1.0000022239983082em; +} + +.fa-linkedin { + width: 0.8571429451305903em; +} + +.fa-rotate-left { + width: 0.8571445606648922em; +} + +.fa-gavel { + width: 1.0106014609336853em; +} + +.fa-dashboard { + width: 1.000001922249794em; +} + +.fa-comment-o { + width: 0.9999974196152834em; +} + +.fa-comments-o { + width: 1.0000035266084524em; +} + +.fa-bolt { + width: 1.000000972300768em; +} + +.fa-sitemap { + width: 1.0000010058283806em; +} + +.fa-umbrella { + width: 0.9285703394562006em; +} + +.fa-clipboard { + width: 1.000001959502697em; +} + +.fa-lightbulb-o { + width: 0.5714296922087669em; +} + +.fa-exchange { + width: 0.9999989476054907em; +} + +.fa-cloud-download { + width: 1.0714285423358234em; +} + +.fa-cloud-upload { + width: 1.0714285423358234em; +} + +.fa-user-md { + width: 0.785713868836563em; +} + +.fa-stethoscope { + width: 0.7857138092319147em; +} + +.fa-suitcase { + width: 1.000000116725687em; +} + +.fa-bell { + width: 0.999999426305294em; +} + +.fa-coffee { + width: 1.0357122694451846em; +} + +.fa-cutlery { + width: 0.7857128530740738em; +} + +.fa-file-text-o { + width: 0.8571445867419243em; +} + +.fa-building-o { + width: 1.000000116725687em; +} + +.fa-hospital-o { + width: 1.000000116725687em; +} + +.fa-ambulance { + width: 1.1071423441171646em; +} + +.fa-medkit { + width: 1.000000116725687em; +} + +.fa-fighter-jet { + width: 1.0714295953512192em; +} + +.fa-beer { + width: 0.9642851203680038em; +} + +.fa-h-square { + width: 0.8571416462459638em; +} + +.fa-plus-square { + width: 0.8571416462459638em; +} + +.fa-angle-double-left { + width: 0.5892861261963844em; +} + +.fa-angle-double-right { + width: 0.5535723362118006em; +} + +.fa-angle-double-up { + width: 0.642861433327198em; +} + +.fa-angle-double-down { + width: 0.6428574100136757em; +} + +.fa-angle-left { + width: 0.3750009909272194em; +} + +.fa-angle-right { + width: 0.3392861280590296em; +} + +.fa-angle-up { + width: 0.642861433327198em; +} + +.fa-angle-down { + width: 0.6428574100136757em; +} + +.fa-desktop { + width: 1.071435708552599em; +} + +.fa-laptop { + width: 1.071429569274187em; +} + +.fa-tablet { + width: 1.071429569274187em; +} + +.fa-mobile { + width: 1.071429569274187em; +} + +.fa-circle-o { + width: 0.8571425850192682em; +} + +.fa-quote-left { + width: 0.9285713583230972em; +} + +.fa-quote-right { + width: 0.9285713285207748em; +} + +.fa-spinner { + width: 1.0000000596046448em; +} + +.fa-circle { + width: 0.8571425850192682em; +} + +.fa-mail-reply { + width: 1.0000029690563679em; +} + +.fa-folder-o { + width: 0.9285712813336886em; +} + +.fa-folder-open-o { + width: 1.0652896141011752em; +} + +.fa-smile-o { + width: 0.8571425850192682em; +} + +.fa-frown-o { + width: 0.8571425850192682em; +} + +.fa-meh-o { + width: 0.8571425850192682em; +} + +.fa-gamepad { + width: 1.0714295854171496em; +} + +.fa-keyboard-o { + width: 1.0714286640286446em; +} + +.fa-flag-o { + width: 1.0357160121202469em; +} + +.fa-flag-checkered { + width: 1.0357160121202469em; +} + +.fa-terminal { + width: 0.9358262214809656em; +} + +.fa-code { + width: 1.0714276805520058em; +} + +.fa-mail-reply-all { + width: 0.9999999292194843em; +} + +.fa-star-half-empty { + width: 0.9285682821646333em; +} + +.fa-location-arrow { + width: 0.7859947793185711em; +} + +.fa-crop { + width: 0.9285703515633941em; +} + +.fa-code-fork { + width: 0.5714296698570251em; +} + +.fa-chain-broken { + width: 0.9285713344191509em; +} + +.fa-question { + width: 0.6221200153231621em; +} + +.fa-info { + width: 0.857143547385931em; +} + +.fa-exclamation { + width: 0.857143547385931em +} + +.fa-superscript { + width: 0.8588164150714874em; +} + +.fa-subscript { + width: 0.8599326312541962em; +} + +.fa-eraser { + width: 1.071428793715313em; +} + +.fa-puzzle-piece { + width: 0.9285733483266085em; +} + +.fa-microphone { + width: 0.6428574770689011em; +} + +.fa-microphone-slash { + width: 0.7857128698378801em; +} + +.fa-shield { + width: 0.7142831720411777em; +} + +.fa-calendar-o { + width: 0.9285707051554937em; +} + +.fa-fire-extinguisher { + width: 0.7845058117527515em; +} + +.fa-rocket { + width: 0.9441959485411644em; +} + +.fa-maxcdn { + width: 0.9815869629383087em; +} + +.fa-chevron-circle-left { + width: 0.8571425850192682em; +} + +.fa-chevron-circle-right { + width: 0.8571425850192682em; +} + +.fa-chevron-circle-up { + width: 0.8571425850192682em; +} + +.fa-chevron-circle-down { + width: 0.8571425850192682em; +} + +.fa-html5 { + width: 0.7857138514518738em; +} + +.fa-css3 { + width: 1.0000000596046448em; +} + +.fa-anchor { + width: 0.9999980125576258em; +} + +.fa-unlock-alt { + width: 1.000000972300768em; +} + +.fa-bullseye { + width: 0.8571425850192682em; +} + +.fa-ellipsis-h { + width: 0.7857148125767708em; +} + +.fa-ellipsis-v { + width: 0.21428712457418442em; +} + +.fa-rss-square { + width: 0.8571416462459638em; +} + +.fa-play-circle { + width: 0.8571425850192682em; +} + +.fa-ticket { + width: 1.0005576871335506em; +} + +.fa-minus-square { + width: 0.8571416462459638em; +} + +.fa-minus-square-o { + width: 0.7857118571796491em; +} + +.fa-level-up { + width: 0.5734755680896342em; +} + +.fa-level-down { + width: 0.5731032819021493em; +} + +.fa-check-square { + width: 0.8571416462459638em; +} + +.fa-pencil-square { + width: 0.8571416462459638em; +} + +.fa-external-link-square { + width: 0.8571416462459638em; +} + +.fa-share-square { + width: 0.8571416462459638em; +} + +.fa-caret-square-o-down { + width: 0.8571416462459638em; +} + +.fa-caret-square-o-up { + width: 0.8571416462459638em; +} + +.fa-caret-square-o-right { + width: 0.8571416462459638em; +} + +.fa-eur { + width: 0.565288751386106em; +} + +.fa-gbp { + width: 0.5691953515633941em; +} + +.fa-dollar { + width: 0.5691973492503166em; +} + +.fa-inr { + width: 0.5011180695146322em; +} + +.fa-cny { + width: 0.5731013106415048em; +} + +.fa-rouble { + width: 0.7142853057011962em; +} + +.fa-krw { + width: 1.0000009899958968em; +} + +.fa-bitcoin { + width: 0.736978217959404em; +} + +.fa-file { + width: 0.8571426197886467em; +} + +.fa-file-text { + width: 0.8571426197886467em; +} + +.fa-sort-alpha-asc { + width: 0.9428952634334564em; +} + +.fa-sort-alpha-desc { + width: 0.9428952634334564em; +} + +.fa-sort-amount-asc { + width: 1.0159967839717865em; +} + +.fa-sort-amount-desc { + width: 1.0159967839717865em; +} + +.fa-sort-numeric-asc { + width: 0.8452380001544952em; +} + +.fa-sort-numeric-desc { + width: 0.8452380001544952em; +} + +.fa-thumbs-up { + width: 0.8928591571748257em; +} + +.fa-thumbs-down { + width: 0.8928584419190884em; +} + +.fa-youtube-square { + width: 0.8571416462459638em; +} + +.fa-youtube { + width: 0.8571435324847698em; +} + +.fa-xing { + width: 0.786087267100811em; +} + +.fa-xing-square { + width: 0.8571416462459638em; +} + +.fa-youtube-play { + width: 1.0000000305008143em; +} + +.fa-stack-overflow { + width: 0.8571415841579437em; +} + +.fa-instagram { + width: 0.8571416462459638em; +} + +.fa-flickr { + width: 0.8571436131993941em; +} + +.fa-adn { + width: 0.8571425850192682em; +} + +.fa-bitbucket { + width: 0.78617824614048em; +} + +.fa-bitbucket-square { + width: 0.8571416462459638em; +} + +.fa-tumblr { + width: 0.6093739867210388em; +} + +.fa-tumblr-square { + width: 0.8571416462459638em; +} + +.fa-long-arrow-down { + width: 0.42857166891917586em; +} + +.fa-long-arrow-up { + width: 0.4285729229450226em; +} + +.fa-long-arrow-left { + width: 1.0357138589024544em; +} + +.fa-long-arrow-right { + width: 0.9642862295731902em; +} + +.fa-female { + width: 0.7142941057682037em; +} + +.fa-male { + width: 0.5714317113161087em; +} + +.fa-gittip { + width: 0.8571425850192682em; +} + +.fa-sun-o { + width: 1.0000000223517418em; +} + +.fa-moon-o { + width: 0.8213352287809048em; +} + +.fa-archive { + width: 1.0000020563602448em; +} + +.fa-bug { + width: 0.9285741709172726em; +} + +.fa-vk { + width: 1.0777527708560228em; +} + +.fa-weibo { + width: 1.0041852121551074em; +} + +.fa-renren { + width: 0.8571416437625885em; +} + +.fa-pagelines { + width: 0.7823682955154254em; +} + +.fa-stack-exchange { + width: 0.7142871618270874em; +} + +.fa-arrow-circle-o-right { + width: 0.8571425850192682em; +} + +.fa-arrow-circle-o-left { + width: 0.8571425850192682em; +} + +.fa-caret-square-o-left { + width: 0.8571416462459638em; +} + +.fa-dot-circle-o { + width: 0.8571425850192682em; +} + +.fa-wheelchair { + width: 0.9090400412678719em; +} + +.fa-vimeo-square { + width: 0.8571416462459638em; +} + +.fa-try { + width: 0.6428615320473909em; +} + +.fa-plus-square-o { + width: 0.7857118571796491em; +} + +.fa-space-shuttle { + width: 1.214285247027874em; +} + +.fa-slack { + width: 0.9285693690180779em; +} + +.fa-envelope-square { + width: 0.8571436131993941em; +} + +.fa-wordpress { + width: 1.0000000049670539em; +} + +.fa-openid { + width: 0.9999983335533216em; +} + +.fa-bank { + width: 1.0714267492294312em; +} + +.fa-graduation-cap { + width: 1.2857187371701002em; +} + +.fa-yahoo { + width: 0.8571445047855377em; +} + +.fa-google { + width: 0.8398430943489075em; +} + +.fa-reddit { + width: 1.0000000049670539em; +} + +.fa-reddit-square { + width: 0.8571416462459638em; +} + +.fa-stumbleupon-circle { + width: 0.8571425850192682em; +} + +.fa-stumbleupon { + width: 1.0714269926149882em; +} + +.fa-delicious { + width: 0.8571416462459638em; +} + +.fa-digg { + width: 1.1428574323654175em; +} + +.fa-pied-piper { + width: 0.8571416462459638em; +} + +.fa-pied-piper-alt { + width: 1.1372744292020798em; +} + +.fa-drupal { + width: 0.8571418623128011em; +} + +.fa-joomla { + width: 0.8571426148215924em; +} + +.fa-language { + width: 0.8571416030172259em; +} + +.fa-fax { + width: 1.0000000037252903em; +} + +.fa-building { + width: 0.7857138179242611em; +} + +.fa-child { + width: 0.7142872214317322em; +} + +.fa-paw { + width: 0.9285706828037519em; +} + +.fa-spoon { + width: 1.0000000298023224em; +} + +.fa-cube { + width: 0.9285703506320715em; +} + +.fa-cubes { + width: 1.2142920158803463em; +} + +.fa-behance { + width: 1.1428583860397339em; +} + +.fa-behance-square { + width: 0.8571436131993941em; +} + +.fa-steam { + width: 0.9999989867210388em; +} + +.fa-steam-square { + width: 0.8571436131992414em; +} + +.fa-recycle { + width: 1.0012093782424927em; +} + +.fa-automobile { + width: 1.1428605308756232em; +} + +.fa-cab { + width: 1.1428585043177009em; +} + +.fa-tree { + width: 0.8571485541760921em; +} + +.fa-spotify { + width: 0.8571425850192682em; +} + +.fa-deviantart { + width: 0.5714287161827087em; +} + +.fa-soundcloud { + width: 1.2857149858027697em; +} + +.fa-database { + width: 0.8571426197886467em; +} + +.fa-file-pdf-o { + width: 0.8571445867419243em; +} + +.fa-file-word-o { + width: 0.8571445867419243em; +} + +.fa-file-excel-o { + width: 0.8571445867419243em; +} + +.fa-file-powerpoint-o { + width: 0.8571445867419243em; +} + +.fa-file-image-o { + width: 0.8571445867419243em; +} + +.fa-file-archive-o { + width: 0.8571445867419243em; +} + +.fa-file-audio-o { + width: 0.8571445867419243em; +} + +.fa-file-movie-o { + width: 0.8571445867419243em; +} + +.fa-file-code-o { + width: 0.8571445867419243em; +} + +.fa-vine { + width: 0.857145681977272em; +} + +.fa-codepen { + width: 1.0000000298023224em; +} + +.fa-jsfiddle { + width: 1.1428555250167847em; +} + +.fa-life-bouy { + width: 1.0000000049670539em; +} + +.fa-circle-o-notch { + width: 0.9999980702996254em; +} + +.fa-ra { + width: 0.999438002705574em; +} + +.fa-empire { + width: 1.0000000049670539em; +} + +.fa-git-square { + width: 0.8571416462459638em; +} + +.fa-git { + width: 1.0000000447034836em; +} + +.fa-hacker-news { + width: 0.8571416462459638em; +} + +.fa-tencent-weibo { + width: 0.7142878770828247em; +} + +.fa-qq { + width: 1.0000018551945686em; +} + +.fa-wechat { + width: 1.142860472202301em; +} + +.fa-paper-plane { + width: 1.0009309110464528em; +} + +.fa-paper-plane-o { + width: 1.0005583113525063em; +} + +.fa-history { + width: 0.8571445606648922em; +} + +.fa-circle-thin { + width: 0.8571425850192682em; +} + +.fa-header { + width: 1.0000018998980522em; +} + +.fa-paragraph { + width: 0.7265684753656387em; +} + +.fa-sliders { + width: 0.8571425676345825em; +} + +.fa-share-alt { + width: 0.8571425974369049em; +} + +.fa-share-alt-square { + width: 0.8571416462459638em; +} + +.fa-bomb { + width: 1.0000009909272194em; +} + +.fa-futbol-o { + width: 1.0000000049670539em; +} + +.fa-tty { + width: 1.0000020181760192em; +} + +.fa-binoculars { + width: 1.0000019930303097em; +} + +.fa-plug { + width: 0.9999989569187164em; +} + +.fa-slideshare { + width: 1.000006040558219em; +} + +.fa-twitch { + width: 0.9999990165233612em; +} + +.fa-yelp { + width: 0.8580739721655846em; +} + +.fa-newspaper-o { + width: 1.1428594440221786em; +} + +.fa-wifi { + width: 1.142857201397419em; +} + +.fa-calculator { + width: 0.9285713012019414em; +} + +.fa-google-wallet { + width: 0.9977688640356064em; +} + +.fa-cc-visa { + width: 1.2857130939760282em; +} + +.fa-cc-mastercard { + width: 1.2857130939760282em; +} + +.fa-cc-discover { + width: 1.2857129871845245em; +} + +.fa-cc-amex { + width: 1.285718947649002em; +} + +.fa-cc-paypal { + width: 1.2857130939760282em; +} + +.fa-cc-stripe { + width: 1.2857130939760282em; +} + +.fa-bell-slash { + width: 1.1428565569221973em; +} + +.fa-bell-slash-o { + width: 1.1428565569221973em; +} + +.fa-trash { + width: 0.7857138803228736em; +} + +.fa-copyright { + width: 0.8571425850192682em; +} + +.fa-at { + width: 0.8571425999204312em; +} + +.fa-eyedropper { + width: 1.0000010132789612em; +} + +.fa-paint-brush { + width: 0.9988838285207748em; +} + +.fa-birthday-cake { + width: 0.9999999776482582em; +} + +.fa-area-chart { + width: 1.1428574323654175em; +} + +.fa-pie-chart { + width: 0.964285093049206em; +} + +.fa-line-chart { + width: 1.1428574323654175em; +} + +.fa-lastfm { + width: 1.0000022376577817em; +} + +.fa-lastfm-square { + width: 0.8571416462459638em; +} + +.fa-toggle-off { + width: 1.142858593414303em; +} + +.fa-toggle-on { + width: 1.14285634085536em; +} + +.fa-bicycle { + width: 1.28571296234918em; +} + +.fa-bus { + width: 0.8571415692567825em; +} + +.fa-ioxhost { + width: 1.1428571175783873em; +} + +.fa-angellist { + width: 0.7142852619290352em; +} + +.fa-cc { + width: 1.1428574323654175em; +} + +.fa-ils { + width: 0.7678564703091979em; +} + +.fa-meanpath { + width: 0.8571436131994687em; +} + +.fa-buysellads { + width: 0.8571436107158661em; +} + +.fa-connectdevelop { + width: 1.1428584707900882em; +} + +.fa-dashcube { + width: 0.785714864730835em; +} + +.fa-forumbee { + width: 0.8571425694972277em; +} + +.fa-leanpub { + width: 1.142857511062175em; +} + +.fa-sellsy { + width: 1.1428565382957458em; +} + +.fa-shirtsinbulk { + width: 0.8571415543556213em; +} + +.fa-simplybuilt { + width: 1.142860271036625em; +} + +.fa-skyatlas { + width: 1.14285752673959em; +} + +.fa-cart-plus { + width: 0.928574200719595em; +} + +.fa-cart-arrow-down { + width: 0.928574200719595em; +} + +.fa-diamond { + width: 1.142861483618617em; +} + +.fa-ship { + width: 1.142856314778328em; +} + +.fa-user-secret { + width: 0.785717862347763em; +} + +.fa-motorcycle { + width: 1.2885052015384417em; +} + +.fa-street-view { + width: 0.7857207879424095em; +} + +.fa-heartbeat { + width: 1.0000009760260582em; +} + +.fa-venus { + width: 0.6395084308460355em; +} + +.fa-mars { + width: 0.8571416437625885em; +} + +.fa-mercury { + width: 0.6428571790456772em; +} + +.fa-intersex { + width: 0.7823648327030241em; +} + +.fa-transgender-alt { + width: 0.9285693382844329em; +} + +.fa-venus-double { + width: 0.9999989913776517em; +} + +.fa-mars-double { + width: 1.0690097333863378em; +} + +.fa-venus-mars { + width: 1.1376486765220761em; +} + +.fa-mars-stroke { + width: 0.8571426570415497em; +} + +.fa-mars-stroke-v { + width: 0.6395094422623515em; +} + +.fa-mars-stroke-h { + width: 1.066592177376151em; +} + +.fa-neuter { + width: 0.6428564637899399em; +} + +.fa-genderless { + width: 0.6428574621677399em; +} + +.fa-facebook-official { + width: 0.8571436237543821em; +} + +.fa-pinterest-p { + width: 0.7142868041992188em; +} + +.fa-whatsapp { + width: 0.857144296169281em; +} + +.fa-user-plus { + width: 1.1428584034244977em; +} + +.fa-user-times { + width: 1.1378349239627532em; +} + +.fa-bed { + width: 1.1428574621677399em; +} + +.fa-viacoin { + width: 0.8571425676345825em; +} + +.fa-train { + width: 0.857141618927244em; +} + +.fa-subway { + width: 0.857141618927244em; +} + +.fa-medium { + width: 1.0000000428408384em; +} + +.fa-y-combinator { + width: 0.8571425676345825em; +} + +.fa-optin-monster { + width: 1.2812500447034836em; +} + +.fa-opencart { + width: 1.2865476533770561em; +} + +.fa-expeditedssl { + width: 1.0000000049670539em; +} +.fa-battery-full { + width: 1.2857148237526417em; +} +.fa-battery-4 { + width: 1.2857148237526417em; +} + +.fa-battery-3 { + width: 1.285716611891985em; +} + +.fa-battery-2 { + width: 1.285716611891985em; +} + +.fa-battery-1 { + width: 1.285716611891985em; +} + +.fa-battery-0 { + width: 1.285716611891985em; +} + +.fa-mouse-pointer { + width: 0.6463916040956974em; +} + +.fa-i-cursor { + width: 0.5em; +} + +.fa-object-group { + width: 1.142856389284134em; +} + +.fa-object-ungroup { + width: 1.2857120633125305em; +} + +.fa-sticky-note { + width: 0.8571426197886467em; +} + +.fa-sticky-note-o { + width: 0.8571405932307243em; +} + +.fa-cc-jcb { + width: 1.2857130939760282em; +} + +.fa-cc-diners-club { + width: 1.2857130939760282em; +} + +.fa-clone { + width: 0.9999999590218067em; +} + +.fa-balance-scale { + width: 1.2942902165651321em; +} + +.fa-hourglass-o { + width: 0.8571416353806853em; +} + +.fa-hourglass-1 { + width: 0.8571416353806853em; +} + +.fa-hourglass-2 { + width: 0.8571416353806853em; +} + +.fa-hourglass-3 { + width: 0.8571416353806853em; +} + +.fa-hourglass { + width: 0.8571436023339629em; +} + +.fa-hand-grab-o { + width: 0.8571436107158661em; +} + +.fa-hand-paper-o { + width: 0.9107128493487835em; +} + +.fa-hand-scissors-o { + width: 0.9999980007607974em; +} + +.fa-hand-lizard-o { + width: 1.1428582593798637em; +} + +.fa-hand-spock-o { + width: 1.0714277178049088em; +} + +.fa-hand-pointer-o { + width: 0.9285682551562786em; +} + +.fa-trademark { + width: 1.1008171644061804em; +} + +.fa-registered { + width: 1.0000000049670539em; +} + +.fa-creative-commons { + width: 1.0000000049670539em; +} + +.fa-gg { + width: 1.142856478691101em; +} + +.fa-gg-circle { + width: 1.0000000049670539em; +} + +.fa-tripadvisor { + width: 1.2857139185070992em; +} + +.fa-odnoklassniki { + width: 0.7142824977636337em; +} + +.fa-odnoklassniki-square { + width: 0.8571416462459638em; +} + +.fa-get-pocket { + width: 0.959822304546833em; +} + +.fa-wikipedia-w { + width: 1.2857110323384404em; +} + +.fa-safari { + width: 1.0000000049670539em; +} + +.fa-chrome { + width: 1.0002786591649055em; +} + +.fa-firefox { + width: 0.9985101446509361em; +} + +.fa-opera { + width: 1.0000011399388313em; +} + +.fa-internet-explorer { + width: 0.9999980032444em; +} + +.fa-television { + width: 1.1714316554367542em; +} + +.fa-contao { + width: 1.000000111758709em; +} + +.fa-500px { + width: 0.7951981648802757em; +} + +.fa-amazon { + width: 1.0010244324803352em; +} + +.fa-calendar-plus-o { + width: 0.9285713012019414em; +} + +.fa-calendar-minus-o { + width: 0.9285707051554937em; +} + +.fa-calendar-times-o { + width: 0.9285707051554937em; +} + +.fa-calendar-check-o { + width: 0.9285707051554937em; +} + +.fa-industry { + width: 0.9999989531934261em; +} + +.fa-map-pin { + width: 0.5714278568824156em; +} + +.fa-map-signs { + width: 1.0000010207295418em; +} + +.fa-map-o { + width: 1.1428583338856697em; +} + +.fa-map { + width: 0.9999999906867743em; +} + +.fa-commenting { + width: 1.0000040555996748em; +} + +.fa-commenting-o { + width: 0.9999974196152834em; +} + +.fa-houzz { + width: 0.5714277625083923em; +} + +.fa-vimeo { + width: 1.0050220787525177em; +} + +.fa-black-tie { + width: 0.8571425676345825em; +} + +.fa-fonticons { + width: 0.8571425676345825em; +} + +.fa-reddit-alien { + width: 1.0000009834766388em; +} + +.fa-edge { + width: 0.9999999701976776em; +} + +.fa-credit-card-alt { + width: 1.2857139110565186em; +} + +.fa-codiepie { + width: 0.9542412211497626em; +} + +.fa-modx { + width: 0.9999999403953552em; +} + +.fa-fort-awesome { + width: 0.9285743236541748em; +} + +.fa-usb { + width: 1.2857153688868266em; +} + +.fa-product-hunt { + width: 1.0000000049670539em; +} + +.fa-mixcloud { + width: 1.2857142388820648em; +} + +.fa-scribd { + width: 0.8569198697805405em; +} + +.fa-pause-circle { + width: 0.8571425850192682em; +} + +.fa-pause-circle-o { + width: 0.8571425850192682em; +} + +.fa-stop-circle { + width: 0.8571425850192682em; +} + +.fa-stop-circle-o { + width: 0.8571425850192682em; +} + +.fa-shopping-bag { + width: 0.9999990325886756em; +} + +.fa-shopping-basket { + width: 1.1428582395116678em; +} + +.fa-hashtag { + width: 1.000002235174179em; +} + +.fa-bluetooth { + width: 0.8571405559778214em; +} + +.fa-bluetooth-b { + width: 0.5714296698570251em; +} + +.fa-percent { + width: 0.857141618927244em; +} +.fa-university { + width: 1.1428583338856697em; +} \ No newline at end of file diff --git a/static/css/webslides.css b/static/css/webslides.css new file mode 100644 index 0000000..bb87416 --- /dev/null +++ b/static/css/webslides.css @@ -0,0 +1,3791 @@ +/*! + * Name: WebSlides + * Version: 1.5.0 + * Date: 2017-09-16 + * Description: Making HTML presentations easy + * URL: https://github.com/webslides/webslides#readme + * Credits: @jlantunez, @LuisSacristan, @Belelros + */ +@charset "UTF-8"; +/*----------------------------------------------------------------------------------- + 0. CSS Reset & Normalize + 1. Base + 1.1 Wrap/Container + 1.2 Animations + 1.3 Responsive Media (videos, iframe, screenshots...) + 1.4 Basic Grid (2,3,4 columns) + 2. Typography & Lists + 2.1 Headings with background + 2.2 Classes: .text- + 2.3 San Francisco Font (Apple) + 3. Header & Footer + 3.1 Logo + 4. Navigation + 4.1 Navbars + 5. SLIDES (vertically and horizontally centered) + 5.1 Mini container & Alignment + 5.2 Counter / Navigation Slides + 5.3 Background Images/Video + 6. Magic blocks = .flexblock (Flexible blocks with auto-fill and equal height). + 6.1 .flexblock.features + 6.2 .flexblock.clients + 6.3 .flexblock.steps + 6.4 .flexblock.metrics + 6.5 .flexblock.specs + 6.6 .flexblock.reasons + 6.7 .flexblock.gallery + 6.8 .flexblock.plans + 6.9. flexblock.activity + 7. Promos/Offers (pricing, tagline, CTA...) + 8. Work / Resume / CV + 9. Table of contents + 10. Cards + 11. Quotes + 12. Avatars + 13. Tables + 14. Forms + 15. Longform Elements + 16. Safari Bug (flex-wrap) + 17. Slidex index (aka zoom) + 18. Print + 19. Colors +----------------------------------------------------------------------------------- */ +/* +========================================= +0. CSS Reset & Normalize +========================================= +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + border: 0; + font: inherit; + font-size: 100%; + margin: 0; + padding: 0; + vertical-align: baseline; } + +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; } + +body { + line-height: 1; } + +blockquote, +q { + quotes: '' ''; } + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; } + +table { + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 24px; + width: 100%; } + +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +*, +*::before, +*::after { + -webkit-box-sizing: inherit; + box-sizing: inherit; } + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; } + +embed, +iframe, +object { + max-width: 100%; } + +audio:not([controls]) { + display: none; + height: 0; } + +[hidden], +template { + display: none; } + +ul { + list-style: square; + text-indent: inherit; } + +ol { + list-style: decimal; } + +b, +strong { + font-weight: 600; } + +a { + background-color: transparent; } + +a:active, +a:hover { + outline: 0; } + +sup, +sub { + font-size: .75em; + height: 0; + line-height: 2.2em; + position: relative; + vertical-align: baseline; } + +sup { + bottom: 1ex; } + +sub { + top: .5ex; } + +small { + font-size: .75em; + line-height: 1.72; } + +big { + font-size: 1.25em; } + +hr { + border: 0; + clear: both; + display: block; + height: 1px; + margin: 3.2rem auto; + text-align: center; + width: 100%; } + +h2 + hr, +h3 + hr { + margin-bottom: 4.8rem; } + +p + hr { + margin-bottom: 4rem; } + +dfn, +cite, +em, +i { + font-style: italic; } + +abbr, +acronym { + cursor: help; } + +mark, +ins { + padding: 0 4px; + text-decoration: none; + text-shadow: none; } + +::-moz-selection { + text-shadow: none; } + +::selection { + text-shadow: none; } + +img { + border: 0; + height: auto; + max-width: 100%; } + +img:hover { + opacity: .9; } + +svg:not(:root) { + overflow: hidden; } + +figure { + line-height: 0; + margin: 0; + position: relative; } + +optgroup { + font-weight: bold; } + +td, +th { + padding: 0; } + +dt { + font-weight: bold; } + +dd { + margin: 0; } + +/*=== Clearing === */ +header:before, header:after, +main:before, +main:after, +section:before, +section:after, +aside:before, +aside:after, +footer:before, +footer:after, +.clear:before, +.clear:after, +.wrap:before, +.wrap:after { + content: ''; + display: table; } + +header:after, +main:after, +section:after, +aside:after, +footer:after, +.clear:after, +.wrap:after { + clear: both; } + +/*========================================= +1. Base --> Baseline: 8px = .8rem +=========================================== */ +/* -- Disable elastic scrolling/bounce: +webslides.js will add .ws-ready automatically. Don't worry :) -- */ +.ws-ready, +.ws-ready body { + height: 100%; + overflow: hidden; + width: 100%; } + +.ws-ready.ws-ready-zoom { + overflow: visible; } + .ws-ready.ws-ready-zoom body { + overflow: auto; } + +#webslides { + -ms-overflow-style: none; + -webkit-overflow-scrolling: touch; + height: 100vh; + overflow-x: hidden; + overflow-y: scroll; } + #webslides::-webkit-scrollbar { + display: none; } + +li li { + margin-left: 1.6rem; } + +a, +a:active, +a:focus, +a:visited, +input:focus, +textarea:focus, +button { + text-decoration: none; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + +p a:active { + position: relative; + top: 2px; } + +nav a[rel='external'] em, +.hidden { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; } + +.shadow { + position: relative; } + .shadow:before, .shadow:after { + bottom: 1.6rem; + content: ''; + max-width: 300px; + position: absolute; + top: 80%; + width: 50%; + z-index: -1; } + .shadow:after { + right: 2.4rem; + -webkit-transform: rotate(3deg); + transform: rotate(3deg); } + .shadow:before { + left: 2.4rem; + -webkit-transform: rotate(-3deg); + transform: rotate(-3deg); } + +/*=== 1.1 WRAP/CONTAINER === */ +.wrap, +header nav, +footer nav { + margin-left: auto; + margin-right: auto; + max-width: 100%; + position: relative; + width: 100%; + z-index: 2; } + @media (min-width: 1024px) { + .wrap, + header nav, + footer nav { + width: 90%; } } + +.frame, +.shadow { + padding: 2.4rem; } + +.radius { + border-radius: .4rem; } + +.alignright { + float: right; } + +.alignleft { + float: left; } + +.aligncenter { + margin-left: auto; + margin-right: auto; + text-align: center; } + +img.aligncenter, +figure.aligncenter { + display: block; + margin-bottom: .8rem; + margin-top: .8rem; } + +img.alignleft, +figure.alignleft, +img.alignright, +figure.alignright, +img.aligncenter, +figure.aligncenter { + margin-bottom: 3.2rem; + margin-top: 3.2rem; } + +img.alignright, +svg.alignright, +figure.alignright { + margin: .8rem 0 .8rem 2.4rem; } + +img.alignleft, +svg.alignleft, +figure.alignleft { + margin: .8rem 2.4rem .8rem 0; } + +/*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */ +@media (min-width: 1024px) { + .size-80 { + width: 80%; } + .size-70 { + width: 70%; } + .size-60 { + width: 60%; } + .size-50 { + width: 50%; } + .size-40 { + width: 40%; } + .size-30 { + width: 30%; } + .size-20 { + width: 20%; } } + +pre, +code { + font-family: 'Cousine', monospace; } + +pre { + font-size: 1.6rem; + line-height: 2.4rem; + overflow: auto; + padding: 2.4rem; + text-align: left; + white-space: pre-wrap; + width: 100%; + word-wrap: break-word; } + pre + p { + margin-top: 3.2rem; } + pre code { + padding: 0; } + +code { + padding: .4rem; } + +/* === 1.2 Animations ================ +Just 5 basic animations: +.fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight +https://github.com/daneden/animate.css */ +/*-- fadeIn -- */ +@-webkit-keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } +@keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } + +.fadeIn { + -webkit-animation: fadeIn 1s; + animation: fadeIn 1s; } + +/*-- fadeInUp -- */ +@-webkit-keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInUp { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } + +.fadeInUp { + -webkit-animation: fadeInUp 1s; + animation: fadeInUp 1s; } + +/*-- zoomIn -- */ +@-webkit-keyframes zoomIn { + from { + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } +@keyframes zoomIn { + from { + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +.zoomIn { + -webkit-animation: zoomIn 1s; + animation: zoomIn 1s; } + +/*-- slideInLeft -- */ +@-webkit-keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } + +.slideInLeft { + -webkit-animation: slideInLeft 1s; + animation: slideInLeft 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + +/*-- slideInRight -- */ +@-webkit-keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } + +.slideInRight { + -webkit-animation: slideInRight 1s; + animation: slideInRight 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + +/* Animated Background (Matrix) */ +@-webkit-keyframes anim { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 100% { + -webkit-transform: translateY(-1200px); + transform: translateY(-1200px); } } +@keyframes anim { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); } + 100% { + -webkit-transform: translateY(-1200px); + transform: translateY(-1200px); } } + +/* Duration */ +.slow { + -webkit-animation-duration: 4s; + animation-duration: 4s; } + .slow + .slow { + -webkit-animation-duration: 5s; + animation-duration: 5s; } + +/*=== 1.3 Responsive Media (videos, iframe...) === */ +.embed { + height: 0; + overflow: hidden; + /*aspect ratio:16:9*/ + padding-bottom: 56.6%; + /*aspect ratio: 4:3*/ + /*padding-bottom: 75%;*/ + position: relative; + /* -- Responsive background video + https://fvsch.com/code/video-background/ -- */ } + .embed iframe, + .embed object, + .embed embed, + .embed video { + height: 100%; + left: 0; + margin: 0; + position: absolute; + top: 0; + width: 100%; } + .fullscreen > .embed { + bottom: 0; + height: auto; + left: 0; + padding-bottom: 0; + position: fixed; + right: 0; + top: 0; + /* 1. No object-fit support: */ } + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + /* 2. If supporting object-fit, overriding (1): */ } + @media (min-aspect-ratio: 16 / 9) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + height: 300%; + top: -100%; } } + @media (max-aspect-ratio: 16 / 9) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + left: -100%; + width: 300%; } } + @supports ((-o-object-fit: cover) or (object-fit: cover)) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + height: 100%; + left: 0; + -o-object-fit: cover; + object-fit: cover; + top: 0; + width: 100%; } } + +/*=== HTML Browser (Screenshots) ================ */ +/*
img
*/ +.browser { + border-radius: .3rem; + margin: 0 auto 3.2rem; + max-width: 1024px; + overflow: hidden; } + li .browser { + margin-bottom: 0; } + h1 + .browser, + h2 + .browser, + p + .browser { + margin-top: 4.8rem; } + .browser figcaption { + padding: 2.4rem; } + .browser:before { + content: '\25CF \25CF \25CF'; + font-size: .8rem; + left: 0; + line-height: 0; + padding: 1.6rem; + position: absolute; + text-align: left; + top: 0; + width: 100%; } + @media (min-width: 768px) { + .browser:before { + font-size: 1.6rem; } } + +/*=== 1.4. Basic Grid (Flexible blocks) +Auto-fill & Equal height === */ +.grid { + clear: both; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: auto; + margin-right: auto; } + .grid:after { + clear: both; } + .grid:before { + content: ''; + display: table; } + .grid > .column { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 2.4rem; + position: relative; + -webkit-transition: .3s; + transition: .3s; + width: 100%; } + .grid.vertical-align .column { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + @media (min-width: 768px) { + .grid > .column { + width: 25%; } + .grid.sm .column:nth-child(1) { + width: 30%; } + .grid.sm .column:nth-child(2) { + width: 70%; } + .grid.ms .column:nth-child(1) { + width: 70%; } + .grid.ms .column:nth-child(2) { + width: 30%; } + .grid.sms .column:nth-child(2) { + width: 50%; } } + +/*============================ +2. TYPOGRAPHY & LISTS +============================== */ +html, +body { + font-weight: 300; + line-height: 1; + text-rendering: optimizeLegibility; } + +html, +body, +input, +select, +textarea { + font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif; + font-size: 62.5%; } + +body, +textarea { + font-size: 1.8rem; } + +p, +li, +dt, +dd, +time, +table, +big, +textarea, +label { + line-height: 3.2rem; + margin-bottom: 3.2rem; } + +li, +p:last-child { + margin-bottom: 0; } + +ul > li, +ol > li { + margin-left: 3.2rem; } + +li li { + font-size: 100%; } + +/*== List .description (Product/Specs) === */ +ul.description { + padding: 0; } + ul.description + p { + margin-top: 3.2rem; } + ul.description li { + padding-bottom: .8rem; + padding-top: .8rem; + position: relative; + -webkit-transition: .3s; + transition: .3s; } + ul.description li:hover { + padding-left: .4rem; } + +ul.description li, +.column ul li { + list-style: none; + margin-left: 0; } + +.column ol > li { + margin-left: 1.6rem; } + +h1 svg, +h2 svg, +h3 svg, +h4 svg { + margin-top: -.8rem; } + +.text-intro svg, +.text-quote p svg, +.wall p svg, +.try svg { + margin-top: -.4rem; } + +h1 { + font-size: 4rem; + line-height: 5.6rem; } + @media (min-width: 768px) { + h1 { + font-size: 5.6rem; + line-height: 7.2rem; } } + +h1 span { + font-style: italic; } + +h2 { + font-size: 3.2rem; + line-height: 4.8rem; } + @media (min-width: 768px) { + h2 { + font-size: 4.8rem; + line-height: 6.4rem; } } + +h3 { + font-size: 2.4rem; + line-height: 4rem; } + @media (min-width: 768px) { + h3 { + font-size: 4rem; + line-height: 5.6rem; } } + +h4 { + font-size: 2.2rem; + line-height: 4rem; } + @media (min-width: 768px) { + h4 { + font-size: 3.2rem; + line-height: 4.8rem; } } + +h5 { + font-size: 2rem; + font-weight: 600; + line-height: 3.2rem; } + +h6 { + font-size: 1.8rem; + font-weight: 600; + line-height: 3.2rem; } + +h2.alignleft + p.alignright { + margin-bottom: 0; + margin-top: 1.2rem; } + +h3.alignleft + p.alignright { + margin-bottom: 0; + margin-top: .4rem; } + +h1 + h1 { + margin-top: .8rem; } + +h1 + h2 { + margin-top: .8rem; } + +h1 + h3 { + margin-top: .8rem; } + +h1 + h4 { + margin-top: .8rem; } + +h1 + h5 { + margin-top: .8rem; } + +h1 + h6 { + margin-top: .8rem; } + +h2 + h1 { + margin-top: .8rem; } + +h2 + h2 { + margin-top: .8rem; } + +h2 + h3 { + margin-top: .8rem; } + +h2 + h4 { + margin-top: .8rem; } + +h2 + h5 { + margin-top: .8rem; } + +h2 + h6 { + margin-top: .8rem; } + +h3 + h1 { + margin-top: .8rem; } + +h3 + h2 { + margin-top: .8rem; } + +h3 + h3 { + margin-top: .8rem; } + +h3 + h4 { + margin-top: .8rem; } + +h3 + h5 { + margin-top: .8rem; } + +h3 + h6 { + margin-top: .8rem; } + +h4 + h1 { + margin-top: .8rem; } + +h4 + h2 { + margin-top: .8rem; } + +h4 + h3 { + margin-top: .8rem; } + +h4 + h4 { + margin-top: .8rem; } + +h4 + h5 { + margin-top: .8rem; } + +h4 + h6 { + margin-top: .8rem; } + +h5 + h1 { + margin-top: .8rem; } + +h5 + h2 { + margin-top: .8rem; } + +h5 + h3 { + margin-top: .8rem; } + +h5 + h4 { + margin-top: .8rem; } + +h5 + h5 { + margin-top: .8rem; } + +h5 + h6 { + margin-top: .8rem; } + +h6 + h1 { + margin-top: .8rem; } + +h6 + h2 { + margin-top: .8rem; } + +h6 + h3 { + margin-top: .8rem; } + +h6 + h4 { + margin-top: .8rem; } + +h6 + h5 { + margin-top: .8rem; } + +h6 + h6 { + margin-top: .8rem; } + +h1 + img, +h2 + img, +h3 + img { + margin-bottom: 4.8rem; + margin-top: 4.8rem; } + +[class*='content-'] > [class*='content-'] h2, +[class*='content-'] > [class*='content-'] h3, +[class*='content-'] > [class*='content-'] h4 { + font-size: 2.4rem; + line-height: 4rem; } + +/*== 2.1. Headings with background ==*/ +h1[class*='bg-'] { + padding: 2.4rem; } + +h2[class*='bg-'] { + padding: 2.4rem; } + +h3[class*='bg-'] { + padding: 2.4rem; } + +h4[class*='bg-'] { + padding: 2.4rem; } + +h5[class*='bg-'] { + padding: 2.4rem; } + +h6[class*='bg-'] { + padding: 2.4rem; } + +ul[class*='bg-'], +ol[class*='bg-'], +li[class*='bg-'], +p[class*='bg-'] { + padding: 2.4rem; } + +h1 [class*='bg-'], +h2 [class*='bg-'], +h3 [class*='bg-'] { + padding: .4rem .8rem; } + +/*== 2.2. Typography Classes = .text- == */ +.text-intro, +[class*='content-'] p { + font-size: 2.4rem; + line-height: 4rem; } + +/* -- Serif -- */ +.text-serif, +h1 span { + font-family: 'Maitree', times, serif; } + +/* -- h1,h2... Promo/Landings -- */ +.text-landing { + letter-spacing: .4rem; + text-transform: uppercase; } + @media (min-width: 768px) { + .text-landing { + letter-spacing: 1.6rem; } } + +/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */ +.text-subtitle { + letter-spacing: .2rem; + margin-bottom: 0; + text-transform: uppercase; } + .text-subtitle p.text-subtitle { + font-size: 1.6rem; } + .text-subtitle p.text-subtitle svg { + vertical-align: text-top; } + .text-subtitle + p { + margin-top: 3.2rem; } + +.text-uppercase { + text-transform: uppercase; } + +.text-lowercase { + text-transform: lowercase; } + +/* -- Emoji (you'll love this) -- */ +.text-emoji { + font-size: 6.8rem; + line-height: 8.8rem; } + @media (min-width: 768px) { + .text-emoji { + font-size: 12.8rem; + line-height: 16rem; } } + +/* -- Numbers (results, sales... 23,478,289 iphones) -- */ +.text-data { + font-size: 6.4rem; + line-height: 8rem; + margin-bottom: .8rem; } + @media (min-width: 768px) { + .text-data { + font-size: 15.2rem; + line-height: 16.8rem; } } + +.text-label { + display: inline-block; + font-weight: 600; + text-transform: uppercase; + width: 12.8rem; } + +/* -- Magazine Two Columns -- */ +@media (min-width: 768px) { + .text-cols { + -webkit-column-count: 2; + column-count: 2; + -webkit-column-gap: 4.8rem; + column-gap: 4.8rem; + text-align: left; } + .text-landing + .text-cols { + margin-top: 3.2rem; } } + +.text-cols p:first-child:first-letter { + float: left; + font-size: 11rem; + font-weight: 600; + line-height: 1; + margin: -.4rem 1.6rem 0 0; + padding: 0; + text-transform: uppercase; } + +/* -- Heading with border -- */ +.text-context { + position: relative; } + .text-context:before { + content: ''; + display: block; + height: .2rem; + margin-bottom: .6rem; + width: 12rem; } + .column .text-context:before { + width: 100%; } + .text-context.text-uppercase { + letter-spacing: .1rem; } + +/* -- Separator/Symbols (stars ***...) -- */ +.text-symbols { + font-weight: 600; + letter-spacing: .8rem; + text-align: center; } + +.text-separator { + margin-top: 2.4rem; } + .text-separator:before { + content: ''; + height: .4rem; + left: 0; + margin-top: -1.6rem; + position: absolute; + width: 16%; } + @media (min-width: 568px) { + .text-separator { + margin-left: 20%; + margin-top: 0; + width: 80%; } + .text-separator:before { + margin-top: 1.2rem; } } + +/* -- Pull Quote (Right/Left) -- */ +[class*='text-pull'] { + font-size: 2.4rem; + font-weight: 400; + line-height: 4rem; + margin-bottom: 3.2rem; + margin-left: 2.4rem; + margin-right: 2.4rem; + position: relative; } + +[class*='text-pull-'] { + margin-top: .8rem; + padding-top: 1.4rem; } + @media (min-width: 1024px) { + [class*='text-pull-'] { + margin-left: -4.8rem; + margin-right: -4.8rem; } } + +@media (min-width: 568px) { + [class*='text-pull-'] { + max-width: 40%; } + .text-pull-right { + float: right; + margin-left: 2.4rem; + margin-right: -2.4rem; } + .text-pull-left { + float: left; + margin-left: -2.4rem; + margin-right: 2.4rem; } } + +img[class*='text-pull-'], +figure[class*='text-pull-'] { + margin-top: .8rem; + padding-top: 0; } + +/* -- Interviews (Questions & Answers) --- */ +/* --
+
name
+

question or answer

+
+--- */ +.text-interview dt { + font-weight: 600; + margin-bottom: 0; + text-transform: uppercase; } + +@media (min-width: 1024px) { + .text-interview dt { + margin-left: -34%; + position: absolute; + text-align: right; + white-space: nowrap; + width: 30%; } } + +/* -- Info Messages (error, warning, success... -- */ +.text-info { + font-size: 1.6rem; + line-height: 2.4rem; } + +/*========================================= +2.1. San Francisco Font (Apple's new font) +=========================================== */ +.text-apple, +.bg-apple { + font-family: 'San Francisco', helvetica, arial, sans-serif; } + +/* Ultra Light */ +@font-face { + font-family: 'San Francisco'; + font-weight: 100; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); } + +/* Thin */ +@font-face { + font-family: 'San Francisco'; + font-weight: 200; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2"); } + +/* Regular */ +@font-face { + font-family: 'San Francisco'; + font-weight: 400; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); } + +/* Bold */ +@font-face { + font-family: 'San Francisco'; + font-weight: bold; + src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); } + +/*========================================= +3. Header & Footer +=========================================== */ +/* -- If you want an unique, global header/footer,read this: +https://github.com/webslides/webslides/issues/57 -- */ +header, +footer, +#navigation { + padding: 2.4rem; + -webkit-transition: all .4s ease-in-out; + transition: all .4s ease-in-out; + width: 100%; } + +header p, +footer p { + line-height: 4.8rem; + margin-bottom: 0; } + +header[role='banner'] img, +footer img { + height: 4rem; + vertical-align: middle; } + +footer { + position: relative; } + +header, +footer { + z-index: 3; } + +header, +.ws-ready footer { + left: 0; + position: absolute; + top: 0; } + +.ws-ready footer { + bottom: 0; + top: auto; } + +header[role='banner'] { + opacity: 0; } + header[role='banner']:hover { + opacity: 1; } + +@media (max-width: 767px) { + footer .alignleft, + footer .alignright { + display: block; + float: none; } } + +/*=== 3.1. Logo === */ +.logo { + text-transform: lowercase; } + .logo a { + background: url("../images/logos/logo.svg") no-repeat 0 0; + background-size: 4.8rem; + float: left; + height: 4.8rem; + text-indent: -4000px; + /*If you remove text-indent and add: */ + /*padding-left: 6rem;*/ + vertical-align: middle; + width: 4.8rem; } + +/*========================================= +4. Navigation +=========================================== */ +/*=== 4.1. Navbars === */ +nav ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + /*====align left====*/ + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + /* ==== align center ====*/ + /*justify-content: center; */ + /*====align right====*/ + /* justify-content: flex-end; */ + /*====separated columns li a====*/ + /* justify-content: space-between; */ + /*====separated columns centered li a====*/ + /*justify-content: space-around;*/ } + nav ul li { + float: left; + list-style: none; + position: relative; } + +nav ul li:first-child, +nav[role='navigation'] ul li { + margin-left: 0; } + +nav[role='navigation'] li a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + line-height: 4.8rem; + max-width: 100%; + padding: 0 1.6rem; + position: relative; + text-decoration: none; } + nav[role='navigation'] li a svg { + margin: 1.5rem .4rem 1.5rem 0; } + +header nav ul { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + margin: 0; } + +nav.aligncenter ul, +.aligncenter nav ul { + /* ==== align center ====*/ + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + +nav.navbar ul li { + /*====full float li a ====*/ + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + +@media (max-width: 568px) { + nav.navbar ul { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + padding: 0; } + nav.navbar li a { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } } + +/*============================================ +5. SLIDES (Full Screen) +Vertically and horizontally centered +============================================== */ +/* Fade transition to all slides. +* = All HTML elements will have those styles.*/ +section * { + -webkit-animation: fadeIn .6s ease-in-out; + animation: fadeIn .6s ease-in-out; } + +section .background, +section .light, +section .dark { + -webkit-animation-duration: 0s; + animation-duration: 0s; } + +/*=== Section = Slide === */ +section, +.slide { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 100vh; + /*Fullscreen*/ + /* Prototyping? min-height: 720px (Baseline: 8px = .8rem)*/ + padding: 2.4rem; + /*Fixed/Visible header? padding-top: 12rem; */ + page-break-after: always; + position: relative; + word-wrap: break-word; } + @media (min-width: 1024px) { + section, + .slide { + padding-bottom: 12rem; + padding-top: 12rem; } } + +/*slide with no padding (full card, .embed youtube video...) */ +.fullscreen { + padding: 0; + /* Fixed/Visible header? + padding:8.2rem 0 0 0; + */ } + +/* slide alignment - top */ +.slide-top { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + +/* slide alignment - bottom */ +.slide-bottom { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + +/*== 5.1. Mini container width:50% +Aligned items [class*="content-"]=== */ +[class*='content-'] { + position: relative; + text-align: left; } + +.wrap[class*='bg-'], +.wrap.frame, +[class*='content-'][class*='bg-'], +[class*='content-'].frame, +[class*='align'][class*='bg-'] { + padding: 4.8rem; } + +form[class*='bg-'] { + padding: 2.4rem; } + +[class*='content-'] > [class*='content-'] p { + font-size: 1.8rem; + line-height: 3.2rem; } + +.content-center { + margin: 0 auto; + text-align: center; } + +@media (min-width: 768px) { + [class*='content-'] { + width: 50%; } + [class*='content-']:after, [class*='content-']:before { + content: ''; + display: table; } + [class*='content-']:after { + clear: both; } + .content-left { + float: left; } + .content-right { + float: right; } + [class*='content-'] + [class*='content-'] { + margin-bottom: 4.8rem; + padding-left: 2.4rem; } + [class*='content-'] + [class*='size-'] { + clear: both; + margin-top: 6.4rem; } } + +/*=== 5.3 Slides - Background Images/Videos === */ +.background, +[class*='background-'] { + background-repeat: no-repeat; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } + +/*=== BG Positions === */ +.background { + background-position: center; + background-size: cover; + /*fullscreen video +