mypapers/webslides/demos/portfolios.html

   1 <!doctype html>
   2 <html lang="en" prefix="og: http://ogp.me/ns#">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1">
   6
   7     <!-- CLEAN MARKUP = GOOD KARMA.
   8       Hi source code lover,
   9
  10       you're a curious person and a fast learner ;)
  11       Let's make something beautiful together. Contribute on Github:
  12       https://github.com/webslides/webslides
  13
  14       Thanks!
  15       -->
  16
  17     <!-- SEO -->
  18     <title>WebSlides Portfolios: Showcase your work</title>
  19     <meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free.">
  20
  21     <!-- URL CANONICAL -->
  22     <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
  23
  24     <!-- Google Fonts -->
  25     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
  26
  27     <!-- CSS Base -->
  28     <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
  29
  30     <!-- Optional - CSS SVG Icons (Font Awesome) -->
  31     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
  32
  33     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
  34
  35     <!-- FACEBOOK -->
  36     <meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
  37     <meta property="og:type" content="article">
  38     <meta property="og:title" content="WebSlides is the easiest way to create a portfolio website. It is free, fast, and fun"> <!-- EDIT -->
  39     <meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT -->
  40     <meta property="og:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT -->
  41     <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
  42
  43     <!-- TWITTER -->
  44     <meta name="twitter:card" content="summary_large_image">
  45     <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
  46     <meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
  47     <meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT -->
  48     <meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ slides ready to use."> <!-- EDIT -->
  49     <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
  50
  51     <!-- FAVICONS -->
  52     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
  53     <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
  54     <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
  55     <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
  56     <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
  57     <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
  58     <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
  59
  60     <!-- Android -->
  61     <meta name="mobile-web-app-capable" content="yes">
  62     <meta name="theme-color" content="#333333">
  63   </head>
  64   <body>
  65     <header role="banner">
  66       <nav role="navigation">
  67         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
  68         <ul>
  69           <li class="github">
  70             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
  71               <svg class="fa-github">
  72                 <use xlink:href="#fa-github"></use>
  73               </svg>
  74               <em>WebSlides</em>
  75             </a>
  76           </li>
  77           <li class="twitter">
  78             <a rel="external" href="https://twitter.com/webslides" title="Twitter">
  79               <svg class="fa-twitter">
  80                 <use xlink:href="#fa-twitter"></use>
  81               </svg>
  82               <em>@WebSlides</em>
  83             </a>
  84           </li>
  85           <!--  <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> -->
  86         </ul>
  87       </nav>
  88     </header>
  89
  90     <main role="main">
  91       <article id="webslides">
  92
  93         <!-- Quick Guide
  94           - Each parent <section> in the <article id="webslides"> element is an individual slide.
  95           - Vertical sliding = <article id="webslides" class="vertical">
  96           - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
  97         -->
  98
  99         <section class="bg-primary">
 100          <span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
 101           <div class="wrap aligncenter">
 102             <h1 class="text-landing">Portfolios</h1>
 103             <p class="text-symbols">* * * </p>
 104             <p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
 105                 <use xlink:href="#fa-cloud-download"></use>
 106               </svg> WebSlides</a>
 107             </p>
 108           </div>
 109         </section>
 110         <section>
 111           <!--.wrap = container (width: 90%) -->
 112           <div class="wrap aligncenter">
 113             <p class="text-subtitle">Design faster, better.</p>
 114             <h2>Create a beautiful portfolio for your work</h2>
 115           </div>
 116           <!-- .end .wrap -->
 117         </section>
 118         <section>
 119           <!--.wrap = container (width: 90%) -->
 120           <div class="wrap">
 121             <div class="grid vertical-align">
 122               <div class="column">
 123                 <h3><strong>WebSlides is really easy</strong></h3>
 124                 <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide. </p>
 125                 <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> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
 126               </div>
 127               <!-- .end .column -->
 128               <div class="column">
 129                 <pre>&lt;article id="webslides"&gt;
 130   <span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
 131   &lt;section&gt;
 132     &lt;h1&gt;Design for trust&lt;/h1&gt;
 133   &lt;/section&gt;
 134   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
 135   &lt;section class="bg-primary"&gt;
 136     &lt;div class="wrap"&gt;
 137       &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
 138     &lt;/div&gt;
 139   &lt;/section&gt;
 140 &lt;/article&gt;
 141 </pre>
 142               </div>
 143               <!-- .end .column -->
 144             </div>
 145             <!-- .end .grid -->
 146           </div>
 147           <!-- .end .wrap -->
 148         </section>
 149         <section>
 150           <div class="wrap size-50">
 151             <h3>Examples</h3>
 152             <p>All content is for demo purposes only.</p>
 153             <hr>
 154             <ol class="text-cols">
 155               <li><a target="_blank" href="#slide=5">Welcomes & Abouts</a></li>
 156               <li><a target="_blank" href="#slide=9">Covers & Case Studies</a></li>
 157               <li><a target="_blank" href="#slide=16">Metrics & Data</a></li>
 158               <li><a target="_blank" href="#slide=22">Services & Clients</a></li>
 159               <li><a target="_blank" href="#slide=28">Galleries</a></li>
 160               <li><a target="_blank" href="#slide=33">Cards</a></li>
 161               <li><a target="_blank" href="#slide=36">Features & Benefits</a></li>
 162               <li><a target="_blank" href="#slide=41">CV/Resumé</a></li>
 163               <li><a target="_blank" href="#slide=45">Quotes</a></li>
 164               <li><a target="_blank" href="#slide=49">SVG Icons</a></li>
 165               <li><a target="_blank" href="#slide=50">Logos</a></li>
 166               <li><a target="_blank" href="#slide=51">CSS Alignments</a></li>
 167               <li><a target="_blank" href="#slide=62">CSS Animations</a></li>
 168               <li><a target="_blank" href="#slide=67">Background images</a></li>
 169               <li><a target="_blank" href="#slide=70">Embedding videos, maps, charts...</a></li>
 170               <li><a target="_blank" href="#slide=76">Typography</a></li>
 171             </ol>
 172           </div>
 173           <!-- .end .wrap -->
 174         </section>
 175         <section>
 176           <div class="wrap">
 177             <h1>Design <span>for</span> trust</h1>
 178             <ul class="flexblock blink border">
 179               <li>
 180                 <a href="#">
 181                   <h2>
 182                     <svg class="fa-bar-chart">
 183                       <use xlink:href="#fa-bar-chart"></use>
 184                     </svg>
 185                     Purpose
 186                   </h2>
 187                   Businesses that people love
 188                 </a>
 189               </li>
 190               <li>
 191                 <a href="">
 192                   <h2>
 193                     <svg class="fa-balance-scale">
 194                       <use xlink:href="#fa-balance-scale"></use>
 195                     </svg>
 196                     Principles
 197                   </h2>
 198                   Ethics of openness and good taste
 199                 </a>
 200               </li>
 201               <li>
 202                 <a href="#">
 203                   <h2>
 204                     <svg class="fa-cog">
 205                       <use xlink:href="#fa-cog"></use>
 206                     </svg>
 207                     Process
 208                   </h2>
 209                   Useful &rarr; Easy &rarr; Fast &rarr; Beautiful
 210                 </a>
 211               </li>
 212             </ul>
 213           </div>
 214           <!-- .end .wrap -->
 215         </section>
 216         <section class="bg-primary">
 217          <div class="wrap">
 218             <h1>Design <span>for</span> understanding</h1>
 219             <ul class="flexblock features fadeInUp">
 220               <li>
 221                 <div>
 222                   <h2><span>100<sup>%</sup></span> purpose</h2>
 223                   Businesses that people love
 224                 </div>
 225               </li>
 226               <li>
 227                 <div>
 228                   <h2>
 229                     <svg class="fa-heart-o">
 230                       <use xlink:href="#fa-heart-o"></use>
 231                     </svg>
 232                     Principles
 233                   </h2>
 234                   Useful &rarr; Easy &rarr; Fast &rarr; Beautiful
 235                 </div>
 236               </li>
 237             </ul>
 238           </div>
 239           <!-- .end .wrap -->
 240         </section>
 241         <section>
 242           <div class="wrap">
 243             <div class="content-left">
 244               <h2>We make interfaces and content strategy.</h2>
 245             </div>
 246             <!-- end .content-left -->
 247             <div class="content-left">
 248               <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>
 249             </div>
 250             <!-- end .content-left -->
 251             <ul class="flexblock zoomIn">
 252               <li>
 253                 <div>
 254                   <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
 255                 </div>
 256               </li>
 257               <li>
 258                 <div>
 259                   <img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
 260                 </div>
 261               </li>
 262               <li>
 263                 <div>
 264                   <img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram">
 265                 </div>
 266               </li>
 267             </ul>
 268           </div>
 269           <!-- .end .wrap -->
 270         </section>
 271         <section>
 272           <div class="wrap">
 273             <h3>How we work?</h3>
 274             <ul class="flexblock steps">
 275               <!-- li>a? Add blink = <ul class="flexblock steps blink">-->
 276               <li>
 277                 <span>
 278                   <svg class="fa-heartbeat">
 279                     <use xlink:href="#fa-heartbeat"></use>
 280                   </svg>
 281                 </span>
 282                 <h2>01. Passion</h2>
 283                 <p>When you're really passionate about your job, you can change the world.</p>
 284               </li>
 285               <li>
 286                 <div class="process step-2"></div>
 287                 <span>
 288                   <svg class="fa-magic">
 289                     <use xlink:href="#fa-magic"></use>
 290                   </svg>
 291                 </span>
 292                 <h2>02. Purpose</h2>
 293                 <p>Why does this business exist? How are you different? Why matters?</p>
 294               </li>
 295               <li>
 296                 <div class="process step-3"></div>
 297                 <span>
 298                   <svg class="fa-balance-scale">
 299                     <use xlink:href="#fa-balance-scale"></use>
 300                   </svg>
 301                 </span>
 302                 <h2>03. Principles</h2>
 303                 <p>Leadership through openness, empathy, usefulness, and good taste.</p>
 304               </li>
 305               <li>
 306                 <div class="process step-4"></div>
 307                 <span>
 308                   <svg class="fa-cog">
 309                     <use xlink:href="#fa-cog"></use>
 310                   </svg>
 311                 </span>
 312                 <h2>04. Process</h2>
 313                 <ul>
 314                   <li>Useful</li>
 315                   <li>Easy</li>
 316                   <li>Fast</li>
 317                   <li>Beautiful</li>
 318                 </ul>
 319               </li>
 320             </ul>
 321           </div>
 322           <!-- .end .wrap -->
 323         </section>
 324         <section class="aligncenter">
 325           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
 326           <span class="background" style="background-image:url('https://source.unsplash.com/xxeAftHHq6E/')"></span>
 327           <div class="wrap">
 328             <h2 class="text-landing"><strong>Covers</strong></h2>
 329           </div>
 330         </section>
 331         <section class="bg-black-blue">
 332           <span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span>
 333           <div class="wrap size-50">
 334             <p class="text-subtitle">Mercedes-Benz</p>
 335             <h2>Defining a new platform for the connected car</h2>
 336           </div>
 337           <!-- .end .wrap -->
 338         </section>
 339         <section>
 340           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
 341           <span class="background" style="background-image:url('https://source.unsplash.com/yssUhIxbUZA/')"></span>
 342           <div class="wrap">
 343             <div class="content-left bg-trans-dark fadeInUp">
 344               <img class="whitelogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
 345               <hr>
 346               <h2><strong>Designing Experiences</strong></h2>
 347               <p>Meet locals who share your interests.</p>
 348             </div>
 349           </div>
 350           <!-- .end .wrap -->
 351         </section>
 352         <section class="bg-apple">
 353           <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 354           <div class="wrap">
 355             <div class="content-right">
 356               <h2>
 357                 Redesigning
 358                 <svg class="fa-apple">
 359                   <use xlink:href="#fa-apple"></use>
 360                 </svg>
 361                 Pay
 362               </h2>
 363               <p>Content demo. We've been working with the Acme team over the last three months to build a new app.</p>
 364               <p>
 365                 <a href="#" class="button" title="Case study">Case study &rsaquo;</a>
 366                 <a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site &rsaquo;</a>
 367               </p>
 368             </div>
 369           </div>
 370           <!-- .end .wrap -->
 371         </section>
 372         <section class="bg-gradient-white">
 373           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
 374           <div class="wrap">
 375             <div class="content-left">
 376               <p class="text-subtitle">Christmas Campaign 2016</p>
 377               <h2>A new home for Apple
 378               </h2>
 379               <p>We established visual branding and photography direction. All content is for demo purposes only. </p>
 380               <p>
 381                 <a href="#" class="button" title="Case study">Case study &rsaquo;</a>
 382               </p>
 383             </div>
 384           </div>
 385           <!-- .end .wrap -->
 386         </section>
 387         <section>
 388           <div class="wrap">
 389             <div class="grid vertical-align">
 390               <div class="column">
 391                 <h2>
 392                   A Phone by Google
 393                 </h2>
 394                 <p class="text-intro">We worked closely with the very talented people at Acme and created a new website. Content demo. </p>
 395                 <ul class="description">
 396                   <li>
 397                     <span class="text-label">
 398                     Client:
 399                     </span>
 400                     Google (2016)
 401                   </li>
 402                   <li>
 403                     <span class="text-label">
 404                     Services:
 405                     </span>
 406                     Web Design
 407                   </li>
 408                   <li>
 409                     <span class="text-label">
 410                     Website:
 411                     </span>
 412                     <a href="https://madeby.google.com/phone/">madeby.google.com/phone</a>
 413                   </li>
 414                 </ul>
 415               </div>
 416               <!-- end .column-->
 417               <div class="column">
 418                 <figure>
 419                   <img src="../static/images/android.png" alt="Pixel Phone">
 420                 </figure>
 421               </div>
 422               <!-- end figure-->
 423             </div>
 424             <!-- end .grid-->
 425           </div>
 426           <!-- end .wrap-->
 427         </section>
 428         <section class="aligncenter">
 429           <div class="wrap size-50">
 430             <figure class="browser">
 431               <a href="#" title="Title"><img src="https://webslides.tv/static/images/cover-apple.jpg" alt="Screenshot"></a>
 432             </figure>
 433             <p>HTML/CSS Browser: <code>.browser</code></p>
 434           </div>
 435           <!-- .end .wrap -->
 436         </section>
 437         <section>
 438           <div class="wrap aligncenter">
 439             <h2><strong>Metrics & Data</strong></h2>
 440           </div>
 441           <!-- .end .wrap -->
 442         </section>
 443         <section>
 444           <div class="wrap">
 445             <div class="content-left">
 446               <h2>WebSlides help you build a culture of innovation.</h2>
 447             </div>
 448             <!-- end .content-left -->
 449             <div class="content-left">
 450               <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>
 451             </div>
 452             <!-- end .content-left -->
 453             <ul class="flexblock metrics">
 454               <li> Founded
 455                 <span>1976</span>
 456               </li>
 457               <li>
 458                 <span>120+</span>
 459                 Prebuilt Slides
 460               </li>
 461               <li>
 462                 <span>
 463                   <svg class="fa-users">
 464                     <use xlink:href="#fa-users"></use>
 465                   </svg>
 466                 </span>
 467                 24M Downloads
 468               </li>
 469               <li>
 470                 <span>
 471                   <svg class="fa-line-chart">
 472                     <use xlink:href="#fa-line-chart"></use>
 473                   </svg>
 474                 </span>
 475                 Revenue: $16M
 476               </li>
 477             </ul>
 478           </div>
 479           <!-- .end .wrap -->
 480         </section>
 481         <section class="bg-green">
 482           <div class="wrap">
 483             <!-- li>a? Add blink (block link) = <ul class="flexblock metrics blink">-->
 484             <ul class="flexblock metrics border">
 485               <li> Founded
 486                 <span>2032</span>
 487               </li>
 488               <li>
 489                 <span>
 490                   <svg class="fa-users">
 491                     <use xlink:href="#fa-users"></use>
 492                   </svg>
 493                 </span>
 494                 24M Subscribers
 495               </li>
 496               <li>
 497                 <span>
 498                   <svg class="fa-line-chart">
 499                     <use xlink:href="#fa-line-chart"></use>
 500                   </svg>
 501                 </span>
 502                 Revenue: $16M
 503               </li>
 504               <li>
 505                 Monthly Growth
 506                 <span>64%</span>
 507               </li>
 508               <li>
 509                 <span>
 510                   <svg class="fa-building-o">
 511                     <use xlink:href="#fa-building-o"></use>
 512                   </svg>
 513                 </span>
 514                 8 Offices
 515               </li>
 516               <li>
 517                 <span>
 518                   <svg class="fa-smile-o">
 519                     <use xlink:href="#fa-smile-o"></use>
 520                   </svg>
 521                 </span>
 522                 48 Employees
 523               </li>
 524               <li>
 525                 <span>
 526                   <svg class="fa-usd">
 527                     <use xlink:href="#fa-usd"></use>
 528                   </svg>
 529                 </span>
 530                 EBITDA: $2,4M
 531               </li>
 532               <li>
 533                 <span>
 534                   <svg class="fa-university">
 535                     <use xlink:href="#fa-university"></use>
 536                   </svg>
 537                 </span>
 538                 Bank: $32M
 539               </li>
 540             </ul>
 541           </div>
 542           <!-- .end .wrap -->
 543         </section>
 544         <section class="bg-black aligncenter">
 545           <span class="background" style="background-image:url('https://source.unsplash.com/rCOWMC8qf8A/')"></span>
 546           <div class="wrap">
 547             <h2 class="text-data">3,456,789</h2>
 548             <h3>downloads in first 48 hours </h3>
 549           </div>
 550           <!-- .end .wrap -->
 551         </section>
 552         <section class="bg-black slide-bottom">
 553           <span class="background" style="background-image:url('https://source.unsplash.com/RSOxw9X-suY/')"></span>
 554           <div class="wrap">
 555             <div class="content-left">
 556               <p>
 557                 <svg class="large fa-tree">
 558                   <use xlink:href="#fa-tree"></use>
 559                 </svg>
 560               </p>
 561               <h2>1,000,000</h2>
 562               <h3>We're working to protect up to a million acres of sustainable forest.</h3>
 563             </div>
 564           </div>
 565           <!-- .end .wrap -->
 566         </section>
 567         <section class="bg-apple aligncenter">
 568           <!--.wrap = container (width: 90%) -->
 569           <div class="wrap">
 570             <h2 class="text-data">$48 Billion</h2>
 571             <h3>Revenue in Q2 2019</h3>
 572           </div>
 573           <!-- .end .wrap -->
 574         </section>
 575         <section>
 576           <div class="wrap aligncenter">
 577             <h2><strong>Services & Clients</strong></h2>
 578           </div>
 579           <!-- .end .wrap -->
 580         </section>
 581         <section class="bg-black-blue">
 582           <div class="wrap">
 583             <div class="grid">
 584               <div class="column">
 585                 <h3>
 586                   <strong>
 587                     <svg class="fa-line-chart">
 588                       <use xlink:href="#fa-line-chart"></use>
 589                     </svg>
 590                     Interfaces
 591                   </strong>
 592                 </h3>
 593                 <p>Design for growth. We've built a team of world-class designers, developers, and managers.</p>
 594               </div>
 595               <div class="column">
 596                 <h3>
 597                   <svg class="fa-film">
 598                     <use xlink:href="#fa-film"></use>
 599                   </svg>
 600                   Videos
 601                 </h3>
 602                 <p>We connect your audience needs, business goals, and brand values into a strategy. </p>
 603               </div>
 604               <div class="column">
 605                 <h3>
 606                   <strong>
 607                     <svg class="fa-users">
 608                       <use xlink:href="#fa-users"></use>
 609                     </svg>
 610                     Recruiting
 611                   </strong>
 612                 </h3>
 613                 <p>We offer personalized services with deep expertise in design and technology.</p>
 614               </div>
 615               <div class="column">
 616                 <h3>
 617                   <svg class="fa-graduation-cap">
 618                     <use xlink:href="#fa-graduation-cap"></use>
 619                   </svg>
 620                   Formation
 621                 </h3>
 622                 <p>We train teams to help organizations succeed in the digital age.</p>
 623               </div>
 624             </div>
 625             <!-- end .grid-->
 626             <hr>
 627             <p><code>.grid > .column</code></p>
 628           </div>
 629         </section>
 630         <section>
 631           <div class="wrap">
 632             <h3>Services</h3>
 633             <p><code>ul.flexblock</code> (flexible blocks).</p>
 634             <ul class="flexblock">
 635               <li>
 636                 <!--div required = padding li or li>a-->
 637                 <div>
 638                   <h3>Interfaces</h3>
 639                   <ol>
 640                     <li>Architecture</li>
 641                     <li>Design</li>
 642                     <li>Development</li>
 643                   </ol>
 644                 </div>
 645               </li>
 646               <li>
 647                 <!--div required = padding li or li>a-->
 648                 <div>
 649                   <h3>Content Strategy</h3>
 650                   Beautiful and engaging stories that inspires consumers to take action.
 651                 </div>
 652               </li>
 653               <li>
 654                 <!--div required = padding li or li>a-->
 655                 <div>
 656                   <h3>Customer Experience</h3>
 657                   Attitude. Little details. People always remember how you made them feel.
 658                 </div>
 659               </li>
 660               <li>
 661                 <!--div required = padding li or li>a-->
 662                 <div>
 663                   <h3>Recruitment</h3>
 664                   We like to help startups by working with them since the beginning.
 665                 </div>
 666               </li>
 667             </ul>
 668           </div>
 669           <!-- .end .wrap -->
 670         </section>
 671         <section>
 672           <div class="wrap">
 673             <h3>Services</h3>
 674             <p><code>ul.flexblock.border.blink</code> (.blink = block link)</p>
 675             <ul class="flexblock blink border">
 676               <li>
 677                 <a href="#" title="Block Link = .blink">
 678                   <!--div required = padding li or li>a-->
 679                   <div>
 680                     <h3>Interfaces</h3>
 681                     <ol>
 682                       <li>Architecture</li>
 683                       <li>Design</li>
 684                       <li>Development</li>
 685                     </ol>
 686                   </div>
 687                 </a>
 688               </li>
 689               <li>
 690                 <a href="#" title="Block Link = .blink">
 691                   <!--div required = padding li or li>a-->
 692                   <div>
 693                     <h3>Content Strategy</h3>
 694                     Beautiful and engaging stories that inspires consumers to take action.
 695                   </div>
 696                 </a>
 697               </li>
 698               <li>
 699                 <a href="#" title="Block Link = .blink">
 700                   <!--div required = padding li or li>a-->
 701                   <div>
 702                     <h3>Customer Experience</h3>
 703                     Attitude. Little details. People always remember how you made them feel.
 704                   </div>
 705                 </a>
 706               </li>
 707               <li>
 708                 <a href="">
 709                   <!--div required = padding li or li>a-->
 710                   <div>
 711                     <h3>Recruitment</h3>
 712                     We like to help startups by working with them since the beginning.
 713                   </div>
 714                 </a>
 715               </li>
 716               <li>
 717                 <a href="#" title="Block Link = .blink">
 718                   <!--div required = padding li or li>a-->
 719                   <div>
 720                     <img class="aligncenter" src="../static/images/logos/google.svg" alt="Google"> Collaboration with the Acme team to design their mobile apps.
 721                   </div>
 722                 </a>
 723               </li>
 724               <li>
 725                 <a href="#" title="Block Link = .blink">
 726                   <!--div required = padding li or li>a-->
 727                   <div>
 728                     <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>
 729                   </div>
 730                 </a>
 731               </li>
 732               <li>
 733                 <a href="#" title="Block Link = .blink">
 734                   <!--div required = padding li or li>a-->
 735                   <div>
 736                     <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>
 737                   </div>
 738                 </a>
 739               </li>
 740               <li class="bg-blue">
 741                 <a href="#" title="Block Link = .blink">
 742                   <!--div required = padding li or li>a-->
 743                   <div>
 744                     <img class="aligncenter whitelogo" src="../static/images/logos/google.svg" alt="Google"> We worked with Acme to develop recruiting processes. <code>img.whitelogo</code>
 745                   </div>
 746                 </a>
 747               </li>
 748             </ul>
 749           </div>
 750           <!-- .end .wrap -->
 751         </section>
 752         <section>
 753           <div class="wrap">
 754             <h2>Clients</h2>
 755             <p><code>ul.flexblock.clients</code></p>
 756             <ul class="flexblock clients">
 757               <li>
 758                 <a href="#" title="Client">
 759                   <figure>
 760                     <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
 761                     <figcaption>
 762                       <h3>Interfaces</h3>
 763                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
 764                     </figcaption>
 765                   </figure>
 766                 </a>
 767               </li>
 768               <li>
 769                 <a href="#" title="Client">
 770                   <figure>
 771                     <img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
 772                     <figcaption>
 773                       <h3>Brand</h3>
 774                       <p>We worked with the UX team on photography for the site <code>img.blacklogo</code></p>
 775                     </figcaption>
 776                   </figure>
 777                 </a>
 778               </li>
 779               <li>
 780                 <a href="#" title="Client">
 781                   <figure>
 782                     <img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
 783                     <figcaption>
 784                       <h3>Recruiting</h3>
 785                       <p>We worked with the design team to develop recruiting processes. <code>img.blacklogo</code></p>
 786                     </figcaption>
 787                   </figure>
 788                 </a>
 789               </li>
 790               <li>
 791                 <a href="#" title="Client">
 792                   <figure>
 793                     <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
 794                     <figcaption>
 795                       <h3>Interfaces</h3>
 796                       <p>We partnered with various Airbnb divisions to create a campaign for Airbnb Trips.</p>
 797                     </figcaption>
 798                   </figure>
 799                 </a>
 800               </li>
 801             </ul>
 802           </div>
 803           <!-- .end .wrap -->
 804         </section>
 805         <section>
 806           <div class="wrap">
 807             <h2>Clients</h2>
 808             <p><code>ul.flexblock.clients.border</code></p>
 809             <ul class="flexblock clients border">
 810               <li>
 811                 <a href="#" title="Client">
 812                   <figure>
 813                     <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
 814                     <figcaption>
 815                       <h3>Interfaces</h3>
 816                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
 817                     </figcaption>
 818                   </figure>
 819                 </a>
 820               </li>
 821               <li>
 822                 <a href="#" title="Client">
 823                   <figure>
 824                     <img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
 825                     <figcaption>
 826                       <h3>Brand</h3>
 827                       <p>We worked with the UX team on photography for the site <code>img.blacklogo</code></p>
 828                     </figcaption>
 829                   </figure>
 830                 </a>
 831               </li>
 832               <li>
 833                 <a href="#" title="Client">
 834                   <figure>
 835                     <img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
 836                     <figcaption>
 837                       <h3>Recruiting</h3>
 838                       <p>We worked with the design team to develop recruiting processes. <code>img.blacklogo</code></p>
 839                     </figcaption>
 840                   </figure>
 841                 </a>
 842               </li>
 843               <li>
 844                 <a href="#" title="Client">
 845                   <figure>
 846                     <img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
 847                     <figcaption>
 848                       <h3>Interfaces</h3>
 849                       <p>We partnered with various Airbnb divisions to create a campaign for Airbnb Trips.</p>
 850                     </figcaption>
 851                   </figure>
 852                 </a>
 853               </li>
 854             </ul>
 855           </div>
 856           <!-- .end .wrap -->
 857         </section>
 858         <section>
 859           <div class="wrap aligncenter">
 860             <h2><strong>Galleries</strong></h2>
 861           </div>
 862           <!-- .end .wrap -->
 863         </section>
 864         <section>
 865           <div class="wrap">
 866             <p><code>.flexblock.gallery</code></p>
 867             <hr>
 868             <ul class="flexblock gallery">
 869               <li>
 870                 <a href="../demos/why-webslides.html" title="Why WebSlides?">
 871                   <figure>
 872                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
 873                     <figcaption>
 874                       <h2>Why WebSlides?</h2>
 875                     </figcaption>
 876                   </figure>
 877                 </a>
 878               </li>
 879               <li>
 880                 <a href="../demos/landings.html" title="Landings">
 881                   <figure>
 882                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
 883                     <figcaption>
 884                       <h2>Landings</h2>
 885                     </figcaption>
 886                   </figure>
 887                 </a>
 888               </li>
 889               <li>
 890                 <a href="../demos/portfolios.html" title="Portfolios">
 891                   <figure>
 892                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
 893                     <figcaption>
 894                       <h2>Portfolios</h2>
 895                     </figcaption>
 896                   </figure>
 897                 </a>
 898               </li>
 899               <li>
 900                 <a href="../demos/keynote.html" title="Apple Keynote">
 901                   <figure>
 902                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
 903                     <figcaption>
 904                       <h2>Apple Keynote</h2>
 905                     </figcaption>
 906                   </figure>
 907                 </a>
 908               </li>
 909             </ul>
 910           </div>
 911           <!-- .end .wrap -->
 912         </section>
 913         <section>
 914           <div class="wrap">
 915             <h3>Team</h3>
 916             <p><code>.flexblock.gallery</code></p>
 917             <ul class="flexblock gallery">
 918               <li>
 919                 <a href="#">
 920                   <figure>
 921                     <img alt="Thumbnail " src="https://source.unsplash.com/E6MWxCjNhYs/800x600">
 922                     <figcaption>
 923                       <h2>Alicia Jiménez</h2>
 924                       <p>Founder & CEO</p>
 925                     </figcaption>
 926                   </figure>
 927                 </a>
 928               </li>
 929               <li>
 930                 <a href="#">
 931                   <figure>
 932                     <img alt="Thumbnail" src="https://source.unsplash.com/6anudmpILw4/800x600">
 933                     <figcaption>
 934                       <h2>Sam Trololovitz</h2>
 935                       <p>Master of nothing</p>
 936                     </figcaption>
 937                   </figure>
 938                 </a>
 939               </li>
 940               <li>
 941                 <a href="#">
 942                   <figure>
 943                     <img alt="Thumbnail" src="https://source.unsplash.com/IFxjDdqK_0U/800x600">
 944                     <figcaption>
 945                       <h2>Erin Gustafson</h2>
 946                       <p>VP of Design</p>
 947                     </figcaption>
 948                   </figure>
 949                 </a>
 950               </li>
 951             </ul>
 952           </div>
 953           <!-- .end .wrap -->
 954         </section>
 955         <section>
 956           <div class="wrap">
 957             <h3>Team</h3>
 958             <p><code>.flexblock.gallery</code></p>
 959             <ul class="flexblock gallery">
 960               <li>
 961                 <a href="#">
 962                   <figure>
 963                     <img alt="Thumbnail " src="https://source.unsplash.com/IFxjDdqK_0U/800x600">
 964                     <div class="overlay">
 965                       <h2>Mila Yang</h2>
 966                       <p>The Boss</p>
 967                     </div>
 968                   </figure>
 969                 </a>
 970               </li>
 971               <li>
 972                 <a href="#">
 973                   <figure>
 974                     <img alt="Thumbnail" src="https://source.unsplash.com/zhkTCCmD4xI/800x600">
 975                     <div class="overlay">
 976                       <h2>Shin Ahmed</h2>
 977                       <p>CTO</p>
 978                     </div>
 979                   </figure>
 980                 </a>
 981               </li>
 982               <li>
 983                 <a href="#">
 984                   <figure>
 985                     <img alt="Thumbnail" src="https://source.unsplash.com/uPGOEbjbVGA/800x600">
 986                     <div class="overlay">
 987                       <h2>Julia Porter</h2>
 988                       <p>Digital Designer</p>
 989                     </div>
 990                   </figure>
 991                 </a>
 992               </li>
 993             </ul>
 994           </div>
 995           <!-- .end .wrap -->
 996         </section>
 997         <section>
 998           <div class="wrap">
 999             <p><code>.flexblock.gallery</code></p>
