webslides
Version:
Making HTML presentations easy
1,236 lines (1,220 loc) • 126 kB
HTML
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides
Thanks!
-->
<!-- SEO -->
<title>WebSlides Documentation: Components</title>
<meta name="description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="WebSlides Components" /> <!-- EDIT -->
<meta property="og:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:25:31"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides Components"> <!-- EDIT -->
<meta name="twitter:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
<nav role="navigation">
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
<ul>
<li class="github">
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
<em>WebSlides</em>
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
<em>@WebSlides</em>
</a>
</li>
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
-->
<section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<p class="text-subtitle">WebSlides Tutorial</p>
<h1 class="text-landing">Components</h1>
<p class="text-symbols">* * *</p>
<p>
<a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
Free Download
</a>
</p>
</div>
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<div class="wrap">
<h2><strong>WebSlides Components</strong></h2>
<p class="text-intro">A quick reference guide for beginners.</p>
<ul class="flexblock border">
<li>
<!--div required = padding li or li>a-->
<div>
<h3><a target="_blank" href="#slide=3">Architecture</a></h3>
<ol>
<li><a target="_blank" href="#slide=3">Markup</a></li>
<li><a target="_blank" href="#slide=4">CSS Syntax</a></li>
<li><a target="_blank" href="#slide=5">Layout</a></li>
<li><a target="_blank" href="#slide=6">Headers</a></li>
<li><a target="_blank" href="#slide=7">Footers</a></li>
<li><a target="_blank" href="#slide=8">Navigation</a></li>
<li><a target="_blank" href="#slide=9">Grid</a></li>
<li><a target="_blank" href="#slide=14">Alignments</a></li>
<li><a target="_blank" href="#slide=27">Background Colors</a></li>
<li><a target="_blank" href="#slide=29">Gradients</a></li>
</ol>
</div>
</li>
<li>
<!--div required = padding li or li>a-->
<div>
<h3><a target="_blank" href="#slide=33">Contents (Flexible Blocks)</a></h3>
<ol>
<li><a target="_blank" href="#slide=33">Multipurpose</a></li>
<li><a target="_blank" href="#slide=37">Clients</a></li>
<li><a target="_blank" href="#slide=39">Steps</a></li>
<li><a target="_blank" href="#slide=40">Features</a></li>
<li><a target="_blank" href="#slide=41">Specs</a></li>
<li><a target="_blank" href="#slide=43">CVs and News</a></li>
<li><a target="_blank" href="#slide=44">Galleries (portfolios, teams...)</a></li>
<li><a target="_blank" href="#slide=47">Metrics</a></li>
<li><a target="_blank" href="#slide=48">Plans (Pricing)</a></li>
<li><a target="_blank" href="#slide=50">Work</a></li>
</ol>
</div>
</li>
<li>
<!--div required = padding li or li>a-->
<div>
<h3><a target="_blank" href="#slide=51">Landings</a></h3>
<ol>
<li><a target="_blank" href="#slide=51">Welcomes</a></li>
<li><a target="_blank" href="#slide=56">Covers</a></li>
<li><a target="_blank" href="#slide=62">Data</a></li>
<li><a target="_blank" href="#slide=66">Abouts</a></li>
<li><a target="_blank" href="#slide=70">Benefits</a></li>
<li><a target="_blank" href="#slide=73">Cards</a></li>
<li><a target="_blank" href="#slide=77">Offers and Discounts</a></li>
<li><a target="_blank" href="#slide=82">Quotes</a></li>
<li><a target="_blank" href="#slide=88">Buttons and Badges</a></li>
<li><a target="_blank" href="#slide=89">Forms</a></li>
</ol>
</div>
</li>
<li>
<!--div required = padding li or li>a-->
<div>
<h3><a target="_blank" href="#slide=94">Media</a></h3>
<ol>
<li><a target="_blank" href="#slide=95">Background Images</a></li>
<li><a target="_blank" href="#slide=101">Background Videos</a></li>
<li><a target="_blank" href="#slide=103">Embedding videos, charts...</a></li>
<li><a target="_blank" href="#slide=108">Maps</a></li>
<li><a target="_blank" href="#slide=110">500+ SVG Icons</a></li>
<li><a target="_blank" href="#slide=111">Logos</a></li>
<li><a target="_blank" href="#slide=112">Avatars</a></li>
<li><a target="_blank" href="#slide=113">Devices</a></li>
<li><a target="_blank" href="#slide=114">Screenshots</a></li>
<li><a target="_blank" href="#slide=115">CSS Animations</a></li>
</ol>
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<!--.wrap = container (width: 90%) -->
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<h3><strong>WebSlides is really easy</strong></h3>
<p class="text-intro">Each parent <code><section></code> in the #webslides element is an individual slide. </p>
<p>Code looks superb. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. Just focus on your ideas. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
</div>
<!-- .end .column -->
<div class="column">
<pre><article id="webslides">
<span class="code-comment"><!-- Slide 1 --></span>
<section>
<h1>Design for trust</h1>
</section>
<span class="code-comment"><!-- Slide 2 --></span>
<section class="bg-primary">
<div class="wrap">
<h2>.wrap = container (width: 90%) with fadein</h2>
</div>
</section>
</article>
</pre>
</div>
<!-- .end .column -->
</div>
<!-- .end .grid -->
<hr>
<p class="aligncenter">Vertical sliding? <code><article id="webslides" class="vertical"></code></p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap size-50">
<h2>
<svg class="fa-heart-o">
<use xlink:href="#fa-heart-o"></use>
</svg>
CSS Syntax
</h2>
<p class="text-intro">WebSlides is so easy to understand and love. Baseline: 8.</p>
<hr>
<ul class="description">
<li><span class="text-label">Typography:</span> .text-landing, .text-subtitle, .text-data, .text-intro...</li>
<li><span class="text-label">BG Colors:</span> .bg-primary, .bg-blue,.bg-apple...</li>
<li><span class="text-label">BG Images:</span> .background, .background-center-bottom...</li>
<li><span class="text-label">Cards:</span> .card-60, .card-50, .card-40...</li>
<li><span class="text-label">Sizes:</span> .wrap.size-50, .img.size-40...</li>
<li><span class="text-label">Flex Blocks:</span> .flexblock.clients, .flexblock.gallery, .flexblock.metrics...</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<header>
<!--.wrap o <nav> = container 1200px -->
<div class="wrap">
<p class="logo"><a href="#" title="Logo">Logo</a> <span class="alignright">.alignright</span></p>
</div>
</header>
<div class="aligncenter fadeInUp">
<h1>Layout</h1>
<p>Centering vertically and horizontally.</p>
</div>
<footer>
<div class="wrap">
<p>
<span class="alignleft">
Footer
</span>
<span class="alignright">
<a href="#" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
@username
</a>
</span>
</p>
</div>
</footer>
</section>
<section>
<header class="bg-white">
<!--.wrap o <nav> = container 1200px -->
<div class="wrap">
<p class="logo"><a href="#" title="Logo">Logo</a> <span class="alignright">.alignright</span></p>
</div>
</header>
<div class="wrap aligncenter">
<h1>Headers</h1>
<p><code><header class="bg-white"></code></p>
</div>
</section>
<section>
<div class="wrap aligncenter">
<h1>Footers</h1>
<p><code><footer class="bg-white"></code></p>
</div>
<footer class="bg-white">
<!--.wrap o <nav> = container 1200px -->
<div class="wrap">
<p>
<span class="alignleft"><a href="https://google.com" title="Google"><img src="../static/images/logos/google.svg" alt="Google"></a></span>
<span class="alignright">
<a href="#" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
@username
</a>
</span>
</p>
</div>
</footer>
</section>
<section>
<div class="wrap">
<h1>Navigation</h1>
<nav role="navigation">
<ul>
<li><a href="">About</a></li>
<li><a href="">Clients</a></li>
<li class="facebook">
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
<svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use>
</svg>
Facebook
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
@WebSlides
</a>
</li>
</ul>
</nav>
<p>nav</p>
<nav role="navigation" class="navbar">
<ul>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Contact</a></li>
<li class="facebook">
<a rel="external" href="https://facebook.com/webslides" title="Facebook">
<svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use>
</svg>
Facebook
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
@WebSlides
</a>
</li>
</ul>
</nav>
<p>nav.navbar</p>
<hr>
<div class="grid">
<div class="column">
<h3>Company</h3>
<ul>
<li><a href="">About</a></li>
<li><a href="">Team</a></li>
<li><a href="">Blog</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Support</h3>
<ul>
<li><a href="">Shipping & Returns</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Legal</h3>
<ul>
<li><a href="">Terms of Service</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Cookies</a></li>
</ul>
</div>
<!-- .end .column -->
<div class="column">
<h3>Community</h3>
<ul>
<li>
<a href="">
<svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use>
</svg>
Facebook
</a>
</li>
<li>
<a href="">
<svg class="fa-youtube">
<use xlink:href="#fa-youtube"></use>
</svg>
YouTube
</a>
</li>
<li>
<a href="">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
Twitter
</a>
</li>
</ul>
</div>
<!-- .end .column -->
</div>
<!-- end .tab-content -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>.grid > .column</h2>
<p>Basic Grid (auto-fill and equal height).</p>
<hr>
<div class="grid">
<div class="column">
<h3>.column 1</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
<div class="column">
<h3>.column 2</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome. Just focus on your content. Have less. Do more.</p>
</div>
<div class="column">
<h3>.column 3</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
</div>
<!--end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>.grid.<strong>vertical-align</strong> > .column</h2>
<hr>
<div class="grid vertical-align">
<div class="column">
<h3>.column 1</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
<div class="column">
<h3>.column 2</h3>
<p>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.</p>
</div>
<div class="column">
<h3>.column 3</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
</div>
<!--end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>.grid.<strong>sm</strong> (sidebar + main)</h2>
<hr>
<div class="grid sm">
<div class="column">
<h3>.column 1</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
<div class="column">
<h3>.column 2</h3>
<p>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.</p>
</div>
</div>
<!--end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>.grid.<strong>ms</strong> (main + sidebar)</h2>
<hr>
<div class="grid ms">
<div class="column">
<h3>.column 1</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
<div class="column">
<h3>.column 2</h3>
<p>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.</p>
</div>
</div>
<!--end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>.grid.<strong>sms</strong> (sidebar + main + sidebar)</h2>
<hr>
<div class="grid sms">
<div class="column">
<h3>.column 1</h3>
<p>Incredibly versatile! Auto-fill and equal height. Flexbox is awesome.</p>
</div>
<div class="column">
<h3>.column 2</h3>
<p>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.</p>
</div>
<div class="column">
<h3>.column 3</h3>
<p>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.</p>
</div>
</div>
<!--end .grid -->
</div>
<!-- .end .wrap -->
</section>
<section class="aligncenter">
<h2>Simple CSS Alignments</h2>
<p>Put content wherever you want.</p>
</section>
<section class="slide-top">
<div class="wrap">
<div class="content-left">
<h3>1/9 left top</h3>
<p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
<p><code>.slide-top and .content-left</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="slide-top">
<div class="wrap">
<div class="content-center">
<h3>2/9 center top</h3>
<p>Your story needs to be clear. A great lasting story is about everyone or it will not last. </p>
<p><code>.slide-top and .content-center</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="slide-top">
<div class="wrap">
<div class="content-right">
<h3>3/9 right top</h3>
<p>Your story needs to be short. Select words carefully, each one must convey a meaning.</p>
<p><code>.slide-top and .content-right</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="content-left">
<h3>4/9 left center</h3>
<p>Your slides should be clear and well structured. What's the point of the story? Why is that relevant?</p>
<p><code>.content-left</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="content-center">
<h3>5/9 center</h3>
<p>Stories are all around us. They are what move us, make us feel alive, and inspire us.</p>
<p><code>.content-center</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<div class="content-right">
<h3>6/9 right center</h3>
<p>Your presentation should have the same elements as a good book. Action, failure, and success. </p>
<p><code>.content-right</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="slide-bottom">
<div class="wrap">
<div class="content-left">
<h3>7/9 left bottom</h3>
<p>How to tell strategic stories? What Promised Land is the company conveying through its words and images.</p>
<p><code>.slide-bottom</code> and <code>.content-left</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="slide-bottom">
<div class="wrap">
<div class="content-center">
<h3>8/9 center bottom</h3>
<p>What's the Promised Land? What change do you want to bring to the world? The Promised Land is the North Star.</p>
<p><code>.slide-bottom</code> and <code>.content-center</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="slide-bottom">
<div class="wrap">
<div class="content-right">
<h3>9/9 right bottom</h3>
<p>Your origin story helps people decide whether or not to trust you. How was your life before the life-changing event?</p>
<p><code>.slide-bottom</code> and <code>.content-right</code></p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<img class="alignright size-50" src="../static/images/iphone.png" alt="iPhone">
<h2>img.size-50</h2>
<p><code>img.alignright.size-50</code></p>
<p>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.</p>
<p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<img class="alignleft size-50" src="../static/images/iphone.png" alt="iPhone">
<h2>img.size-50</h2>
<p><code>img.alignleft.size-50</code></p>
<p>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.</p>
<p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<img class="alignleft size-30" src="../static/images/iphone.png" alt="iPhone">
<h2>img.size-30</h2>
<p><code>img.alignleft.size-30</code></p>
<p>Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco.</p>
<p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3>Corporate Backgrounds</h3>
<ul class="flexblock">
<li class="bg-primary">
<h2>.bg-primary</h2>
#44d
</li>
<li class="bg-secondary">
<h2>.bg-secondary</h2>
#67d
</li>
<li class="bg-light">
<h2>.bg-light</h2>
#edf2f7
</li>
<li>
<h2>body</h2>
#f7f9fb
</li>
</ul>
<hr>
<h3>General Colors</h3>
<ul class="flexblock">
<li class="bg-black">
<h2>.bg-black</h2>
#111
</li>
<li class="bg-black-blue">
<h2>.bg-black-blue</h2>
#123
</li>
<li class="bg-white">
<h2>.bg-white</h2>
#fff
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<ul class="flexblock">
<li class="bg-red">
<h2>.bg-red</h2>
#c23
</li>
<li class="bg-green">
<h2>.bg-green</h2>
#077
</li>
<li class="bg-blue">
<h2>.bg-blue</h2>
#346
</li>
<li class="bg-purple">
<h2>.bg-purple</h2>
#62b
</li>
</ul>
<hr>
<h3>Transparent Backgrounds</h3>
<ul class="flexblock">
<li class="bg-trans-dark">
<h2>.bg-trans-dark</h2>
rgba(0,0,0 , 0.5)
</li>
<li class="bg-trans-light">
<h2>.bg-trans-light</h2>
rgba(255,255,255 , 0.2)
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-gradient-h">
<div class="wrap">
<h1>Gradients</h1>
<ul class="flexblock border">
<li>Horizontal <code>.bg-gradient-h</code></li>
<li>Radial <code>.bg-gradient-r</code></li>
<li>Vertical <code>.bg-gradient-v</code></li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-gradient-v aligncenter">
<div class="wrap">
<h2>Vertical Gradient</h2>
<p><code>.bg-gradient-v</code></p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-gradient-r aligncenter">
<div class="wrap">
<h2>Radial Gradient</h2>
<p><code>.bg-gradient-r</code></p>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-apple aligncenter">
<h2>One more background :)</h2>
<p><code>.bg-apple</code></p>
</section>
<section class="aligncenter">
<div class="wrap">
<div class="content-center">
<h2 class="text-landing">Contents</h2>
<p><code>ul.flexblock</code> = Flexible blocks<br> with auto-fill and equal height.</p>
</div>
<hr>
<ul class="flexblock">
<li>
<h2>
<svg class="fa-bar-chart">
<use xlink:href="#fa-bar-chart"></use>
</svg>
.flexblock li 1
</h2>
Multipurpose: services, features, specs...
</li>
<li>
<h2>
<svg class="fa-balance-scale">
<use xlink:href="#fa-balance-scale"></use>
</svg>
.flexblock li 2
</h2>
Multipurpose: benefits, clients, work...
</li>
<li>
<h2>
<svg class="fa-cog">
<use xlink:href="#fa-cog"></use>
</svg>
.flexblock li 3
</h2>
Multipurpose: news, metrics, plans...
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3>Multipurpose (services, work...)</h3>
<p><code>ul.flexblock.blink</code> (block link)</p>
<ul class="flexblock blink">
<li>
<a href="#">
<h2>
<svg class="fa-bar-chart">
<use xlink:href="#fa-bar-chart"></use>
</svg>
Purpose
</h2>
Businesses that people love
</a>
</li>
<li>
<a href="">
<h2>
<svg class="fa-balance-scale">
<use xlink:href="#fa-balance-scale"></use>
</svg>
Principles
</h2>
Ethics of openness and good taste
</a>
</li>
<li>
<a href="#">
<h2>
<svg class="fa-cog">
<use xlink:href="#fa-cog"></use>
</svg>
Process
</h2>
Useful → Easy → Fast → Beautiful
</a>
</li>
</ul>
<hr>
<h3>Multipurpose (services, work...)</h3>
<p><code>ul.flexblock.border</code></p>
<ul class="flexblock border">
<li>
<h2>
<svg class="fa-bar-chart">
<use xlink:href="#fa-bar-chart"></use>
</svg>
Purpose
</h2>
Businesses that people love
</li>
<li>
<h2>
<svg class="fa-balance-scale">
<use xlink:href="#fa-balance-scale"></use>
</svg>
Principles
</h2>
Ethics of openness and good taste
</li>
<li>
<h2>
<svg class="fa-cog">
<use xlink:href="#fa-cog"></use>
</svg>
Process
</h2>
Useful → Easy → Fast → Beautiful
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3>Multipurpose (services, clients...)</h3>
<p><code>ul.flexblock.blink.border</code></p>
<ul class="flexblock blink border">
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<h3>Interfaces</h3>
<ol>
<li>Architecture</li>
<li>Design</li>
<li>Development</li>
</ol>
</div>
</a>
</li>
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<h3>Content Strategy</h3>
Beautiful and engaging stories that inspires consumers to take action.
</div>
</a>
</li>
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<h3>Customer Experience</h3>
Attitude. Little details. People always remember how you made them feel.
</div>
</a>
</li>
<li>
<a href="">
<!--div required = padding li or li>a-->
<div>
<h3>Recruitment</h3>
We like to help startups by working with them since the beginning.
</div>
</a>
</li>
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<img class="aligncenter" src="../static/images/logos/google.svg" alt="Google"> Collaboration with the Acme team to design their mobile apps.
</div>
</a>
</li>
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<img class="aligncenter blacklogo" src="../static/images/logos/google.svg" alt="Google"> We worked closely with the UX team on photography for the site. <code>img.blacklogo</code>
</div>
</a>
</li>
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<img class="aligncenter graylogo" src="../static/images/logos/google.svg" alt="Google"> Acme hired us to help make the reading experience totally engaging. <code>img.graylogo</code>
</div>
</a>
</li>
<li>
<a href="#" title="Block Link = .blink">
<!--div required = padding li or li>a-->
<div>
<img class="aligncenter graylogo" src="../static/images/logos/google.svg" alt="Google"> We worked with Acme to develop recruiting processes. <code>img.graylogo</code>
</div>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3>Multipurpose</h3>
<p><code>ul.flexblock.blink.border</code></p>
<ul class="flexblock border blink">
<li>
<a href="">
<h3>Google</h3>
2016.- Google Drive
</a>
</li>
<li><a href="#" title="Facebook"><strong>Facebook</strong> 2016.- F8 Conference</a></li>
<li><a href="#" title="Airbnb"><strong>Airbnb</strong>2015.- Creative Direction</a></li>
<li><a href="#" title="Microsoft"><strong>Microsoft</strong> 2015.- Content Strategy</a></li>
<li><a href="#" title="The New York Times"><strong>The New York Times</strong>2015.- Recruitment</a></li>
<li><a href="#" title="Netflix"><strong>Netflix</strong> 2014.- Mobile Apps</a></li>
<li><a href="#" title="Instagram"><strong>Instagram</strong>2014.- Identity</a></li>
<li><a href="#" title="Spotify"><strong>Spotify</strong> 2013.- TV Commercials</a></li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>Clients</h2>
<p><code>ul.flexblock.clients</code></p>
<ul class="flexblock clients">
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
<figcaption>
<h3>Interfaces</h3>
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
<figcaption>
<h3>Brand</h3>
<p>We worked with the UX team on photography for the site <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram">
<figcaption>
<h3>Recruiting</h3>
<p>We worked with Acme to develop recruiting processes. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
<figcaption>
<h3>Content Strategy</h3>
<p>We partnered with various Netflix divisions to create a campaign for House of Cards.</p>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h2>Clients</h2>
<p><code>ul.flexblock.clients.border</code></p>
<ul class="flexblock clients border">
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
<figcaption>
<h3>Interfaces</h3>
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
<figcaption>
<h3>Brand</h3>
<p>We worked with the UX team on photography for the site <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram">
<figcaption>
<h3>Recruiting</h3>
<p>We worked with Acme to develop recruiting processes. <code>img.blacklogo</code></p>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#" title="Client">
<figure>
<img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
<figcaption>
<h3>Content Strategy</h3>
<p>We partnered with various Netflix divisions to create a campaign for House of Cards.</p>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3>ul.flexblock.steps</h3>
<ul class="flexblock steps">
<!-- li>a? Add blink = <ul class="flexblock steps blink">-->
<li>
<span>
<svg class="fa-heartbeat">
<use xlink:href="#fa-heartbeat"></use>
</svg>
</span>
<h2>01. Passion</h2>
<p>When you're really passionate about your job, you can change the world.</p>
</li>
<li>
<div class="process step-2"></div>
<span>
<svg class="fa-magic">
<use xlink:href="#fa-magic"></use>
</svg>
</span>
<h2>02. Purpose</h2>
<p>Why does this business exist? How are you different? Why matters?</p>
</li>
<li>
<div class="process step-3"></div>
<span>
<svg class="fa-balance-scale">
<use xlink:href="#fa-balance-scale"></use>
</svg>
</span>
<h2>03. Principles</h2>
<p>Leadership through usefulness, openness, empathy, and good taste.</p>
</li>
<li>
<div class="process step-4"></div>
<span>
<svg class="fa-cog">
<use xlink:href="#fa-cog"></use>
</svg>
</span>
<h2>04. Process</h2>
<ul>
<li>Useful</li>
<li>Easy</li>
<li>Fast</li>
<li>Beautiful</li>
</ul>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<h3>ul.flexblock.features</h3>
<ul class="flexblock features">
<li>
<div>
<h2>
<span>→</span>
Simple Navigation
</h2>
with arrow keys and swipe.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-link">
<use xlink:href="#fa-link"></use>
</svg>
Permalinks
</h2>
Go to a specific slide.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-clock-o">
<use xlink:href="#fa-clock-o"></use>
</svg>
Slide Counter
</h2>
Current/Total number
</div>
</li>
<li>
<div>
<h2>
<span>40<sup>+</sup></span>
Beautiful Components
</h2>
Covers, cards, quotes...
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-text-height">
<use xlink:href="#fa-text-height"></use>
</svg>
Vertical Rhythm
</h2>
Use multiples of 8.
</div>
</li>
<li>
<div>
<h2>
<span>500<sup>+</sup></span>
SVG Icons
</h2>
Font Awesome Kit.
</div>
</li>
</ul>
</div>
<!-- .end .wrap -->
</section>
<section>
<div class="wrap">
<!-- [class*="content-"] = container max-width:50% = 600px -->
<div class="content-center">
<h3>ul.flexblock.specs</h3>
<ul class="flexblock specs">
<li>
<div>
<h2>
<svg class="fa-long-arrow-right">
<use xlink:href="#fa-long-arrow-right"></use>
</svg>
Navigation with arrow keys and slide counter
</h2>
Fade transition to all slides.
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-link">
<use xlink:href="#fa-link"></use>
</svg>
Permalinks
</h2>
Go to a specific slide. URL: #slide=number
</div>
</li>
<li>
<div>
<h2>
<svg class="fa-text-height">
<use xlink:hre