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 Portfolios: Showcase your work</title> <meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free.">    <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 is the easiest way to create a portfolio website. It is free, fast, and fun">  <meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun.">  <meta property="og:updated_time" content="2017-01-04T17:26:50">  <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="Create your portfolio with WebSlides">  <meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ 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-primary"> <span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span> <div class="wrap aligncenter"> <h1 class="text-landing">Portfolios</h1> <p class="text-symbols">* * * </p> <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download"> <use xlink:href="#fa-cloud-download"></use> </svg> WebSlides</a> </p> </div> </section> <section>  <div class="wrap aligncenter"> <p class="text-subtitle">Design faster, better.</p> <h2>Create a beautiful portfolio for your work</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 superb. It uses <strong>intuitive markup with popular naming conventions</strong>. 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>Examples</h3> <p>All content is for demo purposes only.</p> <hr> <ol class="text-cols"> <li><a target="_blank" href="#slide=5">Welcomes & Abouts</a></li> <li><a target="_blank" href="#slide=9">Covers & Case Studies</a></li> <li><a target="_blank" href="#slide=16">Metrics & Data</a></li> <li><a target="_blank" href="#slide=22">Services & Clients</a></li> <li><a target="_blank" href="#slide=28">Galleries</a></li> <li><a target="_blank" href="#slide=33">Cards</a></li> <li><a target="_blank" href="#slide=36">Features & Benefits</a></li> <li><a target="_blank" href="#slide=41">CV/Resumé</a></li> <li><a target="_blank" href="#slide=45">Quotes</a></li> <li><a target="_blank" href="#slide=49">SVG Icons</a></li> <li><a target="_blank" href="#slide=50">Logos</a></li> <li><a target="_blank" href="#slide=51">CSS Alignments</a></li> <li><a target="_blank" href="#slide=62">CSS Animations</a></li> <li><a target="_blank" href="#slide=67">Background images</a></li> <li><a target="_blank" href="#slide=70">Embedding videos, maps, charts...</a></li> <li><a target="_blank" href="#slide=76">Typography</a></li> </ol> </div>  </section> <section> <div class="wrap"> <h1>Design <span>for</span> trust</h1> <ul class="flexblock blink border"> <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 class="bg-primary"> <div class="wrap"> <h1>Design <span>for</span> understanding</h1> <ul class="flexblock features fadeInUp"> <li> <div> <h2><span>100<sup>%</sup></span> purpose</h2> Businesses that people love </div> </li> <li> <div> <h2> <svg class="fa-heart-o"> <use xlink:href="#fa-heart-o"></use> </svg> Principles </h2> Useful → Easy → Fast → Beautiful </div> </li> </ul> </div>  </section> <section> <div class="wrap"> <div class="content-left"> <h2>We make interfaces and content strategy.</h2> </div>  <div class="content-left"> <p>We are digital people by nature. When we develop a vision, it is based on knowledge, research and experience. Those images are for demo purposes only.</p> </div>  <ul class="flexblock zoomIn"> <li> <div> <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google"> </div> </li> <li> <div> <img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix"> </div> </li> <li> <div> <img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram"> </div> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>How we work?</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 openness, empathy, usefulness, 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 class="aligncenter">  <span class="background" style="background-image:url('https://source.unsplash.com/xxeAftHHq6E/')"></span> <div class="wrap"> <h2 class="text-landing"><strong>Covers</strong></h2> </div> </section> <section class="bg-black-blue"> <span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span> <div class="wrap size-50"> <p class="text-subtitle">Mercedes-Benz</p> <h2>Defining a new platform for the connected car</h2> </div>  </section> <section>  <span class="background" style="background-image:url('https://source.unsplash.com/yssUhIxbUZA/')"></span> <div class="wrap"> <div class="content-left bg-trans-dark fadeInUp"> <img class="whitelogo" src="../static/images/logos/airbnb.svg" alt="Airbnb"> <hr> <h2><strong>Designing Experiences</strong></h2> <p>Meet locals who share your interests.</p> </div> </div>  </section> <section class="bg-apple"> <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <div class="wrap"> <div class="content-right"> <h2> Redesigning <svg class="fa-apple"> <use xlink:href="#fa-apple"></use> </svg> Pay </h2> <p>Content demo. We've been working with the Acme team over the last three months to build a new app.</p> <p> <a href="#" class="button" title="Case study">Case study &rsaquo;</a> <a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site &rsaquo;</a> </p> </div> </div>  </section> <section class="bg-gradient-white"> <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span> <div class="wrap"> <div class="content-left"> <p class="text-subtitle">Christmas Campaign 2016</p> <h2>A new home for Apple </h2> <p>We established visual branding and photography direction. All content is for demo purposes only. </p> <p> <a href="#" class="button" title="Case study">Case study &rsaquo;</a> </p> </div> </div>  </section> <section> <div class="wrap"> <div class="grid vertical-align"> <div class="column"> <h2> A Phone by Google </h2> <p class="text-intro">We worked closely with the very talented people at Acme and created a new website. Content demo. </p> <ul class="description"> <li> <span class="text-label"> Client: </span> Google (2016) </li> <li> <span class="text-label"> Services: </span> Web 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 class="column"> <figure> <img src="../static/images/android.png" alt="Pixel Phone"> </figure> </div>  </div>  </div>  </section> <section class="aligncenter"> <div class="wrap size-50"> <figure class="browser"> <a href="#" title="Title"><img src="https://webslides.tv/static/images/cover-apple.jpg" alt="Screenshot"></a> </figure> <p>HTML/CSS Browser: <code>.browser</code></p> </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>Everyone loves stories. WebSlides is about good karma. Hypertext, clean code, and beauty as narrative elements. All content is for demo purposes only.</p> </div>  <ul class="flexblock metrics"> <li> Founded <span>1976</span> </li> <li> <span>120+</span> Prebuilt Slides </li> <li> <span> <svg class="fa-users"> <use xlink:href="#fa-users"></use> </svg> </span> 24M Downloads </li> <li> <span> <svg class="fa-line-chart"> <use xlink:href="#fa-line-chart"></use> </svg> </span> Revenue: $16M </li> </ul> </div>  </section> <section class="bg-green"> <div class="wrap">  <ul class="flexblock metrics border"> <li> Founded <span>2032</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-building-o"> <use xlink:href="#fa-building-o"></use> </svg> </span> 8 Offices </li> <li> <span> <svg class="fa-smile-o"> <use xlink:href="#fa-smile-o"></use> </svg> </span> 48 Employees </li> <li> <span> <svg class="fa-usd"> <use xlink:href="#fa-usd"></use> </svg> </span> EBITDA: $2,4M </li> <li> <span> <svg class="fa-university"> <use xlink:href="#fa-university"></use> </svg> </span> Bank: $32M </li> </ul> </div>  </section> <section class="bg-black aligncenter"> <span class="background" style="background-image:url('https://source.unsplash.com/rCOWMC8qf8A/')"></span> <div class="wrap"> <h2 class="text-data">3,456,789</h2> <h3>downloads in first 48 hours </h3> </div>  </section> <section class="bg-black slide-bottom"> <span class="background" style="background-image:url('https://source.unsplash.com/RSOxw9X-suY/')"></span> <div class="wrap"> <div class="content-left"> <p> <svg class="large fa-tree"> <use xlink:href="#fa-tree"></use> </svg> </p> <h2>1,000,000</h2> <h3>We're working to protect up to a million acres of sustainable forest.</h3> </div> </div>  </section> <section class="bg-apple aligncenter">  <div class="wrap"> <h2 class="text-data">$48 Billion</h2> <h3>Revenue in Q2 2019</h3> </div>  </section> <section> <div class="wrap aligncenter"> <h2><strong>Services & Clients</strong></h2> </div>  </section> <section class="bg-black-blue"> <div class="wrap"> <div class="grid"> <div class="column"> <h3> <strong> <svg class="fa-line-chart"> <use xlink:href="#fa-line-chart"></use> </svg> Interfaces </strong> </h3> <p>Design for growth. We've built a team of world-class designers, developers, and managers.</p> </div> <div class="column"> <h3> <svg class="fa-film"> <use xlink:href="#fa-film"></use> </svg> Videos </h3> <p>We connect your audience needs, business goals, and brand values into a strategy. </p> </div> <div class="column"> <h3> <strong> <svg class="fa-users"> <use xlink:href="#fa-users"></use> </svg> Recruiting </strong> </h3> <p>We offer personalized services with deep expertise in design and technology.</p> </div> <div class="column"> <h3> <svg class="fa-graduation-cap"> <use xlink:href="#fa-graduation-cap"></use> </svg> Formation </h3> <p>We train teams to help organizations succeed in the digital age.</p> </div> </div>  <hr> <p><code>.grid > .column</code></p> </div> </section> <section> <div class="wrap"> <h3>Services</h3> <p><code>ul.flexblock</code> (flexible blocks).</p> <ul class="flexblock"> <li>  <div> <h3>Interfaces</h3> <ol> <li>Architecture</li> <li>Design</li> <li>Development</li> </ol> </div> </li> <li>  <div> <h3>Content Strategy</h3> Beautiful and engaging stories that inspires consumers to take action. </div> </li> <li>  <div> <h3>Customer Experience</h3> Attitude. Little details. People always remember how you made them feel. </div> </li> <li>  <div> <h3>Recruitment</h3> We like to help startups by working with them since the beginning. </div> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>Services</h3> <p><code>ul.flexblock.border.blink</code> (.blink = block link)</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"> <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/netflix.svg" alt="Netflix"> <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/microsoft.svg" alt="Microsoft"> <figcaption> <h3>Recruiting</h3> <p>We worked with the design team 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/airbnb.svg" alt="Airbnb"> <figcaption> <h3>Interfaces</h3> <p>We partnered with various Airbnb divisions to create a campaign for Airbnb Trips.</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/netflix.svg" alt="Netflix"> <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/microsoft.svg" alt="Microsoft"> <figcaption> <h3>Recruiting</h3> <p>We worked with the design team 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/airbnb.svg" alt="Airbnb"> <figcaption> <h3>Interfaces</h3> <p>We partnered with various Airbnb divisions to create a campaign for Airbnb Trips.</p> </figcaption> </figure> </a> </li> </ul> </div>  </section> <section> <div class="wrap aligncenter"> <h2><strong>Galleries</strong></h2> </div>  </section> <section> <div class="wrap"> <p><code>.flexblock.gallery</code></p> <hr> <ul class="flexblock gallery"> <li> <a href="../demos/why-webslides.html" title="Why WebSlides?"> <figure> <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png"> <figcaption> <h2>Why WebSlides?</h2> </figcaption> </figure> </a> </li> <li> <a href="../demos/landings.html" title="Landings"> <figure> <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png"> <figcaption> <h2>Landings</h2> </figcaption> </figure> </a> </li> <li> <a href="../demos/portfolios.html" title="Portfolios"> <figure> <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png"> <figcaption> <h2>Portfolios</h2> </figcaption> </figure> </a> </li> <li> <a href="../demos/keynote.html" title="Apple Keynote"> <figure> <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png"> <figcaption> <h2>Apple Keynote</h2> </figcaption> </figure> </a> </li> </ul> </div>  </section> <section> <div class="wrap"> <h3>Team</h3> <p><code>.flexblock.gallery</code></p> <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> <p><code>.flexblock.gallery</code></p> <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"> <p><code>.flexblock.gallery</code></p> <ul class="flexblock gallery"> <li> <a href="#"> <div class="overlay"> <h2>Watchly</h2> <p>Dec 12, 2018</p> </div> <img alt="Thumbnail " src="https://source.unsplash.com/A5-Xr7WyktQ/800x600"> </a> </li> <li> <a href="#"> <div class="overlay"> <h2>Camour</h2> <p>Nov 18, 2017</p> </div> <img alt="Thumbnail " src="https://source.unsplash.com/kt_s46DVgJA/800x600"> </a> </li> </ul> </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/BoBmrZ8epMA/800x600" alt="Mobile Screenshot"> <figcaption> <a href="https://unsplash.com/@anniespratt"> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Annie Spratt (Unsplash) </a> </figcaption> </figure>  <div class="flex-content"> <h2> Travis </h2> <p>.card-50.bg-white</p> <p> Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro. </p> <ul class="description"> <li> <strong class="text-label">Role:</strong> Content Strategy </li> <li><strong class="text-label">Client:</strong> Travis</li> <li><strong class="text-label">Year:</strong> 2017</li> </ul> </div>  </div>  </div>  </section> <section class="fullscreen"> <div class="card-50"> <figure> <img src="https://source.unsplash.com/vCF5sB7QecM/" alt="iWatch"> <figcaption> <a href="https://unsplash.com/@crew" title="By Crew"> <svg class="fa-camera"> <use xlink:href="#fa-camera"></use> </svg> Crew (Unsplash) </a> </figcaption> </figure>  <div class="flex-content"> <h2>Watchly </h2> <p>.fullscreen > .card-50</p> <p class="text-intro">These days it's easy to make interfaces. There are a lot of frameworks out there, but it's still really hard to make a great interface. </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>  </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> <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span> <div class="wrap"> <div class="content-right"> <ul class="flexblock specs"> <li> <div> <svg class="fa-bolt"> <use xlink:href="#fa-bolt"></use> </svg> <h2>Incredibly fast</h2> Just hold your iPhone near the reader. </div> </li> <li> <div> <svg class="fa-globe"> <use xlink:href="#fa-globe"></use> </svg> <h2>Works with all major banks</h2> Apple Pay is accepted in restaurants, hotels... </div> </li> <li> <div> <svg class="fa-lock"> <use xlink:href="#fa-lock"></use> </svg> <h2>The safer way to pay</h2> Your card number is never stored. </div> </li> </ul> </div> </div>  </section> <section> <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>  <div class="wrap"> <div class="content-left"> <h2>Call to action</h2> <p>WebSlides help you build a culture of innovation. Leadership through openness and good taste.</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"> <h2>.grid > .column</h2> <hr> <div class="grid"> <div class="column"> <svg class="fa-desktop large"> <use xlink:href="#fa-desktop"></use> </svg> <h3>Service</h3> <p>We make interfaces and help organizations connect with their audience.</p> </div> <div class="column"> <svg class="fa-globe large"> <use xlink:href="#fa-globe"></use> </svg> <h3>Benefit 2</h3> <p>We are specialists in branding for organizations with a global market in mind.</p> </div> <div class="column"> <h3> <svg class="fa-line-chart"> <use xlink:href="#fa-line-chart"></use> </svg> About 3 </h3> <p>Over the years we've been fortunate to work with some of the most respected brands in the world.</p> </div> <div class="column"> <h3> <svg class="fa-magic"> <use xlink:href="#fa-magic"></use> </svg> Feature 4 </h3> <p>Finally, everything you need to make HTML presentations in a simple way.</p> </div> </div>  </div> </section> <section> <div class="wrap aligncenter"> <h2><strong>CV/Resumé</strong></h2> </div>  </section> <section> <div class="wrap"> <h2>Worked with</h2> <ul class="flexblock border blink"> <li> <a href=""> <h3>Google</h3> 2020.- Google Drive </a> </li> <li><a href=""><strong>Facebook</strong> 2019.- F8 Conference</a></li> <li><a href=""><strong>The New York Times</strong>2017.- Recruitment</a></li> <li><a href=""><strong>Netflix</strong> 2016.- Mobile Apps</a></li> <li><a href=""><strong>Airbnb</strong>2016.- Creative Direction</a></li> <li><a href=""><strong>Microsoft</strong> 2016.- Content Strategy</a></li>