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 Landings: Create your web presence easily</title> <meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use.">    <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 Landings: Create your web presence easily">  <meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use.">  <meta property="og:updated_time" content="2017-01-04T16:54:27">  <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 Landings: Create your web presence easily">  <meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use.">  <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-purple aligncenter"> <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>  <div class="wrap"> <h1 class="text-landing">Landings</h1> <p class="text-symbols">* * * </p> <p><a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides for free"><svg class="fa-github"> <use xlink:href="#fa-github"></use> </svg> WebSlides</a> </p> </div>  </section> <section>  <div class="wrap aligncenter"> <p class="text-subtitle">The interface is your brand:</p> <h2>Create a stylish web presence easily</h2> </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 looks neat, pure. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a>. <strong>Tutorials</strong>: <a href="../demos/components.html" title="WebSlides Components">Components</a> · <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p> </div>  <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%)</h2> </div> </section> </article> </pre> </div>  </div>  </div>  </section> <section> <div class="wrap size-50"> <h3>Let's check out some examples.</h3> <p>All content is for demo purposes only. </p> <hr> <ol class="text-cols"> <li><a target="_blank" href="#slide=5">Welcomes</a></li> <li><a target="_blank" href="#slide=12">Covers</a></li> <li><a target="_blank" href="#slide=21">Abouts & Teams</a></li> <li><a target="_blank" href="#slide=29">Features & Benefits</a></li> <li><a target="_blank" href="#slide=37">Cards</a></li> <li><a target="_blank" href="#slide=41">Metrics & Data</a></li> <li><a target="_blank" href="#slide=46">Pricing & Offers</a></li> <li><a target="_blank" href="#slide=52">Quotes</a></li> <li><a target="_blank" href="#slide=58">Buttons & Badges</a></li> <li><a target="_blank" href="#slide=59">Forms</a></li> <li><a target="_blank" href="#slide=64">SVG Icons</a></li> <li><a target="_blank" href="#slide=65">Logos</a></li> <li><a target="_blank" href="#slide=66">CSS Animations</a></li> <li><a target="_blank" href="#slide=71">Embedding videos, maps, charts...</a></li> </ol> </div>  </section> <section class="aligncenter">  <div class="wrap size-50"> <h2 class="text-landing">Welcomes</h2> <p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br> Make it simple, but significant.</p> <nav class="aligncenter"> <ul> <li><a href="https://twitter.com/webslides">Twitter</a></li> <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li> <li><a href="https://github.com/webslides/webslides">Github</a></li> </ul> </nav> </div> </section> <section class="bg-secondary">  <div class="wrap size-50 frame"> <h2 class="text-serif aligncenter">How to Tell Your Story?</h2> <p class="text-symbols">* * *</p> <p>Stories have the power to change the world. WebSlides helps you write better content, faster. Your slides are there to support your story. Choose words wisely, create meaning with them, keep it simple.</p> </div> </section> <section>  <div class="wrap size-60"> <h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3> <hr> <div class="bg-white shadow"> <ul class="flexblock reasons"> <li> <h2>We're web people.</h2> <p>There're excellent presentation tools out there. WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p> </li> <li> <h2>Work better, faster.</h2> <p>Designers, marketers, and journalists can now focus on the content. Simply <a href="https://webslides.tv/demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p> </li> </ul> </div>  </div>  </section> <section> <div class="wrap size-50"> <h2><strong>Why WebSlides?</strong></h2> <p class="text-intro">There are amazing presentation tools out there.</p> <p>Everyone loves a good story. WebSlides is about <strong>good karma</strong>. This is about telling the story, and sharing it in a beautiful way. How? Making HTML presentations easy. Hypertext, clean code, and beauty as narrative elements.</p> <p class="text-symbols">* * *</p> <p class="aligncenter">Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>. </p> </div>  </section> <section>  <div class="wrap"> <div class="cta-cover"> <h1><strong>HTML Presentations</strong> Made Easy</h1> <p class="alignright"> <a class="button" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides"> <svg class="fa-cloud-download"> <use xlink:href="#fa-cloud-download"></use> </svg> WebSlides </a> <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> · <a href="https://github.com/webslides/webslides" title="Github">Github</a></span> </p> </div> <ul class="flexblock features"> <li> <div> <h2><span>100<sup>%</sup></span> customizable</h2> Clean markup. </div> </li> <li> <div> <h2> <svg class="fa-heart-o"> <use xlink:href="#fa-heart-o"></use> </svg> Good Karma </h2> Just the right features. </div> </li> <li> <div> <h2> <svg class="fa-code"> <use xlink:href="#fa-code"></use> </svg> Prototype faster </h2> Design landings, portfolios... </div> </li> </ul> </div>  </section> <section class="bg-apple"> <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <div class="wrap"> <div class="content-left"> <p class="text-subtitle">Welcomes</p> <h2> <svg class="fa-apple"> <use xlink:href="#fa-apple"></use> </svg> <strong>Call to Action</strong> </h2> <p>Make secure purchases in stores, in apps, and now on the web. The safer way to pay. </p> <p> <a href="#" class="badge-ios" title="iOS App">iOS app</a> <a href="#" class="badge-android" title="Android app">Android app</a> </p> </div> </div>  </section> <section> <div class="wrap"> <div class="grid vertical-align"> <div class="column"> <figure> <img src="../static/images/android.png" alt="Pixel Phone"> </figure> </div>  <div class="column"> <h2> Cari is your best friend </h2> <p class="text-intro">Your life will be more complete.</p> <p>Cari makes connections based on your relationships, uses humor, and is eager to learn more about your world and how to make your life easier to manage.</p> <p> <a href="#" class="badge-ios" title="iOS App">iOS app</a> <a href="#" class="badge-android" title="Android app">Android app</a> </p> </div>  </div>  </div>  </section> <section class="aligncenter">  <span class="background" style="background-image:url('https://source.unsplash.com/wn7Vdl8_yXc/1600x800')"></span> <div class="wrap"> <h2 class="text-landing"><strong>Covers</strong></h2> </div> </section> <section class="bg-black aligncenter">  <span class="background" style="background-image:url('https://source.unsplash.com/Vti8XHv2XjU/')"></span> <div class="wrap"> <h1 class="text-landing text-shadow"><strong>California</strong></h1> <p class="text-shadow"> <svg class="fa-map-marker"> <use xlink:href="#fa-map-marker"></use> </svg> Yosemite National Park. </p> </div> <footer> <div class="wrap"> <p> <span class="alignleft"> <a href="#" title="Instagram"> <img class="whitelogo" src="../static/images/logos/airbnb.svg" alt="Airbnb"> </a></span> <span class="alignright"> <a href="#" class="badge-ios" title="iOS App">iOS app</a> <a href="#" class="badge-android" title="Android app">Android app</a> </span> </p> </div> </footer> </section> <section class="bg-gradient-v"> <span class="background dark" style="background-image:url('https://source.unsplash.com/nxfuA21kNHY/1440x1440')"></span> <div class="wrap size-60"> <p class="text-context">GOOD KARMA</p> <h2>WebSlides is about <strong>telling the story</strong>, and sharing it in a beautiful way.</h2> </div>  </section> <section> <span class="background" style="background-image:url('https://source.unsplash.com/YMOHw3F1Hdk/')"></span> <div class="wrap"> <div class="alignright size-50 bg-trans-dark"> <p class="text-subtitle text-serif">New in London</p> <h3><strong>Hotel Daenerys</strong></h3> <p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p> <p class="aligncenter"><a class="button" href="#">More info</a></p> </div> </div>  </section> <section class="bg-black aligncenter"> <span class="background" style="background-image:url('https://source.unsplash.com/mGYxAWITqMg/')"></span> <div class="wrap"> <p class="text-subtitle">Plan your next trip</p> <h1 class="text-landing text-shadow">Summ.er</h1> <p class="text-intro">The best places at the best price.</p> <p> <a href="#" class="badge-ios" title="iOS App">Install iOS app</a> <a href="#" class="badge-android" title="Android app">Install Android app</a> </p> </div>  </section> <section class="bg-black"> <span class="background" style="background-image:url('https://source.unsplash.com/7waHOTcvcT4/')"></span> <div class="wrap"> <p class="text-data">$975</p> </div>  </section> <section class="bg-black slide-top"> <span class="background" style="background-image:url('https://source.unsplash.com/sK1hW5knKkw/')"></span> <div class="wrap"> <h2 class="text-landing">Living on Mars</h2> <p class="text-context text-intro">Paula Chan, CEO of SpaceY.</p> </div>  <footer> <div class="wrap"> <p> <span class="alignright"><img class="whitelogo" src="../static/images/logos/nyt.svg" alt="The New York Times"></span> </p> </div>  </footer> </section> <section class="slide-top"> <span class="background" style="background-image:url('https://source.unsplash.com/5gn2soeAc40/')"></span> <div class="wrap"> <p class="text-context"><strong>PROBLEM & SOLUTION</strong></p> <h2>The history of the music industry is also the story of the development of technology.</h2> </div>  </section> <section class="bg-black slide-bottom"> <span class="background" style="background-image:url('https://source.unsplash.com/Q1p7bh3SHj8/')"></span> <div class="wrap"> <p class="text-subtitle">Location Intelligence</p> <h2><strong>The application of geographic mapping to data</strong></h2> </div>  </section> <section> <div class="wrap aligncenter"> <h2><strong>Abouts & Teams</strong></h2> </div>  </section> <section class="bg-primary"> <div class="wrap"> <div class="content-left"> <h2>WebSlides help you build a culture of excellence.</h2> </div>  <div class="content-left"> <p>WebSlides is the easiest HTML presentation framework. All content is for demo purposes only. All images are the copyright of their respective owners.</p> </div>  <ul class="flexblock"> <li> <div> <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google"> </div> </li> <li> <div> <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix"> </div> </li> <li> <div> <img class="whitelogo" src="../static/images/logos/microsoft.svg" alt="Microsoft"> </div> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>About/Services/Clients</h3> <p><code>ul.flexblock.blink.border</code></p> <ul class="flexblock blink border"> <li> <a href="#" title="Block Link = .blink">  <div> <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> <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> <h3>Customer Experience</h3> Attitude. Little details. People always remember how you made them feel. </div> </a> </li> <li> <a href="">  <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> <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> <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> <img class="aligncenter graylogo" src="../static/images/logos/google.svg" alt="Google"> Acme hired us to help make the reading experience totally engaging. <code>img.graylogo</code> </div> </a> </li> <li class="bg-blue"> <a href="#" title="Block Link = .blink">  <div> <img class="aligncenter whitelogo" src="../static/images/logos/google.svg" alt="Google"> We worked with Acme to develop recruiting processes. <code>img.whitelogo</code> </div> </a> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>ul.flexblock.steps</h3> <ul class="flexblock steps">  <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>  </section> <section>  <div class="wrap"> <div class="grid"> <div class="column"> <h3 class="text-context"> FAQs</h3> <p>WebSlides is an open source solution by <a href="https://twitter.com/jlantunez">@jlantunez</a>. If you have additional questions, <a href="https://twitter.com/webslides" title="@WebSlides">get in touch!</a></p> </div>  <div class="column"> <h6>Why WebSlides?</h6> <p>There are excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p> <p class="text-symbols">* * *</p> <h6>Is WebSlides a framework?</h6> <p>We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic <a href="../demos/components.html" title="WebSlides Components">structural components</a> and a scalable <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p> </div>  <div class="column"> <h6>What can I do with WebSlides?</h6> <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/components.html#slide=98">background images</a>, <a href="../demos/components.html#slide=101">videos</a>... </p> <p class="text-symbols">* * *</p> <h6>How easy is WebSlides?</h6> <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p> </div>  </div>  </div>  </section> <section> <div class="wrap"> <h2>Why WebSlides?</h2> <p><code>.text-cols (2 columns)</code>.</p> <div class="text-cols"> <p>Everyone loves a good story. WebSlides is about sharing and <strong>good karma</strong>. This is about telling the story, and sharing it in a beautiful way. How? Making HTML presentations easy. Hypertext, clean code, and beauty as narrative elements. </p> <p><strong>WebSlides help you build a culture of innovation and excellence</strong>. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste. When you're really passionate about your job, you can change the world. </p> </div> <ul class="flexblock metrics"> <li> <div> <svg class="fa-twitter"> <use xlink:href="#fa-twitter"></use> </svg> @WebSlides </div> </li> <li> <div> <svg class="fa-github"> <use xlink:href="#fa-github"></use> </svg> Contribute </div> </li> <li> <div> <svg class="fa-phone"> <use xlink:href="#fa-phone"></use> </svg> Call us at 555.345.6789 </div> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>Team</h3> <ul class="flexblock gallery"> <li> <a href="#"> <figure> <img alt="Thumbnail " src="https://source.unsplash.com/E6MWxCjNhYs/800x600"> <figcaption> <h2>Alicia Jiménez</h2> <p>Founder & CEO</p> </figcaption> </figure> </a> </li> <li> <a href="#"> <figure> <img alt="Thumbnail" src="https://source.unsplash.com/6anudmpILw4/800x600"> <figcaption> <h2>Sam Trololovitz</h2> <p>Master of nothing</p> </figcaption> </figure> </a> </li> <li> <a href="#"> <figure> <img alt="Thumbnail" src="https://source.unsplash.com/IFxjDdqK_0U/800x600"> <figcaption> <h2>Erin Gustafson</h2> <p>VP of Design</p> </figcaption> </figure> </a> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>Team</h3> <ul class="flexblock gallery"> <li> <a href="#"> <figure> <img alt="Thumbnail " src="https://source.unsplash.com/IFxjDdqK_0U/800x600"> <div class="overlay"> <h2>Mila Yang</h2> <p>The Boss</p> </div> </figure> </a> </li> <li> <a href="#"> <figure> <img alt="Thumbnail" src="https://source.unsplash.com/zhkTCCmD4xI/800x600"> <div class="overlay"> <h2>Shin Ahmed</h2> <p>CTO</p> </div> </figure> </a> </li> <li> <a href="#"> <figure> <img alt="Thumbnail" src="https://source.unsplash.com/uPGOEbjbVGA/800x600"> <div class="overlay"> <h2>Julia Porter</h2> <p>Digital Designer</p> </div> </figure> </a> </li> </ul> </div>  </section> <section> <div class="wrap aligncenter"> <h2><strong>Features & Benefits</strong></h2> </div>  </section> <section> <div class="wrap"> <h2>Features</h2> <ul class="flexblock features"> <li> <div> <h2> <span>→</span> Simple Navigation </h2> with arrow keys and swipe. </div> </li> <li> <div> <h2> <svg class="fa-link"> <use xlink:href="#fa-link"></use> </svg> Permalinks </h2> Go to a specific slide. </div> </li> <li> <div> <h2> <svg class="fa-clock-o"> <use xlink:href="#fa-clock-o"></use> </svg> Slide Counter </h2> Current/Total number </div> </li> <li> <div> <h2> <span>40<sup>+</sup></span> Beautiful Components </h2> Covers, cards, quotes... </div> </li> <li> <div> <h2> <svg class="fa-text-height"> <use xlink:href="#fa-text-height"></use> </svg> Vertical Rhythm </h2> Use multiples of 8. </div> </li> <li> <div> <h2> <span>500<sup>+</sup></span> SVG Icons </h2> Font Awesome Kit. </div> </li> </ul> </div> </section> <section class="bg-brown"> <div class="wrap"> <div class="grid"> <div class="column"> <svg class="fa-line-bolt large"> <use xlink:href="#fa-bolt"></use> </svg> <h3><strong>Feature 1</strong></h3> <p>Test your web and mobile designs, and quickly incorporate user feedback.</p> </div> <div class="column"> <a href="#" title="Link"> <svg class="fa-heartbeat large"> <use xlink:href="#fa-heartbeat"></use> </svg> <h3><strong>Benefit 2</strong></h3> </a> <p>When you're really passionate about your job, you can change the world.</p> </div> <div class="column"> <span> <svg class="fa-line-chart large"> <use xlink:href="#fa-line-chart"></use> </svg> </span> <h3><strong>Design Better</strong></h3> <p>The most popular elements commonly used for creating landings and portfolios.</p> </div> </div>  </div>  </section> <section> <div class="wrap"> <div class="grid vertical-align"> <div class="column"> <figure><img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"></figure> </div> <div class="column"> <h1> <svg class="fa-apple"> <use xlink:href="#fa-apple"></use> </svg> iPhone 7 </h1> <p class="text-intro">3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align</p> <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p> <p><a class="button" href="http://apple.com/iphone/">apple.com/iphone</a></p> </div> </div>  </div>  </section> <section> <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>  <div class="wrap"> <div class="content-left"> <h2>iPhone 7</h2> <p>A phone should be absolutely simple, beautiful, and magical to use. 3D Touch, 12MP photos, and 4K video.</p> <div class="content-left"> <h3>Benefit 1</h3> <p>The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.</p> </div>  <div class="content-left"> <h3>Benefit 2</h3> <p>The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.</p> </div>  </div>  </div>  </section> <section> <div class="wrap"> <div class="grid vertical-align"> <div class="column"> <figure> <img src="../static/images/android.png" alt="Pixel Phone"> </figure> </div>  <div class="column"> <h2> A Phone by Google </h2> <p class="text-intro">Pixel's camera lets you take brilliant photos in low light, bright light or any light.</p> <ul class="description"> <li> <span class="text-label"> Client: </span> Google (2016). </li> <li> <span class="text-label"> Services: </span> Industrial Design. </li> <li> <span class="text-label"> Website: </span> <a href="https://madeby.google.com/phone/">madeby.google.com/phone</a> </li> </ul> </div>  </div>  </div>  </section> <section> <div class="wrap">  <div class="content-center"> <h3>ul.flexblock.specs</h3> <ul class="flexblock specs"> <li> <div> <h2> <svg class="fa-long-arrow-right"> <use xlink:href="#fa-long-arrow-right"></use> </svg> Navigation with arrow keys and slide counter </h2> Fade transition to all slides. </div> </li> <li> <div> <h2> <svg class="fa-link"> <use xlink:href="#fa-link"></use> </svg> Permalinks </h2> Go to a specific slide. URL: #slide=number </div> </li> <li> <div> <h2> <svg class="fa-text-height"> <use xlink:href="#fa-text-height"></use> </svg> Vertical rhythm </h2> Use multiples of 8. </div> </li> </ul> </div>  </div>  </section> <section> <div class="wrap"> <div class="card-50"> <div class="flex-content"> <ul class="flexblock specs"> <li> <div> <svg class="fa-wifi"> <use xlink:href="#fa-wifi"></use> </svg> <h2>Ultra-Fast WiFi</h2> Faster LTE with the best worldwide roaming. </div> </li> <li> <div> <svg class="fa-battery-full"> <use xlink:href="#fa-battery-full"></use> </svg> <h2>All day battery life</h2> Your battery worries may be over. </div> </li> <li> <div> <svg class="fa-life-ring"> <use xlink:href="#fa-life-ring"></use> </svg> <h2>Lifetime Warranty </h2> We'll fix it or if we can't, we'll replace it. </div> </li> </ul> </div>  <figure> <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"> </figure> </div>  </div>  </section> <section> <div class="wrap aligncenter"> <h2><strong>Cards</strong></h2> </div>  </section> <section> <div class="wrap"> <div class="card-50 bg-white"> <figure> <img src="https://source.unsplash.com/wvVX5xcAYhU/800x600" alt="Man in a motorcycle"> <figcaption> <a href="https://unsplash.com/@hollowaykryan" title="Victoriano Izquierdo"> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Ryan Holloway (Unsplash) </a> </figcaption> </figure>  <div class="flex-content"> <h2> Cards </h2> <p>Price: $64 — <strong>.card-50</strong></p> <ul class="description"> <li> <strong class="text-label">Size:</strong> 24/32. </li> <li><strong class="text-label">Color:</strong> Black.</li> <li><strong class="text-label">Composition:</strong> Cotton 99%; Elastane 1%.</li> </ul> <p> 5-pocket low-rise jeans in washed stretch denim with a button fly and slim legs. The jeans are made partly from recycled cotton. </p> </div>  </div>  </div>  </section> <section> <div class="wrap"> <div class="card-60 bg-white"> <figure> <img src="https://source.unsplash.com/HoevDVvxInw/960x720" alt="Alhambra, Granada"> <figcaption> <a href="https://unsplash.com/@victoriano" title="Victoriano Izquierdo"> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Victoriano Izquierdo (Unsplash) </a> </figcaption> </figure>  <div class="flex-content"> <h2> Cards </h2> <p>Alhambra, Granada — <strong>.card-60</strong></p> <ul class="description"> <li> <strong class="text-label">Area:</strong> 105.000 m<sup>2</sup> </li> <li><strong class="text-label">Date:</strong> S. XIII-XIV.</li> <li><strong class="text-label">Website:</strong> <a href="http://www.alhambra-patronato.es/"> alhambra-patronato.es</a></li> </ul> <p> The palatial city consist of six palaces and two tower-palaces, of which only the Palaces of Comares and of the Lions have been preserved. </p> </div>  </div>  </div>  </section> <section class="fullscreen bg-white"> <div class="card-50"> <figure> <img src="https://source.unsplash.com/ALtNa-uKy3M/" alt="Bonsai"> </figure>  <div class="flex-content"> <h2><strong>Bonsai</strong></h2> <p class="text-intro">Bonsai is a Japanese art form using trees grown in containers — .fullscreen > .card-50.</p> <p>Similar practices exist in other cultures, including the Chinese tradition of penjing from which the art originated, and the miniature living landscapes of Vietnamese hòn non bộ.</p> <p class="text-symbols">* * *</p> </div>  </div> </section> <section> <div class="wrap aligncenter"> <h2><strong>Metrics & Data</strong></h2> </div>  </section> <section> <div class="wrap"> <div class="content-left"> <h2>WebSlides help you build a culture of innovation.</h2> </div>  <div class="content-left"> <p><code>.flexblock.metrics</code> All content is for demo purposes only, to show an example of a live site. All images are the copyright of their respective owners.</p> </div>  <ul class="flexblock metrics"> <li> Founded <span>1986</span> </li> <li> <span>120+</span> Prebuilt Slides </li> <li> <span> <svg class="fa-users"> <use xlink:href="#fa-users"></use> </svg> </span> 32M Downloads </li> <li> <span> <svg class="fa-line-chart"> <use xlink:href="#fa-line-chart"></use> </svg> </span> Revenue: $72M </li> </ul> </div>  </section> <section class="bg-green"> <div class="wrap"> <h3>Metrics</h3>  <ul class="flexblock metrics border"> <li> Founded <span>1972</span> </li> <li> <span> <svg class="fa-users"> <use xlink:href="#fa-users"></use> </svg> </span> 24M Subscribers </li> <li> <span> <svg class="fa-line-chart"> <use xlink:href="#fa-line-chart"></use> </svg> </span> Revenue: $16M </li> <li> Monthly Growth <span>64%</span> </li> <li> <span> <svg class="fa-buildi