mypapers/webslides/demos/keynote.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 Keynote: Make a Keynote presentation using HTML</title>
  19     <meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS.">
  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="Make a Keynote presentation using HTML"> <!-- EDIT -->
  39     <meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
  40     <meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- 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="Make a Keynote presentation using HTML"> <!-- EDIT -->
  48     <meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free 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-apple aligncenter">
 100           <!--.wrap = container (width: 90%) -->
 101           <div class="wrap">
 102             <h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
 103           </div>
 104           <!-- .end .wrap -->
 105         </section>
 106         <section class="bg-apple">
 107           <!--.wrap = container (width: 90%) -->
 108           <div class="wrap size-50">
 109             <h1>Make a Keynote presentation using HTML</h1>
 110             <p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p>
 111             <p><code>.bg-apple</code></p>
 112           </div>
 113           <!-- .end .wrap -->
 114         </section>
 115         <section class="bg-apple aligncenter">
 116           <!--.wrap = container (width: 90%) -->
 117           <div class="wrap">
 118             <h2>HTML presentations can be easy</h2>
 119           </div>
 120           <!-- .end .wrap -->
 121         </section>
 122         <section class="bg-apple">
 123           <div class="wrap">
 124             <h2>Features</h2>
 125             <ul class="flexblock features">
 126               <li>
 127                 <div>
 128                   <h2>
 129                     <span>&rarr;</span>
 130                     Simple Navigation
 131                   </h2>
 132                   with arrow keys and swipe.
 133                 </div>
 134               </li>
 135               <li>
 136                 <div>
 137                   <h2>
 138                     <svg class="fa-link">
 139                       <use xlink:href="#fa-link"></use>
 140                     </svg>
 141                     Permalinks
 142                   </h2>
 143                   Go to a specific slide.
 144                 </div>
 145               </li>
 146               <li>
 147                 <div>
 148                   <h2>
 149                     <svg class="fa-clock-o">
 150                       <use xlink:href="#fa-clock-o"></use>
 151                     </svg>
 152                     Slide Counter
 153                   </h2>
 154                   Current/Total number
 155                 </div>
 156               </li>
 157               <li>
 158                 <div>
 159                   <h2>
 160                     <span>40<sup>+</sup></span>
 161                     Beautiful Components
 162                   </h2>
 163                   Covers, cards, quotes...
 164                 </div>
 165               </li>
 166               <li>
 167                 <div>
 168                   <h2>
 169                     <svg class="fa-text-height">
 170                       <use xlink:href="#fa-text-height"></use>
 171                     </svg>
 172                     Vertical Rhythm
 173                   </h2>
 174                   Use multiples of 8.
 175                 </div>
 176               </li>
 177               <li>
 178                 <div>
 179                   <h2>
 180                     <span>500<sup>+</sup></span>
 181                     SVG Icons
 182                   </h2>
 183                   Font Awesome Kit.
 184                 </div>
 185               </li>
 186             </ul>
 187           </div>
 188         </section>
 189         <section class="bg-apple">
 190           <div class="wrap">
 191             <div class="content-left">
 192               <h2>WebSlides was made to inspire people.</h2>
 193             </div>
 194             <!-- end .content-left -->
 195             <div class="content-left">
 196               <p>WebSlides is a wonderful way to showcase your company. All content is for demo purposes only. Images are property of their respective owners.</p>
 197             </div>
 198             <!-- end .content-left -->
 199             <ul class="flexblock">
 200               <li>
 201                 <div>
 202                   <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
 203                 </div>
 204               </li>
 205               <li>
 206                 <div>
 207                   <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
 208                 </div>
 209               </li>
 210               <li>
 211                 <div>
 212                   <img class="whitelogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
 213                 </div>
 214               </li>
 215             </ul>
 216           </div>
 217           <!-- .end .wrap -->
 218         </section>
 219         <section class="bg-apple">
 220           <div class="wrap">
 221             <div class="content-left">
 222               <h2>WebSlides help you build a culture of excellence.</h2>
 223             </div>
 224             <!-- end .content-left -->
 225             <div class="content-left">
 226               <p>The art of storytelling. Hypertext, clean code, and beauty as narrative elements. Just essential features and lovely CSS. All content is for demo purposes only. </p>
 227             </div>
 228             <!-- end .content-left -->
 229             <ul class="flexblock metrics">
 230               <li> Founded
 231                 <span>1976</span>
 232               </li>
 233               <li>
 234                 <span>
 235                   <svg class="fa-users">
 236                     <use xlink:href="#fa-users"></use>
 237                   </svg>
 238                 </span>
 239                 524M Subscribers
 240               </li>
 241               <li>
 242                 <span>
 243                   <svg class="fa-line-chart">
 244                     <use xlink:href="#fa-line-chart"></use>
 245                   </svg>
 246                 </span>
 247                 Revenue: $16M
 248               </li>
 249               <li>
 250                 Monthly Growth
 251                 <span>64%</span>
 252               </li>
 253             </ul>
 254           </div>
 255           <!-- .end .wrap -->
 256         </section>
 257         <section class="bg-apple">
 258           <!--.wrap o <nav> = container 1200px -->
 259           <div class="wrap">
 260             <ul class="flexblock metrics border">
 261               <li> Founded
 262                 <span>1976</span>
 263               </li>
 264               <li>
 265                 <span>
 266                   <svg class="fa-users">
 267                     <use xlink:href="#fa-users"></use>
 268                   </svg>
 269                 </span>
 270                 524M Subscribers
 271               </li>
 272               <li>
 273                 <span>
 274                   <svg class="fa-line-chart">
 275                     <use xlink:href="#fa-line-chart"></use>
 276                   </svg>
 277                 </span>
 278                 Revenue: $16M
 279               </li>
 280               <li>
 281                 Monthly Growth
 282                 <span>64%</span>
 283               </li>
 284               <li>
 285                 <span>
 286                   <svg class="fa-building-o">
 287                     <use xlink:href="#fa-building-o"></use>
 288                   </svg>
 289                 </span>
 290                 6 Offices
 291               </li>
 292               <li>
 293                 <span>
 294                   <svg class="fa-smile-o">
 295                     <use xlink:href="#fa-smile-o"></use>
 296                   </svg>
 297                 </span>
 298                 14K Employees
 299               </li>
 300               <li>
 301                 <span>
 302                 $4M
 303                 </span>
 304                 EBITDA
 305               </li>
 306               <li>
 307                 <span>
 308                   <svg class="fa-university">
 309                     <use xlink:href="#fa-university"></use>
 310                   </svg>
 311                 </span>
 312                 Bank: $76B
 313               </li>
 314             </ul>
 315           </div>
 316           <!-- .end .wrap -->
 317         </section>
 318         <section class="bg-apple aligncenter">
 319           <span class="background dark" style="background-image:url('https://source.unsplash.com/pb_lF8VWaPU/')"></span>
 320           <div class="wrap">
 321             <h2 class="text-data">3,456,789</h2>
 322             <h3>iPhone 7 in first 24 hours</h3>
 323           </div>
 324           <!-- .end .wrap -->
 325         </section>
 326         <section class="bg-apple aligncenter">
 327           <!--.wrap = container (width: 90%) -->
 328           <div class="wrap">
 329             <h2 class="text-data">$48 Billion</h2>
 330             <h3>Revenue in Q4 2024</h3>
 331           </div>
 332           <!-- .end .wrap -->
 333         </section>
 334         <section class="bg-apple slide-bottom">
 335           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
 336           <span class="background" style="background-image:url('https://source.unsplash.com/Y5Tjb62cxl8/')"></span>
 337           <div class="wrap">
 338             <div class="content-left">
 339               <p>
 340                 <svg class="large fa-tree">
 341                   <use xlink:href="#fa-tree"></use>
 342                 </svg>
 343               </p>
 344               <h2>1,000,000</h2>
 345               <h3>We're working to protect up to a million acres of sustainable forest.</h3>
 346             </div>
 347           </div>
 348           <!-- .end .wrap -->
 349         </section>
 350         <section class="bg-apple">
 351           <div class="wrap">
 352             <div class="card-50">
 353               <figure><img class="aligncenter" src="../static/images/iphone.png" alt="iPhone"></figure>
 354               <div class="flex-content">
 355                 <h2>
 356                   <svg class="fa-apple">
 357                     <use xlink:href="#fa-apple"></use>
 358                   </svg>
 359                   iPhone 7
 360                 </h2>
 361                 <p class="text-intro">3D Touch, 12MP photos, and 4K video.</p>
 362                 <p>Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.</p>
 363               </div>
 364               <!-- end .flex-content-->
 365             </div>
 366             <!-- end .card-50-->
 367           </div>
 368           <!-- .end .wrap -->
 369         </section>
 370         <section class="bg-apple">
 371           <div class="wrap">
 372             <div class="grid vertical-align">
 373               <div class="column">
 374                 <h2>
 375                   <svg class="fa-apple">
 376                     <use xlink:href="#fa-apple"></use>
 377                   </svg>
 378                   iPhone 7
 379                 </h2>
 380                 <p class="text-intro">We worked closely with the very talented people at Acme and created a new website. Content demo. </p>
 381                 <ul class="description">
 382                   <li>
 383                     <span class="text-label">
 384                     Client:
 385                     </span>
 386                     Apple (2016)
 387                   </li>
 388                   <li>
 389                     <span class="text-label">
 390                     Services:
 391                     </span>
 392                     Web Design
 393                   </li>
 394                   <li>
 395                     <span class="text-label">
 396                     Website:
 397                     </span>
 398                     <a href="https://apple.com/iphone/">apple.com/iphone</a>
 399                   </li>
 400                 </ul>
 401               </div>
 402               <!-- end .column-->
 403               <div class="column">
 404                 <figure>
 405                   <img src="../static/images/iphone.png" alt="iPhone">
 406                 </figure>
 407               </div>
 408               <!-- end figure-->
 409             </div>
 410             <!-- end .grid-->
 411           </div>
 412           <!-- end .wrap-->
 413         </section>
 414         <section class="bg-apple">
 415           <div class="wrap">
 416             <div class="card-50">
 417               <div class="flex-content">
 418                 <ul class="flexblock specs">
 419                   <li>
 420                     <div>
 421                       <svg class="fa-wifi">
 422                         <use xlink:href="#fa-wifi"></use>
 423                       </svg>
 424                       <h2>Ultra-Fast WiFi</h2>
 425                       Faster LTE with the best worldwide roaming.
 426                     </div>
 427                   </li>
 428                   <li>
 429                     <div>
 430                       <svg class="fa-camera">
 431                         <use xlink:href="#fa-camera"></use>
 432                       </svg>
 433                       <h2>Two cameras that shoot as one.</h2>
 434                       12MP wide angle.
 435                     </div>
 436                   </li>
 437                   <li>
 438                     <div>
 439                       <svg class="fa-life-ring">
 440                         <use xlink:href="#fa-life-ring"></use>
 441                       </svg>
 442                       <h2>Lifetime Warranty </h2>
 443                       We'll fix it or if we can't, we'll replace it.
 444                     </div>
 445                   </li>
 446                 </ul>
 447               </div>
 448               <!-- end .flex-content-->
 449               <figure>
 450                 <img class="aligncenter" src="../static/images/iphone.png" alt="iPhone 6">
 451               </figure>
 452             </div>
 453           </div>
 454           <!-- .end .wrap -->
 455         </section>
 456         <section class="bg-apple aligncenter">
 457           <div class="wrap zoomIn">
 458             <h1>
 459               <svg class="fa-apple">
 460                 <use xlink:href="#fa-apple"></use>
 461               </svg>
 462               Pay
 463             </h1>
 464           </div>
 465           <!-- .end .wrap -->
 466         </section>
 467         <section class="bg-apple">
 468           <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 469           <div class="wrap">
 470             <div class="content-right">
 471               <h2>
 472                 Redesigning
 473                 <svg class="fa-apple">
 474                   <use xlink:href="#fa-apple"></use>
 475                 </svg>
 476                 Pay
 477               </h2>
 478               <p>We've been working with the Acme team over the last three months to build a new app.</p>
 479               <p>
 480                 <a href="#" class="button" title="Case study">Case study &rsaquo;</a>
 481                 <a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site &rsaquo;</a>
 482               </p>
 483             </div>
 484           </div>
 485           <!-- .end .wrap -->
 486         </section>
 487         <section class="bg-apple">
 488           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 489           <!--.wrap = container (width: 90%) -->
 490           <div class="wrap">
 491             <div class="content-left">
 492               <h2>Payments Made Simple</h2>
 493               <p>Apple Pay is so easy. Pay with your debit cards and credit cards with just a touch.</p>
 494               <div class="content-left">
 495                 <h3>Secure</h3>
 496                 <p>Your card is never stored. Apple Pay uses a device-specific number and unique transaction code.</p>
 497               </div>
 498               <!-- .end .content-left -->
 499               <div class="content-left">
 500                 <h3>Universal</h3>
 501                 <p>Apple Pay works with most major credit and debit cards from nearly all banks.</p>
 502               </div>
 503               <!-- .end .content-left -->
 504             </div>
 505             <!-- .end .content-left -->
 506           </div>
 507           <!-- .end .wrap -->
 508         </section>
 509         <section class="bg-apple">
 510           <span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 511           <div class="wrap">
 512             <div class="content-right">
 513               <ul class="flexblock specs">
 514                 <li>
 515                   <div>
 516                     <svg class="fa-bolt">
 517                       <use xlink:href="#fa-bolt"></use>
 518                     </svg>
 519                     <h2>Incredibly fast</h2>
 520                     Just hold your iPhone near the reader.
 521                   </div>
 522                 </li>
 523                 <li>
 524                   <div>
 525                     <svg class="fa-globe">
 526                       <use xlink:href="#fa-globe"></use>
 527                     </svg>
 528                     <h2>Works with all major banks</h2>
 529                     Apple Pay is accepted in restaurants, hotels...
 530                   </div>
 531                 </li>
 532                 <li>
 533                   <div>
 534                     <svg class="fa-lock">
 535                       <use xlink:href="#fa-lock"></use>
 536                     </svg>
 537                     <h2>The safer way to pay</h2>
 538                     Your card number is never stored.
 539                   </div>
 540                 </li>
 541               </ul>
 542             </div>
 543           </div>
 544           <!-- .end .wrap -->
 545         </section>
 546         <section class="bg-apple">
 547           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 548           <div class="wrap">
 549             <div class="content-left">
 550               <h1>
 551                 <svg class="fa-apple">
 552                   <use xlink:href="#fa-apple"></use>
 553                 </svg>
 554                 Pay
 555               </h1>
 556               <p>Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch. See where you can use Apple Pay:
 557               </p>
 558               <form class="user" action="/" method="post">
 559                 <input type="text" name="location" placeholder="Stores in your city..." required>
 560                 <button type="submit" title="Search">Search &rsaquo;</button>
 561               </form>
 562             </div>
 563           </div>
 564           <!-- .end .wrap -->
 565         </section>
 566         <section class="bg-apple">
 567           <!--.wrap = container (width: 90%) -->
 568           <div class="wrap">
 569             <blockquote class="text-quote">
 570               <p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p>
 571               <p>
 572                 <cite>
 573                   <!-- <img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> --> Steve Jobs.
 574                 </cite>
 575               </p>
 576             </blockquote>
 577           </div>
 578           <!-- .end .wrap -->
 579         </section>
 580         <section class="bg-apple">
 581           <span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
 582           <div class="wrap">
 583             <div class="content-left">
 584               <blockquote>
 585                 <p>&ldquo;We see that privacy is a fundamental human right that people have. We are going to do everything that we can to help maintain that trust.&rdquo;</p>
 586                 <p><cite>Tim Cook, CEO of Apple.</cite></p>
 587               </blockquote>
 588             </div>
 589           </div>
 590           <!-- .end .wrap -->
 591         </section>
 592         <section class="bg-apple">
 593           <header>
 594             <!--.wrap o <nav> = container 1200px -->
 595             <div class="wrap">
 596               <p>Header <span class="alignright">.alignright</span></p>
 597             </div>
 598           </header>
 599           <div class="aligncenter fadeInUp">
 600             <h2>Simple CSS Alignments</h2>
 601             <p>Put content wherever you want.</p>
 602           </div>
 603           <footer class="bg-trans-dark">
 604             <div class="wrap">
 605               <p>
 606                 <span class="alignleft">
 607                 Footer
 608                 </span>
 609                 <span class="alignright">
 610                   <a href="#" title="Twitter">
 611                     <svg class="fa-twitter">
 612                       <use xlink:href="#fa-twitter"></use>
 613                     </svg>
 614                     @username
 615                   </a>
 616                 </span>
 617               </p>
 618             </div>
 619           </footer>
 620         </section>
 621         <section class="bg-apple slide-top">
 622           <div class="wrap">
 623             <div class="content-left">
 624               <h3>1/9 left top</h3>
 625               <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
 626               <p><code>.slide-top and .content-left</code></p>
 627             </div>
 628           </div>
 629           <!-- .end .wrap -->
 630         </section>
 631         <section class="bg-apple slide-top">
 632           <div class="wrap">
 633             <div class="content-center">
 634               <h3>2/9 center top</h3>
 635               <p>Apple I was designed and hand-built by Steve Wozniak. Steve Jobs had the idea of selling the computer.</p>
 636               <p><code>.slide-top and .content-center</code></p>
 637             </div>
 638           </div>
 639           <!-- .end .wrap -->
 640         </section>
 641         <section class="bg-apple slide-top">
 642           <div class="wrap">
 643             <div class="content-right">
 644               <h3>3/9 right top</h3>
 645               <p>The Apple II is one of the first highly successful computers.</p>
 646               <p><code>.slide-top and .content-right</code></p>
 647             </div>
 648           </div>
 649           <!-- .end .wrap -->
 650         </section>
 651         <section class="bg-apple">
 652           <div class="wrap">
 653             <div class="content-left">
 654               <h3>4/9 left center</h3>
 655               <p>The Apple III is a business-oriented personal computer that was intended as the successor to the Apple II series.</p>
 656               <p><code>.content-left</code></p>
 657             </div>
 658           </div>
 659           <!-- .end .wrap -->
 660         </section>
 661         <section class="bg-apple">
 662           <div class="wrap">
 663             <div class="content-center">
 664               <h3>5/9 center</h3>
 665               <p>Apple Lisa was one of the first personal computers to offer a graphical user interface.</p>
 666               <p><code>.content-center</code></p>
 667             </div>
 668           </div>
 669           <!-- .end .wrap -->
 670         </section>
 671         <section class="bg-apple">
 672           <div class="wrap">
 673             <div class="content-right">
 674               <h3>6/9 right center</h3>
 675               <p>The Macintosh was the company's first mass-market personal computer featuring a GUI and mouse.</p>
 676               <p><code>.content-right</code></p>
 677             </div>
 678           </div>
 679           <!-- .end .wrap -->
 680         </section>
 681         <section class="bg-apple slide-bottom">
 682           <div class="wrap">
 683             <div class="content-left">
 684               <h3>7/9 left bottom</h3>
 685               <p>The iBook was a line of laptop computers designed and marketed by Apple Inc. from 1999 to 2006.</p>
 686               <p><code>.slide-bottom</code> and <code>.content-left</code></p>
 687             </div>
 688           </div>
 689           <!-- .end .wrap -->
 690         </section>
 691         <section class="bg-apple slide-bottom">
 692           <div class="wrap">
 693             <div class="content-center">
 694               <h3>8/9 center bottom</h3>
 695               <p>Apple introduced the first generation iPod on October 23, 2001, with the slogan "1,000 songs in your pocket".</p>
 696               <p><code>.slide-bottom</code> and <code>.content-center</code></p>
 697             </div>
 698           </div>
 699           <!-- .end .wrap -->
 700         </section>
 701         <section class="bg-apple slide-bottom">
 702           <div class="wrap">
 703             <div class="content-right">
 704               <h3>9/9 right bottom</h3>
 705               <p>The original iPhone was introduced by Steve Jobs on January 9, 2007. Jobs introduced the iPhone as a combination of three devices.</p>
 706               <p><code>.slide-bottom</code> and <code>.content-right</code></p>
 707             </div>
 708           </div>
 709           <!-- .end .wrap -->
 710         </section>
 711         <section class="bg-apple">
 712           <div class="wrap size-50">
 713             <h2>CSS Animations</h2>
 714             <p>Fadein transition to all slides.</p>
 715             <pre>&lt;article id="webslides"&gt;
 716   &lt;section&gt;
 717     &lt;div class="wrap fadeInUp"&gt;
 718       &lt;h1&gt;Slide&lt;/h1&gt;
 719     &lt;/div&gt;
 720   &lt;/section&gt;
 721 &lt;/article&gt;</pre>
 722             <p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
 723           </div>
 724           <!-- .end .wrap -->
 725         </section>
 726         <section class="bg-black aligncenter">
 727           <span class="background light" style="background-image:url('https://source.unsplash.com/UxtIESWxLh8/')"></span>
 728           <div class="wrap">
 729             <h2>Embedding Media</h2>
 730           </div>
 731           <!-- .end .wrap -->
 732         </section>
 733         <section class="bg-apple">
 734           <div class="wrap">
 735             <div class="content-left">
 736               <h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
 737               <p>Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.</p>
 738               <pre>&lt;div class="embed"&gt;
 739  &lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay &gt;&lt;/div&gt;
 740 &lt;/div&gt;</pre>
 741               <p><code>.embed</code> (responsive)</p>
 742             </div>
 743             <!-- end .content-left -->
 744             <div class="content-left">
 745               <!-- <div class="embed"> = Responsive -->
 746               <div class="embed">
 747                 <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-no-controls></div>
 748               </div>
 749               <!-- end .embed -->
 750             </div>
 751             <!-- end .content-left -->
 752           </div>
 753           <!-- .end .wrap -->
 754         </section>
 755         <section class="bg-apple fullscreen">
 756           <!-- Fullscreen Video -->
 757           <div class="embed">
 758             <div data-youtube data-youtube-id="lvOKBQvbLhg" data-autoplay></div>
 759           </div>
 760           <!-- .end .embed -->
 761         </section>
 762         <section class="fullscreen bg-apple aligncenter">
 763          <div class="embed">
 764            <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
 765             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
 766            </video>
 767           </div><!-- .embed -->
 768           <!-- .wrap = container (width: 90%) -->
 769           <div class="wrap size-50">
 770             <h2><strong>Be Awesome</strong></h2>
 771           </div>
 772         </section>
 773         <section class="fullscreen bg-black aligncenter">
 774           <div class="embed dark">
 775              <video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
 776              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
 777             </video>
 778           </div><!-- .embed -->
 779           <!-- .wrap = container (width: 90%) -->
 780           <div class="wrap size-50">
 781             <h2><strong>Think Different</strong></h2>
 782             <p>Overlay: <code>fullscreen.bg-black > .embed.dark</code> or .light</p>
 783           </div>
 784           <!-- .end .wrap -->
 785         </section>
 786         <section class="bg-apple aligncenter">
 787           <span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
 788           <div class="wrap">
 789             <h1>One more thing...</h1>
 790           </div>
 791           <!-- .end .wrap -->
 792         </section>
 793         <section class="bg-apple aligncenter">
 794           <div class="wrap">
 795             <div class="cta">
 796               <div class="number">
 797                 <p><span>Ag</span></p>
 798               </div>
 799               <!--end .number -->
 800               <div class="benefit">
 801                 <p class="text-subtitle">San Francisco</p>
 802                 <h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
 803                 <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
 804                 <p>abcdefghijklmnopqrstuvwxyz</p>
 805                 <p>1234567890(,.;:?!$&*)</p>
 806               </div>
 807               <!--end .benefit -->
 808             </div>
 809             <!--end .cta -->
 810           </div>
 811           <!-- .end .wrap -->
 812         </section>
 813         <section class="bg-apple aligncenter">
 814           <!-- .wrap = container (width: 90%) -->
 815           <div class="wrap">
 816             <h2><strong>Start in seconds</strong></h2>
 817             <p class="text-intro">120+ prebuilt slides ready to use.</p>
 818             <p>
 819               <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
 820                 <svg class="fa-cloud-download">
 821                   <use xlink:href="#fa-cloud-download"></use>
 822                 </svg>
 823                 Free Download
 824               </a>
 825               <span class="try">
 826                 <a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
 827                   <svg class="fa-paypal">
 828                     <use xlink:href="#fa-paypal"></use>
 829                   </svg>
 830                   Pay what you want.
 831                 </a>
 832               </span>
 833             </p>
 834           </div>
 835           <!-- .end .wrap -->
 836         </section>
 837         <section class="bg-apple aligncenter">
 838           <h2 class="text-emoji zoomIn">😎</h2>
 839           <h3><strong>Thank you!</strong></h2>
 840           <p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
 841         </section>
 842
 843       </article>
 844     </main>
 845     <!--main-->
 846
 847     <!-- Required -->
 848     <script src="../static/js/webslides.js"></script>
 849
 850     <script>
 851       window.ws = new WebSlides();
 852     </script>
 853
 854     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
 855     <script defer src="../static/js/svg-icons.js"></script>
 856
 857   </body>
 858 </html>