1000             <ul class="flexblock gallery">
1001               <li>
1002                 <a href="#">
1003                   <div class="overlay">
1004                     <h2>Watchly</h2>
1005                     <p>Dec 12, 2018</p>
1006                   </div>
1007                   <img alt="Thumbnail " src="https://source.unsplash.com/A5-Xr7WyktQ/800x600">
1008                 </a>
1009               </li>
1010               <li>
1011                 <a href="#">
1012                   <div class="overlay">
1013                     <h2>Camour</h2>
1014                     <p>Nov 18, 2017</p>
1015                   </div>
1016                   <img alt="Thumbnail " src="https://source.unsplash.com/kt_s46DVgJA/800x600">
1017                 </a>
1018               </li>
1019             </ul>
1020           </div>
1021           <!-- .end .wrap -->
1022         </section>
1023         <section>
1024           <div class="wrap aligncenter">
1025             <h2><strong>Cards</strong></h2>
1026           </div>
1027           <!-- .end .wrap -->
1028         </section>
1029         <section>
1030           <div class="wrap">
1031             <div class="card-50 bg-white">
1032               <figure>
1033                 <img src="https://source.unsplash.com/BoBmrZ8epMA/800x600" alt="Mobile Screenshot">
1034                 <figcaption>
1035                   <a href="https://unsplash.com/@anniespratt">
1036                     <svg class="fa-camera">
1037                       <use xlink:href="#fa-camera"></use>
1038                     </svg>
1039                     Annie Spratt (Unsplash)
1040                   </a>
1041                 </figcaption>
1042               </figure>
1043               <!-- end figure-->
1044               <div class="flex-content">
1045                 <h2>
1046                   Travis
1047                 </h2>
1048                 <p>.card-50.bg-white</p>
1049                 <p>
1050                   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.
1051                 </p>
1052                 <ul class="description">
1053                   <li>
1054                     <strong class="text-label">Role:</strong> Content Strategy
1055                   </li>
1056                   <li><strong class="text-label">Client:</strong> Travis</li>
1057                   <li><strong class="text-label">Year:</strong> 2017</li>
1058                 </ul>
1059               </div>
1060               <!-- end .flex-content-->
1061             </div>
1062             <!-- end .card-60-->
1063           </div>
1064           <!-- .end .wrap -->
1065         </section>
1066         <section class="fullscreen">
1067           <div class="card-50">
1068             <figure>
1069               <img src="https://source.unsplash.com/vCF5sB7QecM/" alt="iWatch">
1070               <figcaption>
1071                 <a href="https://unsplash.com/@crew" title="By Crew">
1072                   <svg class="fa-camera">
1073                     <use xlink:href="#fa-camera"></use>
1074                   </svg>
1075                   Crew (Unsplash)
1076                 </a>
1077               </figcaption>
1078             </figure>
1079             <!-- end figure-->
1080             <div class="flex-content">
1081               <h2>Watchly
1082               </h2>
1083               <p>.fullscreen > .card-50</p>
1084               <p class="text-intro">These days it's easy to make interfaces. There are a lot of
1085                 frameworks out there, but it's still really hard to make a great interface.
1086               </p>
1087               <ul class="description">
1088                 <li>
1089                   <strong class="text-label">Role:</strong> Frontend
1090                 </li>
1091                 <li><strong class="text-label">Client:</strong> Acme</li>
1092                 <li><strong class="text-label">Year:</strong> 2018</li>
1093               </ul>
1094             </div>
1095             <!-- end .flex-content-->
1096           </div>
1097         </section>
1098         <section>
1099           <div class="wrap aligncenter">
1100             <h2><strong>Features & Benefits</strong></h2>
1101           </div>
1102           <!-- .end .wrap -->
1103         </section>
1104         <section>
1105           <div class="wrap">
1106             <h2>Features</h2>
1107             <ul class="flexblock features">
1108               <li>
1109                 <div>
1110                   <h2>
1111                     <span>&rarr;</span>
1112                     Simple Navigation
1113                   </h2>
1114                   with arrow keys and swipe.
1115                 </div>
1116               </li>
1117               <li>
1118                 <div>
1119                   <h2>
1120                     <svg class="fa-link">
1121                       <use xlink:href="#fa-link"></use>
1122                     </svg>
1123                     Permalinks
1124                   </h2>
1125                   Go to a specific slide.
1126                 </div>
1127               </li>
1128               <li>
1129                 <div>
1130                   <h2>
1131                     <svg class="fa-clock-o">
1132                       <use xlink:href="#fa-clock-o"></use>
1133                     </svg>
1134                     Slide Counter
1135                   </h2>
1136                   Current/Total number
1137                 </div>
1138               </li>
1139               <li>
1140                 <div>
1141                   <h2>
1142                     <span>40<sup>+</sup></span>
1143                     Beautiful Components
1144                   </h2>
1145                   Covers, cards, quotes...
1146                 </div>
1147               </li>
1148               <li>
1149                 <div>
1150                   <h2>
1151                     <svg class="fa-text-height">
1152                       <use xlink:href="#fa-text-height"></use>
1153                     </svg>
1154                     Vertical Rhythm
1155                   </h2>
1156                   Use multiples of 8.
1157                 </div>
1158               </li>
1159               <li>
1160                 <div>
1161                   <h2>
1162                     <span>500<sup>+</sup></span>
1163                     SVG Icons
1164                   </h2>
1165                   Font Awesome Kit.
1166                 </div>
1167               </li>
1168             </ul>
1169           </div>
1170         </section>
1171         <section>
1172           <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
1173           <div class="wrap">
1174             <div class="content-right">
1175               <ul class="flexblock specs">
1176                 <li>
1177                   <div>
1178                     <svg class="fa-bolt">
1179                       <use xlink:href="#fa-bolt"></use>
1180                     </svg>
1181                     <h2>Incredibly fast</h2>
1182                     Just hold your iPhone near the reader.
1183                   </div>
1184                 </li>
1185                 <li>
1186                   <div>
1187                     <svg class="fa-globe">
1188                       <use xlink:href="#fa-globe"></use>
1189                     </svg>
1190                     <h2>Works with all major banks</h2>
1191                     Apple Pay is accepted in restaurants, hotels...
1192                   </div>
1193                 </li>
1194                 <li>
1195                   <div>
1196                     <svg class="fa-lock">
1197                       <use xlink:href="#fa-lock"></use>
1198                     </svg>
1199                     <h2>The safer way to pay</h2>
1200                     Your card number is never stored.
1201                   </div>
1202                 </li>
1203               </ul>
1204             </div>
1205           </div>
1206           <!-- .end .wrap -->
1207         </section>
1208         <section>
1209           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
1210           <!--.wrap = container (width: 90%) -->
1211           <div class="wrap">
1212             <div class="content-left">
1213               <h2>Call to action</h2>
1214               <p>WebSlides help you build a culture of innovation. Leadership through openness and good taste.</p>
1215               <div class="content-left">
1216                 <h3>Benefit 1</h3>
1217                 <p>The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.</p>
1218               </div>
1219               <!-- .end .content-left -->
1220               <div class="content-left">
1221                 <h3>Benefit 2</h3>
1222                 <p>The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.</p>
1223               </div>
1224               <!-- .end .content-left -->
1225             </div>
1226             <!-- .end .content-left -->
1227           </div>
1228           <!-- .end .wrap -->
1229         </section>
1230         <section>
1231           <div class="wrap">
1232             <h2>.grid > .column</h2>
1233             <hr>
1234             <div class="grid">
1235               <div class="column">
1236                 <svg class="fa-desktop large">
1237                   <use xlink:href="#fa-desktop"></use>
1238                 </svg>
1239                 <h3>Service</h3>
1240                 <p>We make interfaces and help organizations connect with their audience.</p>
1241               </div>
1242               <div class="column">
1243                 <svg class="fa-globe large">
1244                   <use xlink:href="#fa-globe"></use>
1245                 </svg>
1246                 <h3>Benefit 2</h3>
1247                 <p>We are specialists in branding for organizations with a global market in mind.</p>
1248               </div>
1249               <div class="column">
1250                 <h3>
1251                   <svg class="fa-line-chart">
1252                     <use xlink:href="#fa-line-chart"></use>
1253                   </svg>
1254                   About 3
1255                 </h3>
1256                 <p>Over the years we've been fortunate to work with some of the most respected brands in the world.</p>
1257               </div>
1258               <div class="column">
1259                 <h3>
1260                   <svg class="fa-magic">
1261                     <use xlink:href="#fa-magic"></use>
1262                   </svg>
1263                   Feature 4
1264                 </h3>
1265                 <p>Finally, everything you need to make HTML presentations in a simple way.</p>
1266               </div>
1267             </div>
1268             <!-- end .grid-->
1269           </div>
1270         </section>
1271         <section>
1272           <div class="wrap aligncenter">
1273             <h2><strong>CV/Resumé</strong></h2>
1274           </div>
1275           <!-- .end .wrap -->
1276         </section>
1277         <section>
1278           <div class="wrap">
1279             <h2>Worked with</h2>
1280             <ul class="flexblock border blink">
1281               <li>
1282                 <a href="">
1283                   <h3>Google</h3>
1284                   2020.- Google Drive
1285                 </a>
1286               </li>
1287               <li><a href=""><strong>Facebook</strong> 2019.- F8 Conference</a></li>
1288               <li><a href=""><strong>The New York Times</strong>2017.- Recruitment</a></li>
1289               <li><a href=""><strong>Netflix</strong> 2016.- Mobile Apps</a></li>
1290               <li><a href=""><strong>Airbnb</strong>2016.- Creative Direction</a></li>
1291               <li><a href=""><strong>Microsoft</strong> 2016.- Content Strategy</a></li>
1292               <li><a href=""><strong>Instagram</strong>2015.- Identity</a></li>
1293               <li><a href=""><strong>Spotify</strong> 2014.- TV Commercials</a></li>
1294             </ul>
1295           </div>
1296           <!-- .end .wrap -->
1297         </section>
1298         <section>
1299           <div class="wrap">
1300             <ul class="work">
1301               <li class="work-label">
1302                 <p class="work-work">Work</p>
1303                 <p class="work-client">Client</p>
1304                 <p class="work-services">Services</p>
1305                 <p class="work-date">Year</p>
1306               </li>
1307               <li>
1308                 <a href="#" rel="external">
1309                   <p class="work-work"><span>Redesign of Netflix</span></p>
1310                   <p class="work-client"><span>Netflix</span></p>
1311                   <p class="work-services"><span>Frontend</span></p>
1312                   <p class="work-date"><span>2015-2016</span></p>
1313                 </a>
1314               </li>
1315               <li>
1316                 <a href="#" rel="external">
1317                   <p class="work-work"><span>Airbnb TV Commercials</span></p>
1318                   <p class="work-client"><span>Airbnb</span></p>
1319                   <p class="work-services"><span>Video, Storytelling</span></p>
1320                   <p class="work-date"><span>2015</span></p>
1321                 </a>
1322               </li>
1323               <li>
1324                 <a href="#" rel="external">
1325                   <p class="work-work"><span>Tesla Software</span></p>
1326                   <p class="work-client"><span>Tesla Motors</span></p>
1327                   <p class="work-services"><span>Visual Design</span></p>
1328                   <p class="work-date"><span>2014</span></p>
1329                 </a>
1330               </li>
1331             </ul>
1332           </div>
1333           <!-- .end .wrap -->
1334         </section>
1335         <section>
1336           <div class="wrap">
1337             <ul class="flexblock activity">
1338               <li>
1339                 <a href="#" title="VP of Designer at ACME">
1340                   <p class="year">
1341                     2016
1342                   </p>
1343                   <p class="title">
1344                     VP of Designer at ACME
1345                   </p>
1346                   <p class="summary">
1347                     This is a job description for the VP of Design role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
1348                   </p>
1349                 </a>
1350               </li>
1351               <li>
1352                 <a href="#" title="Co-Founder of Delta">
1353                   <p class="year">
1354                     2015
1355                   </p>
1356                   <p class="title">
1357                     Co-Founder of Delta
1358                   </p>
1359                   <p class="summary">
1360                     The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
1361                   </p>
1362                 </a>
1363               </li>
1364               <li>
1365                 <a href="#" title="Co-Founder of GAMMA">
1366                   <p class="year">
1367                     2013
1368                   </p>
1369                   <p class="title">
1370                     Interaction Designer at GAMMA
1371                   </p>
1372                   <p class="summary">
1373                     Authority is distributed, though not evenly or permanently. Keep it simple. Be concise. 2-3 lines recommended.
1374                   </p>
1375                 </a>
1376               </li>
1377             </ul>
1378           </div>
1379           <!-- .end .wrap -->
1380         </section>
1381         <section>
1382           <div class="wrap aligncenter">
1383             <h2><strong>Quotes</strong></h2>
1384           </div>
1385           <!-- .end .wrap -->
1386         </section>
1387         <section>
1388           <!--.wrap = container (width: 90%) -->
1389           <div class="wrap size-50 aligncenter">
1390               <h2><strong>Why WebSlides?</strong></h2>
1391               <blockquote>
1392                 <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
1393                 <p><cite> <img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite></p>
1394               </blockquote>
1395           </div>
1396           <!-- .end .wrap -->
1397         </section>
1398         <section class="bg-black-blue">
1399           <!--.wrap = container (width: 90%) -->
1400           <div class="wrap">
1401             <blockquote class="text-quote">
1402               <p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p>
1403               <p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p>
1404             </blockquote>
1405           </div>
1406           <!-- .end .wrap -->
1407         </section>
1408         <section>
1409           <span class="background-left-bottom" style="background-image:url('https://webslides.tv/static/images/satya.png')"></span>
1410           <div class="wrap">
1411             <div class="content-right">
1412               <blockquote>
1413                 <p>"There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective."</p>
1414                 <p><cite>Satya Nadella, CEO of Microsoft.</cite></p>
1415               </blockquote>
1416             </div>
1417           </div>
1418           <!-- .end .wrap -->
1419         </section>
1420         <section>
1421           <div class="wrap size-50">
1422             <p class="text-subtitle">Optional &middot; 500+ icons</p>
1423             <h2>
1424               <a href="http://fontawesome.io/icons/">
1425                 <svg class="fa-flag">
1426                   <use xlink:href="#fa-flag"></use>
1427                 </svg>
1428                 Font Awesome
1429               </a>
1430               as SVG icons
1431             </h2>
1432             <pre>&lt;svg class="fa-flag"&gt;
1433         &lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
1434 &lt;/svg&gt;</pre>
1435             <p>How to change icons?</p>
1436             <ol class="text-cols">
1437               <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
1438               <li>Create a free account.</li>
1439               <li>Select new icons.</li>
1440               <li>Publish as SVG sprite.</li>
1441               <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
1442             </ol>
1443           </div>
1444           <!-- .end .wrap -->
1445         </section>
1446         <section>
1447           <div class="wrap">
1448             <h2>Transparent Logos</h2>
1449             <p>
1450               Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
1451             </p>
1452             <hr>
1453             <ul class="flexblock">
1454               <li>
1455                 <div>
1456                   <img src="../static/images/logos/google.svg" alt="Google">
1457                   <p><strong>Height recommended</strong>: 48px</p>
1458                 </div>
1459               </li>
1460               <li>
1461                 <div>
1462                   <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
1463                   <code>img.blacklogo</code>
1464                 </div>
1465               </li>
1466               <li>
1467                 <div>
1468                   <img class="graylogo" src="../static/images/logos/google.svg" alt="Google">
1469                   <code>img.graylogo</code>
1470                 </div>
1471               </li>
1472               <li class="bg-green">
1473                 <div>
1474                   <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
1475                   <code>img.whitelogo</code>
1476                 </div>
1477               </li>
1478             </ul>
1479           </div>
1480           <!-- .end .wrap -->
1481         </section>
1482         <section>
1483           <div class="wrap aligncenter">
1484             <h2><strong>CSS Alignments</strong></h2>
1485           </div>
1486           <!-- .end .wrap -->
1487         </section>
1488         <section>
1489           <header>
1490             <!--.wrap o <nav> = container 1200px -->
1491             <div class="wrap">
1492               <p class="logo"><a href="#" title="Logo">Logo</a> <span class="alignright">.alignright</span></p>
1493             </div>
1494           </header>
1495           <div class="aligncenter fadeInUp">
1496             <h2>Simple CSS Alignments</h2>
1497             <p>Put content wherever you want.</p>
1498           </div>
1499           <footer>
1500             <div class="wrap">
1501               <p>
1502                 <span class="alignleft">
1503                 Footer
1504                 </span>
1505                 <span class="alignright">
1506                   <a href="#" title="Twitter">
1507                     <svg class="fa-twitter">
1508                       <use xlink:href="#fa-twitter"></use>
1509                     </svg>
1510                     @username
1511                   </a>
1512                 </span>
1513               </p>
1514             </div>
1515           </footer>
1516         </section>
1517         <section class="slide-top">
1518           <div class="wrap">
1519             <div class="content-left">
1520               <h3>1/9 left top</h3>
1521               <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
1522               <p><code>.slide-top and .content-left</code></p>
1523             </div>
1524           </div>
1525           <!-- .end .wrap -->
1526         </section>
1527         <section class="slide-top">
1528           <div class="wrap">
1529             <div class="content-center">
1530               <h3>2/9 center top</h3>
1531               <p>Beauty is a concept based on aesthetics which is quite subjective and cultural.</p>
1532               <p><code>.slide-top and .content-center</code></p>
1533             </div>
1534           </div>
1535           <!-- .end .wrap -->
1536         </section>
1537         <section class="slide-top">
1538           <div class="wrap">
1539             <div class="content-right">
1540               <h3>3/9 right top</h3>
1541               <p>Harmony and admiration are two universal elements which guide us in order to consider something beautiful.</p>
1542               <p><code>.slide-top and .content-right</code></p>
1543             </div>
1544           </div>
1545           <!-- .end .wrap -->
1546         </section>
1547         <section>
1548           <div class="wrap">
1549             <div class="content-left">
1550               <h3>4/9 left center</h3>
1551               <p>The term interaction design was first coined by Bill Moggridge and Bill Verplank in the mid-1980s.</p>
1552               <p><code>.content-left</code></p>
1553             </div>
1554           </div>
1555           <!-- .end .wrap -->
1556         </section>
1557         <section>
1558           <div class="wrap">
1559             <div class="content-center">
1560               <h3>5/9 center</h3>
1561               <p>Emotional and pleasure theories exist to explain people's responses to the use of interactive products.</p>
1562               <p><code>.content-center</code></p>
1563             </div>
1564           </div>
1565           <!-- .end .wrap -->
1566         </section>
1567         <section>
1568           <div class="wrap">
1569             <div class="content-right">
1570               <h3>6/9 right center</h3>
1571               <p>Simplicity is a major concern in interaction design. The aim is clarity.</p>
1572               <p><code>.content-right</code></p>
1573             </div>
1574           </div>
1575           <!-- .end .wrap -->
1576         </section>
1577         <section class="slide-bottom">
1578           <div class="wrap">
1579             <div class="content-left">
1580               <h3>7/9 left bottom</h3>
1581               <p>Information architecture is the structural design of shared information environments.</p>
1582               <p><code>.slide-bottom</code> and <code>.content-left</code></p>
1583             </div>
1584           </div>
1585           <!-- .end .wrap -->
1586         </section>
1587         <section class="slide-bottom">
1588           <div class="wrap">
1589             <div class="content-center">
1590               <h3>8/9 center bottom</h3>
1591               <p>The "a-ha moment" is the moment where there is suddenly a clear forward path.</p>
1592               <p><code>.slide-bottom</code> and <code>.content-center</code></p>
1593             </div>
1594           </div>
1595           <!-- .end .wrap -->
1596         </section>
1597         <section class="slide-bottom">
1598           <div class="wrap">
1599             <div class="content-right">
1600               <h3>9/9 right bottom</h3>
1601               <p>Philosophy of language seeks to understand the relationship between language and reality.</p>
1602               <p><code>.slide-bottom</code> and <code>.content-right</code></p>
1603             </div>
1604           </div>
1605           <!-- .end .wrap -->
1606         </section>
1607         <section>
1608           <div class="wrap size-50">
1609             <h2>CSS Animations</h2>
1610             <p>Fadein transition to all slides.</p>
1611             <pre>&lt;article id="webslides"&gt;
1612   &lt;section&gt;
1613     &lt;div class="wrap fadeInUp"&gt;
1614       &lt;h1&gt;Slide&lt;/h1&gt;
1615     &lt;/div&gt;
1616   &lt;/section&gt;
1617 &lt;/article&gt;</pre>
1618             <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
1619           </div>
1620           <!-- .end .wrap -->
1621         </section>
1622         <section>
1623           <div class="wrap aligncenter fadeInUp">
1624             <h2>Slide</h2>
1625             <p>.fadeInUp</p>
1626           </div>
1627           <!-- .end .wrap -->
1628         </section>
1629         <section>
1630           <div class="wrap size-40 zoomIn aligncenter">
1631             <figure>
1632               <img src="../static/images/android.png" alt="Pixel Phone">
1633             </figure>
1634             <p>.zoomIn</p>
1635           </div>
1636           <!-- .end .wrap -->
1637         </section>
1638         <section>
1639           <div class="wrap size-50">
1640             <h3>.slow (animation duration)</h3>
1641             <pre>&lt;section&gt;
1642       &lt;div class="wrap"&gt;
1643         &lt;h2 class="fadeIn slow"&gt;Slide 1&lt;/h2&gt;
1644       &lt;/div&gt;
1645 &lt;/section&gt;</pre>
1646           </div>
1647           <!-- .end .wrap -->
1648         </section>
1649         <section>
1650           <div class="wrap aligncenter">
1651             <h2 class="fadeIn slow">h2.fadeIn.slow</h2>
1652           </div>
1653           <!-- .end .wrap -->
1654         </section>
1655         <section>
1656           <div class="wrap aligncenter">
1657             <h2><strong>Background Images</strong></h2>
1658           </div>
1659           <!-- .end .wrap -->
1660         </section>
1661         <section>
1662           <span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/)"></span>
1663           <div class="wrap size-50">
1664             <h3>
1665               <svg class="fa-camera">
1666                 <use xlink:href="#fa-camera"></use>
1667               </svg>
1668               Unsplash = Fullscreen Backgrounds
1669             </h3>
1670             <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
1671             <pre>&lt;section&gt;
1672   &lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt;
1673   &lt;div class="wrap"&gt;
1674     &lt;h1&gt;Slide&lt;/h1&gt;
1675   &lt;/div&gt;
1676 &lt;/section&gt;</pre>
1677     <p>
1678       <svg class="fa-info">
1679         <use xlink:href="#fa-info"></use>
1680       </svg>
1681       Position .background outside of .wrap container.
1682     </p>
1683           </div>
1684           <!-- .end .wrap -->
1685         </section>
1686         <section>
1687           <div class="wrap">
1688             <h3>15 Different Backgrounds</h3>
1689               <ul class="text-cols">
1690                 <li><strong>.background</strong> (cover)</li>
1691                 <li>.background-top (cover)</li>
1692                 <li>.background-bottom (cover)</li>
1693                 <li>.background.light</li>
1694                 <li>.background.dark</li>
1695                 <li>.background-center</li>
1696                 <li>.background-center-top</li>
1697                 <li>.background-center-bottom</li>
1698                 <li>.background-left</li>
1699                 <li>.background-left-top</li>
1700                 <li>.background-left-bottom</li>
1701                 <li>.background-right</li>
1702                 <li>.background-right-top</li>
1703                 <li>.background-right-bottom</li>
1704                 <li>.background-anim</li>
1705               </ul>
1706           </div>
1707           <!-- .end .wrap -->
1708         </section>
1709         <section>
1710           <div class="wrap aligncenter">
1711             <h2><strong>Embedding Media</strong></h2>
1712             <p>Videos, charts, maps...</p>
1713           </div>
1714           <!-- .end .wrap -->
1715         </section>
1716         <section>
1717           <div class="wrap">
1718             <div class="content-left">
1719               <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
1720               <p>Embed videos with loop, autoplay, and muted attributes.</p>
1721               <pre>&lt;div class="embed"&gt;
1722  &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
1723  &lt;/iframe&gt;
1724 &lt;/div&gt;</pre>
1725               <p><code>.embed</code> (responsive)</p>
1726             </div>
1727             <!-- end .content-left -->
1728             <div class="content-left">
1729               <!-- <div class="embed"> = Responsive -->
1730               <div class="embed">
1731                 <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
1732               </div>
1733               <!-- end .embed -->
1734             </div>
1735             <!-- end .content-left -->
1736           </div>
1737           <!-- .end .wrap -->
1738         </section>
1739         <section>
1740           <div class="wrap size-60">
1741             <!-- Responsive video/iframe... Add <div class="embed"> -->
1742             <div class="embed">
1743               <div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
1744             </div>
1745             <!-- .end .embed -->
1746           </div>
1747           <!-- .end .wrap -->
1748         </section>
1749         <section class="fullscreen">
1750           <!-- Fullscreen Video -->
1751           <div class="embed">
1752             <div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
1753           </div>
1754           <!-- .end .embed -->
1755         </section>
1756         <section class="fullscreen bg-black aligncenter">
1757          <div class="embed">
1758            <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
1759             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
1760            </video>
1761           </div><!-- .end .embed -->
1762           <!-- .wrap = container (width: 90%) -->
1763           <div class="wrap size-50">
1764             <h2><strong>We build brands with integrity and substance</strong></h2>
1765           </div>
1766           <!-- .end .wrap -->
1767         </section>
1768         <section class="fullscreen bg-blue">
1769          <div class="embed dark">
1770            <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
1771             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
1772            </video>
1773           </div>
1774           <!-- .embed -->
1775           <!-- .wrap = container (width: 90%) -->
1776           <div class="wrap size-50">
1777             <h2><strong>We help with design direction</strong></h2>
1778             <p>0verlay: <code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
1779           </div>
1780           <!-- .end .wrap -->
1781         </section>
1782         <section class="bg-primary">
1783           <div class="wrap size-50">
1784             <p class="text-context">Status of Net Neutrality around the world.</p>
1785             <div class="embed">
1786               <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
1787             </div>
1788             <!-- .end .embed -->
1789           </div>
1790           <!-- .end .wrap -->
1791         </section>
1792         <section>
1793           <div class="wrap aligncenter">
1794             <h2><strong>Typography</strong></h2>
1795           </div>
1796           <!-- .end .wrap -->
1797         </section>
1798         <section>
1799           <div class="wrap">
1800             <div class="cta">
1801               <div class="number">
1802                 <p><span>Ag</span></p>
1803               </div>
1804               <!--end .number -->
1805               <div class="benefit">
1806                 <p class="text-subtitle">Roboto in <a href="https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Roboto:400,700,700italic,400italic,300,300italic">Google Fonts</a>.</p>
1807                 <h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
1808                 <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
1809                 <p>abcdefghijklmnopqrstuvwxyz</p>
1810                 <p>1234567890(,.;:?!$&*)</p>
1811               </div>
1812               <!--end .benefit -->
1813             </div>
1814             <!--end .cta -->
1815           </div>
1816           <!-- .end .wrap -->
1817         </section>
1818         <section>
1819           <div class="wrap">
1820             <div class="cta text-serif">
1821               <div class="number">
1822                 <p><span>Ag</span></p>
1823               </div>
1824               <!--end .number -->
1825               <div class="benefit">
1826                 <p class="text-subtitle">Maitree in <a href="https://fonts.google.com/specimen/Maitree">Google Fonts</a>.</p>
1827                 <h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
1828                 <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
1829                 <p>abcdefghijklmnopqrstuvwxyz</p>
1830                 <p>1234567890(,.;:?!$&*)</p>
1831               </div>
1832               <!--end .benefit -->
1833             </div>
1834             <!--end .cta -->
1835           </div>
1836           <!-- .end .wrap -->
1837         </section>
1838         <section class="bg-apple aligncenter">
1839           <div class="wrap">
1840             <div class="cta">
1841               <div class="number">
1842                 <p><span>Ag</span></p>
1843               </div>
1844               <!--end .number -->
1845               <div class="benefit">
1846                 <p>.text-apple, .bg-apple {font-family: "San Francisco";}</p>
1847                 <h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
1848                 <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
1849                 <p>abcdefghijklmnopqrstuvwxyz</p>
1850                 <p>1234567890(,.;:?!$&*)</p>
1851               </div>
1852               <!--end .benefit -->
1853             </div>
1854             <!--end .cta -->
1855           </div>
1856           <!-- .end .wrap -->
1857         </section>
1858
1859       </article>
1860     </main>
1861     <!--main-->
1862
1863     <!-- Required -->
1864     <script src="../static/js/webslides.js"></script>
1865
1866     <script>
1867       window.ws = new WebSlides();
1868     </script>
1869
1870     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
1871     <script defer src="../static/js/svg-icons.js"></script>
1872
1873   </body>
1874 </html>