webslides

<!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">   <title>WebSlides Tutorial: Classes</title> <meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples.">    <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">  <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">  <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">   <meta property="og:url" content="http://your-url.com/permalink" />  <meta property="og:type" content="article" /> <meta property="og:title" content="WebSlides Documentation: Classes" />  <meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples.">  <meta property="og:updated_time" content="2017-01-04T17:23:46">  <meta property="og:image" content="../static/images/share-webslides.jpg" >   <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@webslides">  <meta name="twitter:creator" content="@jlantunez">  <meta name="twitter:title" content="WebSlides Documentation: Classes">  <meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples.">  <meta name="twitter:image" content="../static/images/share-webslides.jpg">   <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">  <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>  </ul> </nav> </header> <main role="main"> <article id="webslides">  <section class="bg-black-blue aligncenter"> <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>  <div class="wrap"> <p class="text-subtitle">WebSlides Tutorial</p> <h1 class="text-landing">Classes</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>  </section> <section class="aligncenter">  <div class="wrap"> <h2><strong>WebSlides Classes</strong></h2> <p class="text-intro">Friendly naming conventions.</p> <ul class="flexblock border"> <li>  <div> <h3><a target=_blank href="#slide=3">Layout</a></h3> <ol> <li><a target="_blank" href="#slide=4">CSS Syntax</a></li> <li><a target="_blank" href="#slide=6">.alignleft</a></li> <li><a target="_blank" href="#slide=7">.alignright</a></li> <li><a target="_blank" href="#slide=8">.aligncenter</a></li> <li><a target="_blank" href="#slide=9">.slide-top</a></li> <li><a target="_blank" href="#slide=12">.content- (left, center, right)</a></li> <li><a target="_blank" href="#slide=15">.slide-bottom</a></li> <li><a target="_blank" href="#slide=18">.grid > .column</a></li> <li><a target="_blank" href="#slide=19">.grid.vertical-align</a></li> <li><a target="_blank" href="#slide=23">.card- (50,60,70...)</a></li> </ol> </div> </li> <li>  <div> <h3><a target="_blank" href="#slide=26">Backgrounds</a></h3> <ol> <li><a target="_blank" href="#slide=27">.bg-primary...(Corp Colors)</a></li> <li><a target="_blank" href="#slide=28">.bg-black...(General Colors)</a></li> <li><a target="_blank" href="#slide=29">.bg-gradient-(position)</a></li> <li><a target="_blank" href="#slide=33">.background-video</a></li> <li> <a target="_blank" href="#slide=36">Background Images:</a> <ol> <li><a target="_blank" href="#slide=36">.background (fullscreen)</a></li> <li><a target="_blank" href="#slide=37">.background-(position)</a></li> <li><a target="_blank" href="#slide=38">.background.dark</a></li> <li><a target="_blank" href="#slide=39">.background.light</a></li> <li><a target="_blank" href="#slide=40">.background.anim</a></li> </ol> </li> </ol> </div> </li> <li>  <div> <h3><a target="_blank" href="#slide=41">Flexible Blocks</a></h3> <ol> <li><a target="_blank" href="#slide=42">.flexblock </a></li> <li><a target="_blank" href="#slide=45">.flexblock.clients</a></li> <li><a target="_blank" href="#slide=47">.flexblock.features</a></li> <li><a target="_blank" href="#slide=48">.flexblock.gallery</a></li> <li><a target="_blank" href="#slide=50">.flexblock.metrics</a></li> <li><a target="_blank" href="#slide=52">.flexblock.plans</a></li> <li><a target="_blank" href="#slide=54">.flexblock.specs</a></li> <li><a target="_blank" href="#slide=55">.flexblock.reasons</a></li> <li><a target="_blank" href="#slide=56">.flexblock.steps</a></li> <li><a target="_blank" href="#slide=57">.flexblock.activity</a></li> </ol> </div> </li> <li>  <div> <h3><a target="_blank" href="#slide=58">Typography (Roboto)</a></h3> <ol> <li><a target="_blank" href="#slide=59">.text-landing</a></li> <li><a target="_blank" href="#slide=60">.text-intro</a></li> <li><a target="_blank" href="#slide=61">.text-subtitle</a></li> <li><a target="_blank" href="#slide=62">.text-shadow</a></li> <li><a target="_blank" href="#slide=63">.text-data</a></li> <li><a target="_blank" href="#slide=64">.text-context</a></li> <li><a target="_blank" href="#slide=65">.text-cols</a></li> <li><a target="_blank" href="#slide=66">.text-label</a></li> <li><a target="_blank" href="#slide=67">.text-serif (Maitree)</a></li> <li><a target="_blank" href="#slide=69">.text-pull (-right/-left)</a></li> </ol> </div> </li> </ul> </div>  </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> .size-50, .size-40...</li> <li><span class="text-label">Flex Blocks:</span> .flexblock.clients, .flexblock.gallery, .flexblock.metrics...</li> </ul> </div>  </section> <section>  <div class="wrap"> <div class="grid vertical-align"> <div class="column"> <h3><strong>WebSlides is really easy</strong></h3> <p class="text-intro">Each parent <code><section></code> in the #webslides element is an individual slide.</p> <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p> </div>  <div class="column"> <pre><article id="webslides"> <span class="code-comment"></span> <section> <h1>Design for trust</h1> </section> <span class="code-comment"></span> <section class="bg-primary"> <div class="wrap"> <h2>.wrap = container (width: 90%) with fadein</h2> </div> </section> </article> </pre> </div>  </div>  <hr> <p class="aligncenter">Vertical sliding? <code><article id="webslides" class="vertical"></code></p> </div>  </section> <section> <header>  <div class="wrap"> <p>Header (logo) <span class="alignright">.alignright</span></p> </div> </header> <div class="aligncenter"> <h2>Simple CSS Alignments</h2> <p>Put content wherever you want.</p> </div> <footer> <div class="wrap"> <p> <span class="alignleft"> Footer: logo, credits... (.alignleft) </span> <span class="alignright"> <a href="#" title="Twitter"> <svg class="fa-twitter"> <use xlink:href="#fa-twitter"></use> </svg> @username .alignright </a> </span> </p> </div> </footer> </section> <section> <div class="wrap"> <img class="alignleft size-50" src="../static/images/iphone.png" alt="iPhone"> <h2>img.alignleft</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>  </section> <section> <div class="wrap"> <img class="alignright size-50" src="../static/images/iphone.png" alt="iPhone"> <h2>img.alignright</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>  </section> <section> <div class="wrap"> <img class="aligncenter size-40" src="../static/images/iphone.png" alt="iPhone"> <p class="aligncenter"><code>img.aligncenter.size-40</code></p> </div>  </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>  </section> <section class="slide-top"> <div class="wrap"> <div class="content-center"> <h3>2/9 center top</h3> <p>In a village of La Mancha, the name of which I have no desire to call to mind,</p> <p><code>.slide-top and .content-center</code></p> </div> </div>  </section> <section class="slide-top"> <div class="wrap"> <div class="content-right"> <h3>3/9 right top</h3> <p>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.</p> <p><code>.slide-top and .content-right</code></p> </div> </div>  </section> <section> <div class="wrap"> <div class="content-left"> <h3>4/9 left center</h3> <p>An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,</p> <p><code>.content-left</code></p> </div> </div>  </section> <section> <div class="wrap"> <div class="content-center"> <h3>5/9 center</h3> <p>lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.</p> <p><code>.content-center</code></p> </div> </div>  </section> <section> <div class="wrap"> <div class="content-right"> <h3>6/9 right center</h3> <p>he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,</p> <p><code>.content-right</code></p> </div> </div>  </section> <section class="slide-bottom"> <div class="wrap"> <div class="content-left"> <h3>7/9 left bottom</h3> <p>while on week-days he made a brave figure in his best homespun.</p> <p><code>.slide-bottom</code> and <code>.content-left</code></p> </div> </div>  </section> <section class="slide-bottom"> <div class="wrap"> <div class="content-center"> <h3>8/9 center bottom</h3> <p>He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,</p> <p><code>.slide-bottom</code> and <code>.content-center</code></p> </div> </div>  </section> <section class="slide-bottom"> <div class="wrap"> <div class="content-right"> <h3>9/9 right bottom</h3> <p>who used to saddle the hack as well as handle the bill-hook.</p> <p><code>.slide-bottom</code> and <code>.content-right</code></p> </div> </div>  </section> <section class="aligncenter">  <div class="wrap"> <h2>.grid + .column</h2> <p class="text-intro">Basic Grid (auto-fill and equal height).</p> <div class="grid"> <div class="column"> <h6>Why WebSlides?</h6> <p>There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p> <p class="text-symbols">* * *</p> </div>  <div class="column"> <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure> </div>  <div class="column"> <h6>How easy is WebSlides?</h6> <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p> <p class="text-symbols">* * *</p> </div>  </div>  </div>  </section> <section class="aligncenter">  <div class="wrap"> <h2>.grid.<strong>vertical-align</strong> + .column</h2> <p class="text-intro">Basic Grid (auto-fill and equal height).</p> <div class="grid vertical-align"> <div class="column"> <h6>Why WebSlides?</h6> <p>There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p> <p class="text-symbols">* * *</p> </div>  <div class="column"> <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure> </div>  <div class="column"> <h6>How easy is WebSlides?</h6> <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p> <p class="text-symbols">* * *</p> </div>  </div>  </div>  </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>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.</p> </div> <div class="column"> <h3>.column 2</h3> <p>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.</p> <p>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. </p> </div> </div>  </div>  </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>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. </p> <p>An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.</p> </div> <div class="column"> <h3>.column 2</h3> <p>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.</p> </div> </div>  </div>  </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>Information architecture is considered to have been founded by Richard Saul Wurman.</p> </div> <div class="column"> <h3>.column 2</h3> <p>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.</p> </div> <div class="column"> <h3>.column 3</h3> <p>The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields. </p> </div> </div>  </div>  </section> <section> <div class="wrap"> <div class="card-50 bg-white"> <div class="flex-content"> <h2>Unsplash </h2> <p>.card-50.bg-white</p> <p class="text-intro"><a href="http://unsplash.com">Unsplash</a> is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great. </p> <ul class="description"> <li> <strong class="text-label">Role:</strong> Frontend </li> <li><strong class="text-label">Client:</strong> Acme</li> <li><strong class="text-label">Year:</strong> 2018</li> </ul> </div>  <figure> <img src="https://source.unsplash.com/rCOWMC8qf8A/" alt="Apple Watch"> <figcaption> <a href="https://unsplash.com/@crew" title="Crew"> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Crew (Unsplash) </a> </figcaption> </figure>  </div>  </div>  </section> <section> <div class="wrap"> <div class="card-50 bg-white"> <figure> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.8442158987712!2d-0.1268272!3d51.5005848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig+Ben!5e0!3m2!1ses!2ses!4v1491497625579" width="800" height="600" allowfullscreen></iframe> <figcaption> <a href="https://maps.google.com" title="Google Maps"> <svg class="fa-maps"> <use xlink:href="#fa-maps"></use> </svg> Google Maps </a> </figcaption> </figure>  <div class="flex-content"> <h2> Discover London </h2> <p>.card-50.bg-white</p> <ul class="description"> <li> <strong title="Density">Density:</strong> 5,518/km<sup>2</sup> </li> <li><strong title="Population">Population:</strong> 8,673,713</li> <li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li> </ul> <p> 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. </p> </div>  </div>  </div>  </section> <section class="fullscreen"> <div class="card-50"> <figure> <img src="https://source.unsplash.com/8lODM_TYmkI/800x600" alt="Yosemite National Park"> <figcaption> <a href="https://unsplash.com/@chadmadden" title="Chad Madden"> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Chad Madden (Unsplash) </a> </figcaption> </figure>  <div class="flex-content"> <h2> What is inspiration? </h2> <p> 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. </p> </div>  </div>  </section> <section class="bg-apple aligncenter"> <h1>Backgrounds</h1> <p><section class="bg-apple"></p> </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-gray"> <h2>.bg-gray</h2> #d5d9e2 </li> <li class="bg-white"> <h2>.bg-white</h2> #fff </li> </ul> </div>  </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> #b6d </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>  </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>  </section> <section class="bg-gradient-h aligncenter">  <div class="wrap"> <h1>Horizontal Gradient</h1> <p><code>section.bg-gradient-h</code></p> </div>  </section> <section class="bg-gradient-r aligncenter"> <div class="wrap"> <h1>Radial Gradient</h1> <p><code>section.bg-gradient-r</code></p> </div>  </section> <section class="bg-gradient-v aligncenter">  <div class="wrap"> <h1>Vertical Gradient</h1> <p><code>section.bg-gradient-v</code></p> </div>  </section> <section> <div class="wrap size-60"> <h3>Background Videos</h3> <pre><video class="background-video" autoplay muted loop poster="image.jpg"> <source src="video.mp4" type="video/mp4"> </video></pre> <p><code>.background-video</code></p> </div>  </section> <section class="bg-black"> <video class="background-video" autoplay muted loop poster="https://webslides.tv/static/images/working.jpg"> <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4"> </video> <div class="wrap"> <p><code>.background-video</code></p> <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2> </div>  </section> <section class="bg-blue aligncenter"> <video class="background-video dark" autoplay muted loop poster="https://webslides.tv/static/images/working.jpg"> <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4"> </video> <div class="wrap"> <h2 class="text-landing">BG Video with Overlay</h2> <p><code>section.bg-blue > .background-video.dark</code> or .light</p> </div>  </section> <section> <div class="wrap"> <div class="content-left"> <h3>Fullscreen Background Images</h3> <pre><section> <span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span> <div class="wrap"> <h1>Slide</h1> </div> </section></pre> <p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p> </div> <div class="content-left"> <h3>16 Different Backgrounds</h3> <ul class="text-cols"> <li><strong>.background</strong> (cover)</li> <li>.background-top (cover)</li> <li>.background-bottom (cover)</li> <li>.background.light (opacity)</li> <li>.background.dark (opacity)</li> <li>.background-center</li> <li>.background-center-top</li> <li>.background-center-bottom</li> <li>.background-left</li> <li>.background-left-top</li> <li>.background-left-bottom</li> <li>.background-right</li> <li>.background-right-top</li> <li>.background-right-bottom</li> <li>.background-anim (animated)</li> <li>.<strong>background-video</strong> (fullscreen)</li> </ul> </div> </div>  </section> <section> <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <div class="wrap"> <div class="content-left"> <h3>.background-(position)</h3> <p><code>.background-right-bottom</code></p> <ul class="flexblock specs"> <li> <div> <svg class="fa-wifi"> <use xlink:href="#fa-wifi"></use> </svg> <h2>Ultra-Fast WiFi</h2> Simple and secure file sharing. </div> </li> <li> <div> <svg class="fa-battery-full"> <use xlink:href="#fa-battery-full"></use> </svg> <h2>All day battery life</h2> Your battery worries may be over. </div> </li> <li> <div> <svg class="fa-life-ring"> <use xlink:href="#fa-life-ring"></use> </svg> <h2>Lifetime Warranty </h2> We'll fix it or if we can't, we'll replace it. </div> </li> </ul> </div> </div>  </section> <section class="bg-black aligncenter">  <span class="background dark" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span> <div class="wrap"> <h1 class="text-landing text-shadow">Iceland</h1> <p><code>section[class*="bg-"] > .background.dark</code></p> </div> </section> <section class="bg-black aligncenter">  <span class="background light" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span> <div class="wrap"> <h1 class="text-landing text-shadow">Iceland</h1> <p><code>section[class*="bg-"] > .background.light</code></p> </div> </section> <section class="aligncenter bg-black"> <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>  <div class="wrap"> <h2>.background.anim</h2> </div>  </section> <section class="aligncenter"> <div class="wrap"> <h2><strong>Flexible blocks</strong></h2> <p><code>ul.flexblock</code> = Flexible blocks with auto-fill and equal height.</p> <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>  </section> <section> <div class="wrap"> <div class="content-left"> <h3>Flexible Block = <strong>.flexblock</strong></h3> <p>Auto-fill & Equal height columns:</p> <pre><ul class="flexblock"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul></pre> </div> <div class="content-left"> <h3>Block Link = .flexblock.<strong>blink</strong></h3> <p>Make the whole block clickable:</p> <pre><ul class="flexblock blink"> <li> <a href="#"> Item 1 </a> </li> <li> <a href=""> Item 2 </a> </li> </ul></pre> </div> </div>  </section> <section> <div class="wrap"> <h3>ul.flexblock</h3> <ul class="flexblock"> <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> <hr> <h3>ul.flexblock.blink</h3> <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> </div>  </section> <section> <div class="wrap"> <h3>ul.flexblock.blink.border</h3> <ul class="flexblock border blink"> <li> <a href=""> <h3>Google</h3> 2016.- Google Drive </a> </li> <li><a href=""><strong>Facebook</strong> 2016.- F8 Conference</a></li> <li><a href=""><strong>Airbnb</strong>2015.- Creative Direction</a></li> <li><a href=""><strong>Microsoft</strong> 2015.- Content Strategy</a></li> <li><a href=""><strong>The New York Times</strong>2015.- Recruitment</a></li> <li><a href=""><strong>Netflix</strong> 2014.- Mobile Apps</a></li> <li><a href=""><strong>Instagram</strong>2014.- Identity</a></li> <li><a href=""><strong>Spotify</strong> 2013.- TV Commercials</a></li> </ul> </div>  </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>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/instagram.svg" alt="Instagram"> <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/netflix.svg" alt="Netflix"> <figcaption> <h3>Interfaces</h3> <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p> </figcaption> </figure> </a> </li> </ul> </div>  </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>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/instagram.svg" alt="Instagram"> <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/netflix.svg" alt="Netflix"> <figcaption> <h3>Interfaces</h3> <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p> </figcaption> </figure> </a> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>ul.flexblock.features</h3> <ul class="flexblock features"> <li> <div> <h2> <span>100<sup>%</sup></span> customizable</h2> Well documented. </div> </li> <li> <div> <span><sup>$</sup>48</span> <h2>Extra virgin olive oil</h2> The Spanish caviar. </div> </li> <li> <div> <h2> <svg class="fa-wifi"> <use xlink:href="#fa-wifi"></use> </svg> Ultra-fast Wifi </h2> Simple file sharing. </div> </li> </ul> <hr> <h3>ul.flexblock.features.blink</h3> <ul class="flexblock features blink"> <li> <a href="#"> <div> <span><sup>$</sup>48</span> <h2>Extra virgin olive oil</h2> The Spanish caviar. </div> </a> </li> <li> <a hr