mypapers/webslides/demos/classes.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 Tutorial: Classes</title>
  19     <meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples.">
  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" /> <!-- YOUR URL/PERMALINK -->
  37     <meta property="og:type" content="article" />
  38     <meta property="og:title" content="WebSlides Documentation: Classes" /> <!-- EDIT -->
  39     <meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT -->
  40     <meta property="og:updated_time" content="2017-01-04T17:23:46"> <!-- 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="WebSlides Documentation: Classes"> <!-- EDIT -->
  48     <meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples."> <!-- 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-black-blue aligncenter">
 100          <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
 101           <!--.wrap = container (width: 90%) with fadein animation -->
 102           <div class="wrap">
 103             <p class="text-subtitle">WebSlides Tutorial</p>
 104             <h1 class="text-landing">Classes</h1>
 105             <p class="text-symbols">* * * </p>
 106             <p>
 107               <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
 108                 <svg class="fa-github">
 109                   <use xlink:href="#fa-github"></use>
 110                 </svg>
 111                 Free Download
 112               </a>
 113             </p>
 114           </div>
 115           <!-- .end .wrap -->
 116         </section>
 117         <section class="aligncenter">
 118           <!--.wrap = container (width: 90%) with fadein animation -->
 119           <div class="wrap">
 120             <h2><strong>WebSlides Classes</strong></h2>
 121             <p class="text-intro">Friendly naming conventions.</p>
 122             <ul class="flexblock border">
 123               <li>
 124                 <!--div required = padding li or li>a-->
 125                 <div>
 126                   <h3><a target=_blank href="#slide=3">Layout</a></h3>
 127                   <ol>
 128                     <li><a target="_blank" href="#slide=4">CSS Syntax</a></li>
 129                     <li><a target="_blank" href="#slide=6">.alignleft</a></li>
 130                     <li><a target="_blank" href="#slide=7">.alignright</a></li>
 131                     <li><a target="_blank" href="#slide=8">.aligncenter</a></li>
 132                     <li><a target="_blank" href="#slide=9">.slide-top</a></li>
 133                     <li><a target="_blank" href="#slide=12">.content- (left, center, right)</a></li>
 134                     <li><a target="_blank" href="#slide=15">.slide-bottom</a></li>
 135                     <li><a target="_blank" href="#slide=18">.grid > .column</a></li>
 136                     <li><a target="_blank" href="#slide=19">.grid.vertical-align</a></li>
 137                     <li><a target="_blank" href="#slide=23">.card- (50,60,70...)</a></li>
 138                   </ol>
 139                 </div>
 140               </li>
 141               <li>
 142                 <!--div required = padding li or li>a-->
 143                 <div>
 144                   <h3><a target="_blank" href="#slide=26">Backgrounds</a></h3>
 145                   <ol>
 146                     <li><a target="_blank" href="#slide=27">.bg-primary...(Corp Colors)</a></li>
 147                     <li><a target="_blank" href="#slide=28">.bg-black...(General Colors)</a></li>
 148                     <li><a target="_blank" href="#slide=29">.bg-gradient-(position)</a></li>
 149                     <li><a target="_blank" href="#slide=33">.background-video</a></li>
 150                     <li>
 151                       <a target="_blank" href="#slide=36">Background Images:</a>
 152                       <ol>
 153                         <li><a target="_blank" href="#slide=36">.background (fullscreen)</a></li>
 154                         <li><a target="_blank" href="#slide=37">.background-(position)</a></li>
 155                         <li><a target="_blank" href="#slide=38">.background.dark</a></li>
 156                         <li><a target="_blank" href="#slide=39">.background.light</a></li>
 157                         <li><a target="_blank" href="#slide=40">.background.anim</a></li>
 158                       </ol>
 159                     </li>
 160                   </ol>
 161                 </div>
 162               </li>
 163               <li>
 164                 <!--div required = padding li or li>a-->
 165                 <div>
 166                   <h3><a target="_blank" href="#slide=41">Flexible Blocks</a></h3>
 167                   <ol>
 168                     <li><a target="_blank" href="#slide=42">.flexblock </a></li>
 169                     <li><a target="_blank" href="#slide=45">.flexblock.clients</a></li>
 170                     <li><a target="_blank" href="#slide=47">.flexblock.features</a></li>
 171                     <li><a target="_blank" href="#slide=48">.flexblock.gallery</a></li>
 172                     <li><a target="_blank" href="#slide=50">.flexblock.metrics</a></li>
 173                     <li><a target="_blank" href="#slide=52">.flexblock.plans</a></li>
 174                     <li><a target="_blank" href="#slide=54">.flexblock.specs</a></li>
 175                     <li><a target="_blank" href="#slide=55">.flexblock.reasons</a></li>
 176                     <li><a target="_blank" href="#slide=56">.flexblock.steps</a></li>
 177                     <li><a target="_blank" href="#slide=57">.flexblock.activity</a></li>
 178                   </ol>
 179                 </div>
 180               </li>
 181               <li>
 182                 <!--div required = padding li or li>a-->
 183                 <div>
 184                   <h3><a target="_blank" href="#slide=58">Typography (Roboto)</a></h3>
 185                   <ol>
 186                     <li><a target="_blank" href="#slide=59">.text-landing</a></li>
 187                     <li><a target="_blank" href="#slide=60">.text-intro</a></li>
 188                     <li><a target="_blank" href="#slide=61">.text-subtitle</a></li>
 189                     <li><a target="_blank" href="#slide=62">.text-shadow</a></li>
 190                     <li><a target="_blank" href="#slide=63">.text-data</a></li>
 191                     <li><a target="_blank" href="#slide=64">.text-context</a></li>
 192                     <li><a target="_blank" href="#slide=65">.text-cols</a></li>
 193                     <li><a target="_blank" href="#slide=66">.text-label</a></li>
 194                     <li><a target="_blank" href="#slide=67">.text-serif (Maitree)</a></li>
 195                     <li><a target="_blank" href="#slide=69">.text-pull (-right/-left)</a></li>
 196                   </ol>
 197                 </div>
 198               </li>
 199             </ul>
 200           </div>
 201           <!-- .end .wrap -->
 202         </section>
 203         <section>
 204           <div class="wrap size-50">
 205             <h2>
 206               <svg class="fa-heart-o">
 207                 <use xlink:href="#fa-heart-o"></use>
 208               </svg>
 209               CSS Syntax
 210             </h2>
 211             <p class="text-intro">WebSlides is so easy to understand and love. Baseline: 8.</p>
 212             <hr>
 213             <ul class="description">
 214               <li><span class="text-label">Typography:</span> .text-landing, .text-subtitle, .text-data, .text-intro...</li>
 215               <li><span class="text-label">BG Colors:</span> .bg-primary, .bg-blue,.bg-apple...</li>
 216               <li><span class="text-label">BG Images:</span> .background, .background-center-bottom...</li>
 217               <li><span class="text-label">Cards:</span> .card-60, .card-50, .card-40...</li>
 218               <li><span class="text-label">Sizes:</span> .size-50, .size-40...</li>
 219               <li><span class="text-label">Flex Blocks:</span> .flexblock.clients, .flexblock.gallery, .flexblock.metrics...</li>
 220             </ul>
 221           </div>
 222           <!-- .end .wrap -->
 223         </section>
 224         <section>
 225           <!--.wrap = container (width: 90%) -->
 226           <div class="wrap">
 227             <div class="grid vertical-align">
 228               <div class="column">
 229                 <h3><strong>WebSlides is really easy</strong></h3>
 230                 <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide.</p>
 231                 <p>Code is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</p>
 232               </div>
 233               <!-- .end .column -->
 234               <div class="column">
 235                 <pre>&lt;article id="webslides"&gt;
 236   <span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
 237   &lt;section&gt;
 238     &lt;h1&gt;Design for trust&lt;/h1&gt;
 239   &lt;/section&gt;
 240   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
 241   &lt;section class="bg-primary"&gt;
 242     &lt;div class="wrap"&gt;
 243       &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
 244     &lt;/div&gt;
 245   &lt;/section&gt;
 246 &lt;/article&gt;
 247 </pre>
 248               </div>
 249               <!-- .end .column -->
 250             </div>
 251             <!-- .end .grid -->
 252             <hr>
 253             <p class="aligncenter">Vertical sliding? <code>&lt;article id="webslides" class="vertical"&gt;</code></p>
 254           </div>
 255           <!-- .end .wrap -->
 256         </section>
 257         <section>
 258           <header>
 259             <!--.wrap or <nav> = container 1200px -->
 260             <div class="wrap">
 261               <p>Header (logo) <span class="alignright">.alignright</span></p>
 262             </div>
 263           </header>
 264           <div class="aligncenter">
 265             <h2>Simple CSS Alignments</h2>
 266             <p>Put content wherever you want.</p>
 267           </div>
 268           <footer>
 269             <div class="wrap">
 270               <p>
 271                 <span class="alignleft">
 272                 Footer: logo, credits... (.alignleft)
 273                 </span>
 274                 <span class="alignright">
 275                   <a href="#" title="Twitter">
 276                     <svg class="fa-twitter">
 277                       <use xlink:href="#fa-twitter"></use>
 278                     </svg>
 279                     @username .alignright
 280                   </a>
 281                 </span>
 282               </p>
 283             </div>
 284           </footer>
 285         </section>
 286         <section>
 287           <div class="wrap">
 288             <img class="alignleft size-50" src="../static/images/iphone.png" alt="iPhone">
 289             <h2>img.alignleft</h2>
 290             <p><code>img.alignleft.size-50</code></p>
 291             <p>Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco.  Apple sold 6.1 million first generation iPhone units over five quarters.</p>
 292             <p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
 293           </div>
 294           <!-- .end .wrap -->
 295         </section>
 296         <section>
 297           <div class="wrap">
 298             <img class="alignright size-50" src="../static/images/iphone.png" alt="iPhone">
 299             <h2>img.alignright</h2>
 300             <p><code>img.alignright.size-50</code></p>
 301             <p>Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco.  Apple sold 6.1 million first generation iPhone units over five quarters.</p>
 302             <p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
 303           </div>
 304           <!-- .end .wrap -->
 305         </section>
 306         <section>
 307           <div class="wrap">
 308             <img class="aligncenter size-40" src="../static/images/iphone.png" alt="iPhone">
 309             <p class="aligncenter"><code>img.aligncenter.size-40</code></p>
 310           </div>
 311           <!-- .end .wrap -->
 312         </section>
 313         <section class="slide-top">
 314           <div class="wrap">
 315             <div class="content-left">
 316               <h3>1/9 left top</h3>
 317               <p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
 318               <p><code>.slide-top and .content-left</code></p>
 319             </div>
 320           </div>
 321           <!-- .end .wrap -->
 322         </section>
 323         <section class="slide-top">
 324           <div class="wrap">
 325             <div class="content-center">
 326               <h3>2/9 center top</h3>
 327               <p>In a village of La Mancha, the name of which I have no desire to call to mind,</p>
 328               <p><code>.slide-top and .content-center</code></p>
 329             </div>
 330           </div>
 331           <!-- .end .wrap -->
 332         </section>
 333         <section class="slide-top">
 334           <div class="wrap">
 335             <div class="content-right">
 336               <h3>3/9 right top</h3>
 337               <p>there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.</p>
 338               <p><code>.slide-top and .content-right</code></p>
 339             </div>
 340           </div>
 341           <!-- .end .wrap -->
 342         </section>
 343         <section>
 344           <div class="wrap">
 345             <div class="content-left">
 346               <h3>4/9 left center</h3>
 347               <p>An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,</p>
 348               <p><code>.content-left</code></p>
 349             </div>
 350           </div>
 351           <!-- .end .wrap -->
 352         </section>
 353         <section>
 354           <div class="wrap">
 355             <div class="content-center">
 356               <h3>5/9 center</h3>
 357               <p>lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.</p>
 358               <p><code>.content-center</code></p>
 359             </div>
 360           </div>
 361           <!-- .end .wrap -->
 362         </section>
 363         <section>
 364           <div class="wrap">
 365             <div class="content-right">
 366               <h3>6/9 right center</h3>
 367               <p>he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,</p>
 368               <p><code>.content-right</code></p>
 369             </div>
 370           </div>
 371           <!-- .end .wrap -->
 372         </section>
 373         <section class="slide-bottom">
 374           <div class="wrap">
 375             <div class="content-left">
 376               <h3>7/9 left bottom</h3>
 377               <p>while on week-days he made a brave figure in his best homespun.</p>
 378               <p><code>.slide-bottom</code> and <code>.content-left</code></p>
 379             </div>
 380           </div>
 381           <!-- .end .wrap -->
 382         </section>
 383         <section class="slide-bottom">
 384           <div class="wrap">
 385             <div class="content-center">
 386               <h3>8/9 center bottom</h3>
 387               <p>He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,</p>
 388               <p><code>.slide-bottom</code> and <code>.content-center</code></p>
 389             </div>
 390           </div>
 391           <!-- .end .wrap -->
 392         </section>
 393         <section class="slide-bottom">
 394           <div class="wrap">
 395             <div class="content-right">
 396               <h3>9/9 right bottom</h3>
 397               <p>who used to saddle the hack as well as handle the bill-hook.</p>
 398               <p><code>.slide-bottom</code> and <code>.content-right</code></p>
 399             </div>
 400           </div>
 401           <!-- .end .wrap -->
 402         </section>
 403         <section class="aligncenter">
 404           <!--.wrap = container (width: 90%) with fadein animation -->
 405           <div class="wrap">
 406             <h2>.grid + .column</h2>
 407             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
 408             <div class="grid">
 409               <div class="column">
 410                 <h6>Why WebSlides?</h6>
 411                 <p>There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p>
 412                 <p class="text-symbols">* * *</p>
 413               </div>
 414               <!-- end .column -->
 415               <div class="column">
 416                 <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
 417               </div>
 418               <!-- end .column -->
 419               <div class="column">
 420                 <h6>How easy is WebSlides?</h6>
 421                 <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
 422                 <p class="text-symbols">* * *</p>
 423               </div>
 424               <!-- end .column -->
 425             </div>
 426             <!-- end .grid -->
 427           </div>
 428           <!-- end .wrap -->
 429         </section>
 430         <section class="aligncenter">
 431           <!--.wrap = container (width: 90%) with fadein animation -->
 432           <div class="wrap">
 433             <h2>.grid.<strong>vertical-align</strong> + .column</h2>
 434             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
 435             <div class="grid vertical-align">
 436               <div class="column">
 437                 <h6>Why WebSlides?</h6>
 438                 <p>There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p>
 439                 <p class="text-symbols">* * *</p>
 440               </div>
 441               <!-- end .column -->
 442               <div class="column">
 443                 <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
 444               </div>
 445               <!-- end .column -->
 446               <div class="column">
 447                 <h6>How easy is WebSlides?</h6>
 448                 <p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
 449                 <p class="text-symbols">* * *</p>
 450               </div>
 451               <!-- end .column -->
 452             </div>
 453             <!-- end .grid -->
 454           </div>
 455           <!-- end .wrap -->
 456         </section>
 457         <section>
 458           <div class="wrap">
 459             <h2>.grid.<strong>sm</strong> (sidebar + main)</h2>
 460             <hr>
 461             <div class="grid sm">
 462               <div class="column">
 463                 <h3>.column 1</h3>
 464                 <p>Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.</p>
 465               </div>
 466               <div class="column">
 467                 <h3>.column 2</h3>
 468                 <p>The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.</p>
 469                 <p>When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion. </p>
 470               </div>
 471             </div>
 472             <!--end .grid -->
 473           </div>
 474           <!-- .end .wrap -->
 475         </section>
 476         <section>
 477           <div class="wrap">
 478             <h2>.grid.<strong>ms</strong> (main +  sidebar)</h2>
 479             <hr>
 480             <div class="grid ms">
 481               <div class="column">
 482                 <h3>.column 1</h3>
 483                 <p>Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology. </p>
 484                 <p>An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.</p>
 485               </div>
 486               <div class="column">
 487                 <h3>.column 2</h3>
 488                 <p>The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.</p>
 489               </div>
 490             </div>
 491             <!--end .grid -->
 492           </div>
 493           <!-- .end .wrap -->
 494         </section>
 495         <section>
 496           <div class="wrap">
 497             <h2>.grid.<strong>sms</strong> (sidebar + main +  sidebar)</h2>
 498             <hr>
 499             <div class="grid sms">
 500               <div class="column">
 501                 <h3>.column 1</h3>
 502                 <p>Information architecture is considered to have been founded by Richard Saul Wurman.</p>
 503               </div>
 504               <div class="column">
 505                 <h3>.column 2</h3>
 506                 <p>Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.</p>
 507               </div>
 508               <div class="column">
 509                 <h3>.column 3</h3>
 510                 <p>The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields. </p>
 511               </div>
 512             </div>
 513             <!--end .grid -->
 514           </div>
 515           <!-- .end .wrap -->
 516         </section>
 517         <section>
 518          <div class="wrap">
 519           <div class="card-50 bg-white">
 520             <div class="flex-content">
 521               <h2>Unsplash
 522               </h2>
 523               <p>.card-50.bg-white</p>
 524               <p class="text-intro"><a href="http://unsplash.com">Unsplash</a> is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great.
 525               </p>
 526               <ul class="description">
 527                 <li>
 528                   <strong class="text-label">Role:</strong> Frontend
 529                 </li>
 530                 <li><strong class="text-label">Client:</strong> Acme</li>
 531                 <li><strong class="text-label">Year:</strong> 2018</li>
 532               </ul>
 533             </div>
 534             <!-- end .flex-content-->
 535             <figure>
 536               <img src="https://source.unsplash.com/rCOWMC8qf8A/" alt="Apple Watch">
 537               <figcaption>
 538                   <a href="https://unsplash.com/@crew" title="Crew">
 539                     <svg class="fa-camera">
 540                       <use xlink:href="#fa-camera"></use>
 541                     </svg>
 542                     Crew (Unsplash)
 543                   </a>
 544                 </figcaption>
 545             </figure>
 546             <!-- end figure-->
 547           </div>
 548           <!-- .end .card-50 -->
 549          </div>
 550           <!-- .end .wrap -->
 551         </section>
 552         <section>
 553           <div class="wrap">
 554             <div class="card-50 bg-white">
 555               <figure>
 556                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.8442158987712!2d-0.1268272!3d51.5005848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig+Ben!5e0!3m2!1ses!2ses!4v1491497625579" width="800" height="600" allowfullscreen></iframe>
 557                 <figcaption>
 558                   <a href="https://maps.google.com" title="Google Maps">
 559                     <svg class="fa-maps">
 560                       <use xlink:href="#fa-maps"></use>
 561                     </svg>
 562                     Google Maps
 563                   </a>
 564                 </figcaption>
 565               </figure>
 566               <!-- end figure-->
 567               <div class="flex-content">
 568                 <h2>
 569                   Discover London
 570                 </h2>
 571                 <p>.card-50.bg-white</p>
 572                 <ul class="description">
 573                   <li>
 574                     <strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
 575                   </li>
 576                   <li><strong title="Population">Population:</strong> 8,673,713</li>
 577                   <li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
 578                 </ul>
 579                 <p>
 580                   There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
 581                 </p>
 582               </div>
 583               <!-- end .flex-content-->
 584             </div>
 585             <!-- end .card-50-->
 586           </div>
 587           <!-- .end .wrap -->
 588         </section>
 589         <section class="fullscreen">
 590           <div class="card-50">
 591             <figure>
 592               <img src="https://source.unsplash.com/8lODM_TYmkI/800x600" alt="Yosemite National Park">
 593               <figcaption>
 594                 <a href="https://unsplash.com/@chadmadden" title="Chad Madden">
 595                   <svg class="fa-camera">
 596                     <use xlink:href="#fa-camera"></use>
 597                   </svg>
 598                   Chad Madden (Unsplash)
 599                 </a>
 600               </figcaption>
 601             </figure>
 602             <!-- end figure-->
 603             <div class="flex-content">
 604               <h2>
 605                 What is inspiration?
 606               </h2>
 607               <p>
 608                 In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology.
 609               </p>
 610             </div>
 611             <!-- end .flex-content-->
 612           </div>
 613           <!-- end .card-50-->
 614         </section>
 615         <section class="bg-apple aligncenter">
 616           <h1>Backgrounds</h1>
 617           <p>&lt;section class="bg-apple"&gt;</p>
 618         </section>
 619         <section>
 620           <div class="wrap">
 621             <h3>Corporate Backgrounds</h3>
 622             <ul class="flexblock">
 623               <li class="bg-primary">
 624                 <h2>.bg-primary</h2>
 625                 #44d
 626               </li>
 627               <li class="bg-secondary">
 628                 <h2>.bg-secondary</h2>
 629                 #67d
 630               </li>
 631               <li class="bg-light">
 632                 <h2>.bg-light</h2>
 633                 #edf2f7
 634               </li>
 635               <li>
 636                 <h2>body</h2>
 637                 #f7f9fb
 638               </li>
 639             </ul>
 640             <hr>
 641             <h3>General Colors</h3>
 642             <ul class="flexblock">
 643               <li class="bg-black">
 644                 <h2>.bg-black</h2>
 645                 #111
 646               </li>
 647               <li class="bg-black-blue">
 648                 <h2>.bg-black-blue</h2>
 649                 #123
 650               </li>
 651               <li class="bg-gray">
 652                 <h2>.bg-gray</h2>
 653                 #d5d9e2
 654               </li>
 655               <li class="bg-white">
 656                 <h2>.bg-white</h2>
 657                 #fff
 658               </li>
 659             </ul>
 660           </div>
 661           <!-- .end .wrap -->
 662         </section>
 663         <section>
 664           <div class="wrap">
 665             <ul class="flexblock">
 666               <li class="bg-red">
 667                 <h2>.bg-red</h2>
 668                 #c23
 669               </li>
 670               <li class="bg-green">
 671                 <h2>.bg-green</h2>
 672                 #077
 673               </li>
 674               <li class="bg-blue">
 675                 <h2>.bg-blue</h2>
 676                 #346
 677               </li>
 678               <li class="bg-purple">
 679                 <h2>.bg-purple</h2>
 680                 #b6d
 681               </li>
 682             </ul>
 683             <hr>
 684             <h3>Transparent Backgrounds</h3>
 685             <ul class="flexblock">
 686               <li class="bg-trans-dark">
 687                 <h2>.bg-trans-dark</h2>
 688                 rgba(0,0,0 , 0.5)
 689               </li>
 690               <li class="bg-trans-light">
 691                 <h2>.bg-trans-light</h2>
 692                 rgba(255,255,255 , 0.2)
 693               </li>
 694             </ul>
 695           </div>
 696           <!-- .end .wrap -->
 697         </section>
 698         <section class="bg-gradient-h">
 699           <div class="wrap">
 700             <h1>Gradients</h1>
 701             <ul class="flexblock border">
 702               <li>Horizontal <code>.bg-gradient-h</code></li>
 703               <li>Radial <code>.bg-gradient-r</code></li>
 704               <li>Vertical <code>.bg-gradient-v</code></li>
 705             </ul>
 706           </div>
 707           <!-- .end .wrap -->
 708         </section>
 709         <section class="bg-gradient-h aligncenter">
 710           <!--.wrap = container (width: 90%) with fadein animation -->
 711           <div class="wrap">
 712             <h1>Horizontal Gradient</h1>
 713             <p><code>section.bg-gradient-h</code></p>
 714           </div>
 715           <!-- .end .wrap -->
 716         </section>
 717         <section class="bg-gradient-r aligncenter">
 718           <div class="wrap">
 719             <h1>Radial Gradient</h1>
 720             <p><code>section.bg-gradient-r</code></p>
 721           </div>
 722           <!-- .end .wrap -->
 723         </section>
 724         <section class="bg-gradient-v aligncenter">
 725           <!--.wrap = container (width: 90%) with fadein animation -->
 726           <div class="wrap">
 727             <h1>Vertical Gradient</h1>
 728             <p><code>section.bg-gradient-v</code></p>
 729           </div>
 730           <!-- .end .wrap -->
 731         </section>
 732         <section>
 733           <div class="wrap size-60">
 734             <h3>Background Videos</h3>
 735             <pre>&lt;video class="background-video" autoplay muted loop poster="image.jpg"&gt;
 736   &lt;source src="video.mp4" type="video/mp4"&gt;
 737 &lt;/video&gt;</pre>
 738             <p><code>.background-video</code></p>
 739           </div>
 740           <!-- .end .wrap -->
 741         </section>
 742         <section class="bg-black">
 743           <video class="background-video" autoplay muted loop poster="https://webslides.tv/static/images/working.jpg">
 744             <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
 745           </video>
 746           <div class="wrap">
 747             <p><code>.background-video</code></p>
 748             <h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
 749           </div>
 750           <!-- .end .wrap -->
 751         </section>
 752         <section class="bg-blue aligncenter">
 753           <video class="background-video dark" autoplay muted loop poster="https://webslides.tv/static/images/working.jpg">
 754             <source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
 755           </video>
 756           <div class="wrap">
 757             <h2 class="text-landing">BG Video with Overlay</h2>
 758             <p><code>section.bg-blue > .background-video.dark</code> or .light</p>
 759           </div>
 760           <!-- .end .wrap -->
 761         </section>
 762         <section>
 763           <div class="wrap">
 764             <div class="content-left">
 765               <h3>Fullscreen Background Images</h3>
 766               <pre>&lt;section&gt;
 767   &lt;span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"&gt;&lt;/span&gt;
 768   &lt;div class="wrap"&gt;
 769     &lt;h1&gt;Slide&lt;/h1&gt;
 770   &lt;/div&gt;
 771 &lt;/section&gt;</pre>
 772               <p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p>
 773             </div>
 774             <div class="content-left">
 775               <h3>16 Different Backgrounds</h3>
 776               <ul class="text-cols">
 777               <li><strong>.background</strong> (cover)</li>
 778               <li>.background-top (cover)</li>
 779               <li>.background-bottom (cover)</li>
 780               <li>.background.light (opacity)</li>
 781               <li>.background.dark (opacity)</li>
 782               <li>.background-center</li>
 783               <li>.background-center-top</li>
 784               <li>.background-center-bottom</li>
 785               <li>.background-left</li>
 786               <li>.background-left-top</li>
 787               <li>.background-left-bottom</li>
 788               <li>.background-right</li>
 789               <li>.background-right-top</li>
 790               <li>.background-right-bottom</li>
 791               <li>.background-anim (animated)</li>
 792               <li>.<strong>background-video</strong> (fullscreen)</li>
 793             </ul>
 794             </div>
 795           </div>
 796           <!-- .end .wrap -->
 797         </section>
 798         <section>
 799           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
 800           <div class="wrap">
 801             <div class="content-left">
 802               <h3>.background-(position)</h3>
 803               <p><code>.background-right-bottom</code></p>
 804               <ul class="flexblock specs">
 805                 <li>
 806                   <div>
 807                     <svg class="fa-wifi">
 808                       <use xlink:href="#fa-wifi"></use>
 809                     </svg>
 810                     <h2>Ultra-Fast WiFi</h2>
 811                     Simple and secure file sharing.
 812                   </div>
 813                 </li>
 814                 <li>
 815                   <div>
 816                     <svg class="fa-battery-full">
 817                       <use xlink:href="#fa-battery-full"></use>
 818                     </svg>
 819                     <h2>All day battery life</h2>
 820                     Your battery worries may be over.
 821                   </div>
 822                 </li>
 823                 <li>
 824                   <div>
 825                     <svg class="fa-life-ring">
 826                       <use xlink:href="#fa-life-ring"></use>
 827                     </svg>
 828                     <h2>Lifetime Warranty </h2>
 829                     We'll fix it or if we can't, we'll replace it.
 830                   </div>
 831                 </li>
 832               </ul>
 833             </div>
 834           </div>
 835           <!-- .end .wrap -->
 836         </section>
 837         <section class="bg-black aligncenter">
 838           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
 839           <span class="background dark" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
 840           <div class="wrap">
 841             <h1 class="text-landing text-shadow">Iceland</h1>
 842             <p><code>section[class*="bg-"] > .background.dark</code></p>
 843           </div>
 844         </section>
 845         <section class="bg-black aligncenter">
 846           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
 847           <span class="background light" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
 848           <div class="wrap">
 849             <h1 class="text-landing text-shadow">Iceland</h1>
 850             <p><code>section[class*="bg-"] > .background.light</code></p>
 851           </div>
 852         </section>
 853         <section class="aligncenter bg-black">
 854           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
 855           <!--.wrap = container (width: 90%) with fadein animation -->
 856           <div class="wrap">
 857             <h2>.background.anim</h2>
 858           </div>
 859           <!-- .end .wrap -->
 860         </section>
 861         <section class="aligncenter">
 862           <div class="wrap">
 863             <h2><strong>Flexible blocks</strong></h2>
 864             <p><code>ul.flexblock</code> = Flexible blocks with auto-fill and equal height.</p>
 865             <hr>
 866             <ul class="flexblock">
 867               <li>
 868                 <h2>
 869                   <svg class="fa-bar-chart">
 870                     <use xlink:href="#fa-bar-chart"></use>
 871                   </svg>
 872                   .flexblock li 1
 873                 </h2>
 874                 Multipurpose: services, features, specs...
 875               </li>
 876               <li>
 877                 <h2>
 878                   <svg class="fa-balance-scale">
 879                     <use xlink:href="#fa-balance-scale"></use>
 880                   </svg>
 881                   .flexblock li 2
 882                 </h2>
 883                 Multipurpose: benefits, clients, work...
 884               </li>
 885               <li>
 886                 <h2>
 887                   <svg class="fa-cog">
 888                     <use xlink:href="#fa-cog"></use>
 889                   </svg>
 890                   .flexblock li 3
 891                 </h2>
 892                 Multipurpose: news, metrics, plans...
 893               </li>
 894             </ul>
 895           </div>
 896           <!-- .end .wrap -->
 897         </section>
 898         <section>
 899           <div class="wrap">
 900             <div class="content-left">
 901               <h3>Flexible Block = <strong>.flexblock</strong></h3>
 902               <p>Auto-fill & Equal height columns:</p>
 903               <pre>&lt;ul class="flexblock"&gt;
 904   &lt;li&gt;
 905     Item 1
 906   &lt;/li&gt;
 907   &lt;li&gt;
 908     Item 2
 909   &lt;/li&gt;
 910   &lt;li&gt;
 911     Item 3
 912   &lt;/li&gt;
 913   &lt;li&gt;
 914     Item 4
 915   &lt;/li&gt;
 916 &lt;/ul&gt;</pre>
 917             </div>
 918             <div class="content-left">
 919               <h3>Block Link = .flexblock.<strong>blink</strong></h3>
 920               <p>Make the whole block clickable:</p>
 921               <pre>&lt;ul class="flexblock blink"&gt;
 922   &lt;li&gt;
 923     &lt;a href="#"&gt;
 924       Item 1
 925     &lt;/a&gt;
 926   &lt;/li&gt;
 927   &lt;li&gt;
 928     &lt;a href=""&gt;
 929       Item 2
 930     &lt;/a&gt;
 931   &lt;/li&gt;
 932 &lt;/ul&gt;</pre>
 933             </div>
 934           </div>
 935           <!-- .end .wrap -->
 936         </section>
 937         <section>
 938           <div class="wrap">
 939             <h3>ul.flexblock</h3>
 940             <ul class="flexblock">
 941               <li>
 942                 <h2>
 943                   <svg class="fa-bar-chart">
 944                     <use xlink:href="#fa-bar-chart"></use>
 945                   </svg>
 946                   Purpose
 947                 </h2>
 948                 Businesses that people love
 949               </li>
 950               <li>
 951                 <h2>
 952                   <svg class="fa-balance-scale">
 953                     <use xlink:href="#fa-balance-scale"></use>
 954                   </svg>
 955                   Principles
 956                 </h2>
 957                 Ethics of openness and good taste
 958               </li>
 959               <li>
 960                 <h2>
 961                   <svg class="fa-cog">
 962                     <use xlink:href="#fa-cog"></use>
 963                   </svg>
 964                   Process
 965                 </h2>
 966                 Useful &rarr; Easy &rarr; Fast &rarr; Beautiful
 967               </li>
 968             </ul>
 969             <hr>
 970             <h3>ul.flexblock.blink</h3>
 971             <ul class="flexblock blink">
 972               <li>
 973                 <a href="#">
 974                   <h2>
 975                     <svg class="fa-bar-chart">
 976                       <use xlink:href="#fa-bar-chart"></use>
 977                     </svg>
 978                     Purpose
 979                   </h2>
 980                   Businesses that people love
 981                 </a>
 982               </li>
 983               <li>
 984                 <a href="">
 985                   <h2>
 986                     <svg class="fa-balance-scale">
 987                       <use xlink:href="#fa-balance-scale"></use>
 988                     </svg>
 989                     Principles
 990                   </h2>
 991                   Ethics of openness and good taste
 992                 </a>
 993               </li>
 994               <li>
 995                 <a href="#">
 996                   <h2>
 997                     <svg class="fa-cog">
 998                       <use xlink:href="#fa-cog"></use>
 999                     </svg>
1000                     Process
1001                   </h2>
1002                   Useful &rarr; Easy &rarr; Fast &rarr; Beautiful
1003                 </a>
1004               </li>
1005             </ul>
1006           </div>
1007           <!-- .end .wrap -->
1008         </section>
1009         <section>
1010           <div class="wrap">
1011             <h3>ul.flexblock.blink.border</h3>
1012             <ul class="flexblock border blink">
1013               <li>
1014                 <a href="">
1015                   <h3>Google</h3>
1016                   2016.- Google Drive
1017                 </a>
1018               </li>
1019               <li><a href=""><strong>Facebook</strong> 2016.- F8 Conference</a></li>
1020               <li><a href=""><strong>Airbnb</strong>2015.- Creative Direction</a></li>
1021               <li><a href=""><strong>Microsoft</strong> 2015.- Content Strategy</a></li>
1022               <li><a href=""><strong>The New York Times</strong>2015.- Recruitment</a></li>
1023               <li><a href=""><strong>Netflix</strong> 2014.- Mobile Apps</a></li>
1024               <li><a href=""><strong>Instagram</strong>2014.- Identity</a></li>
1025               <li><a href=""><strong>Spotify</strong> 2013.- TV Commercials</a></li>
1026             </ul>
1027           </div>
1028           <!-- .end .wrap -->
1029         </section>
1030         <section>
1031           <div class="wrap">
1032             <h2>Clients</h2>
1033             <p><code>ul.flexblock.clients</code></p>
1034             <ul class="flexblock clients">
1035               <li>
1036                 <a href="#" title="Client">
1037                   <figure>
1038                     <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
1039                     <figcaption>
1040                       <h3>Interfaces</h3>
1041                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1042                     </figcaption>
1043                   </figure>
1044                 </a>
1045               </li>
1046               <li>
1047                 <a href="#" title="Client">
1048                   <figure>
1049                     <img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
1050                     <figcaption>
1051                       <h3>Interfaces</h3>
1052                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1053                     </figcaption>
1054                   </figure>
1055                 </a>
1056               </li>
1057               <li>
1058                 <a href="#" title="Client">
1059                   <figure>
1060                     <img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram">
1061                     <figcaption>
1062                       <h3>Interfaces</h3>
1063                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1064                     </figcaption>
1065                   </figure>
1066                 </a>
1067               </li>
1068               <li>
1069                 <a href="#" title="Client">
1070                   <figure>
1071                     <img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
1072                     <figcaption>
1073                       <h3>Interfaces</h3>
1074                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1075                     </figcaption>
1076                   </figure>
1077                 </a>
1078               </li>
1079             </ul>
1080           </div>
1081           <!-- .end .wrap -->
1082         </section>
1083         <section>
1084           <div class="wrap">
1085             <h2>Clients</h2>
1086             <p><code>ul.flexblock.clients.border</code></p>
1087             <ul class="flexblock clients border">
1088               <li>
1089                 <a href="#" title="Client">
1090                   <figure>
1091                     <img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
1092                     <figcaption>
1093                       <h3>Interfaces</h3>
1094                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1095                     </figcaption>
1096                   </figure>
1097                 </a>
1098               </li>
1099               <li>
1100                 <a href="#" title="Client">
1101                   <figure>
1102                     <img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
1103                     <figcaption>
1104                       <h3>Interfaces</h3>
1105                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1106                     </figcaption>
1107                   </figure>
1108                 </a>
1109               </li>
1110               <li>
1111                 <a href="#" title="Client">
1112                   <figure>
1113                     <img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram">
1114                     <figcaption>
1115                       <h3>Interfaces</h3>
1116                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1117                     </figcaption>
1118                   </figure>
1119                 </a>
1120               </li>
1121               <li>
1122                 <a href="#" title="Client">
1123                   <figure>
1124                     <img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
1125                     <figcaption>
1126                       <h3>Interfaces</h3>
1127                       <p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
1128                     </figcaption>
1129                   </figure>
1130                 </a>
1131               </li>
1132             </ul>
1133           </div>
1134           <!-- .end .wrap -->
1135         </section>
1136         <section>
1137           <div class="wrap">
1138             <h3>ul.flexblock.features</h3>
1139             <ul class="flexblock features">
1140               <li>
1141                 <div>
1142                   <h2> <span>100<sup>%</sup></span> customizable</h2>
1143                   Well documented.
1144                 </div>
1145               </li>
1146               <li>
1147                 <div>
1148                   <span><sup>$</sup>48</span>
1149                   <h2>Extra virgin olive oil</h2>
1150                   The Spanish caviar.
1151                 </div>
1152               </li>
1153               <li>
1154                 <div>
1155                   <h2>
1156                     <svg class="fa-wifi">
1157                       <use xlink:href="#fa-wifi"></use>
1158                     </svg>
1159                     Ultra-fast Wifi
1160                   </h2>
1161                   Simple file sharing.
1162                 </div>
1163               </li>
1164             </ul>
1165             <hr>
1166             <h3>ul.flexblock.features.blink</h3>
1167             <ul class="flexblock features blink">
1168               <li>
1169                 <a href="#">
1170                   <div>
1171                     <span><sup>$</sup>48</span>
1172                     <h2>Extra virgin olive oil</h2>
1173                     The Spanish caviar.
1174                   </div>
1175                 </a>
1176               </li>
1177               <li>
1178                 <a href="#">
1179                   <div>
1180                     <h2>
1181                       <svg class="fa-wifi">
1182                         <use xlink:href="#fa-wifi"></use>
1183                       </svg>
1184                       Ultra-fast Wifi
1185                     </h2>
1186                     Simple and secure file sharing.
1187                   </div>
1188                 </a>
1189               </li>
1190             </ul>
1191           </div>
1192           <!-- .end .wrap -->
1193         </section>
1194         <section class="bg-primary">
1195           <div class="wrap">
1196             <h3>ul.flexblock.gallery</h3>
1197             <ul class="flexblock gallery">
1198               <li>
1199                 <a href="#">
1200                   <figure>
1201                     <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
1202                     <figcaption>
1203                       <h2>uWatch</h2>
1204                       <p>By Jane Doe</p>
1205                     </figcaption>
1206                   </figure>
1207                 </a>
1208               </li>
1209               <li>
1210                 <a href="#">
1211                   <figure>
1212                     <img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
1213                     <figcaption>
1214                       <h2>Ellen Daniels</h2>
1215                       <p>CEO</p>
1216                     </figcaption>
1217                   </figure>
1218                 </a>
1219               </li>
1220               <li>
1221                 <a href="#">
1222                   <figure>
1223                     <img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
1224                     <figcaption>
1225                       <h2>New York</h2>
1226                       <p>3,456 rooms</p>
1227                     </figcaption>
1228                   </figure>
1229                 </a>
1230               </li>
1231             </ul>
1232           </div>
1233           <!-- .end .wrap -->
1234         </section>
1235         <section>
1236           <div class="wrap">
1237             <h3>ul.flexblock.gallery + .overlay</h3>
1238             <ul class="flexblock gallery">
1239               <li>
1240                 <a href="#">
1241                   <div class="overlay">
1242                     <h2>New York</h2>
1243                     <p>1,234 rooms</p>
1244                   </div>
1245                   <img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
1246                 </a>
1247               </li>
1248               <li>
1249                 <a href="#">
1250                   <div class="overlay">
1251                     <h2>uWatch</h2>
1252                     <time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
1253                   </div>
1254                   <img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
1255                 </a>
1256               </li>
1257               <li>
1258                 <a href="#">
1259                   <div class="overlay">
1260                     <h2>Ellen Daniels</h2>
1261                     <p>CEO</p>
1262                   </div>
1263                   <img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
1264                 </a>
1265               </li>
1266             </ul>
1267           </div>
1268           <!-- .end .wrap -->
1269         </section>
1270         <section>
1271           <div class="wrap">
1272             <h3>ul.flexblock.metrics</h3>
1273             <!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
1274             <ul class="flexblock metrics">
1275               <li> Founded
1276                 <span>2016</span>
1277               </li>
1278               <li>
1279                 <span>
1280                   <svg class="fa-users">
1281                     <use xlink:href="#fa-users"></use>
1282                   </svg>
1283                 </span>
1284                 24M Subscribers
1285               </li>
1286               <li>
1287                 <span>
1288                   <svg class="fa-line-chart">
1289                     <use xlink:href="#fa-line-chart"></use>
1290                   </svg>
1291                 </span>
1292                 Revenue: $16M
1293               </li>
1294               <li>
1295                 Monthly Growth
1296                 <span>64%</span>
1297               </li>
1298               <li>
1299                 <span>
1300                   <svg class="fa-building-o">
1301                     <use xlink:href="#fa-building-o"></use>
1302                   </svg>
1303                 </span>
1304                 8 Offices
1305               </li>
1306               <li>
1307                 <span>
1308                   <svg class="fa-smile-o">
1309                     <use xlink:href="#fa-smile-o"></use>
1310                   </svg>
1311                 </span>
1312                 48 Employees
1313               </li>
1314               <li>
1315                 <span>
1316                   <svg class="fa-usd">
1317                     <use xlink:href="#fa-usd"></use>
1318                   </svg>
1319                 </span>
1320                 Benefits: $2,4M
1321               </li>
1322               <li>
1323                 <span>
1324                   <svg class="fa-university">
1325                     <use xlink:href="#fa-university"></use>
1326                   </svg>
1327                 </span>
1328                 Bank: $32M
1329               </li>
1330             </ul>
1331           </div>
1332           <!-- .end .wrap -->
1333         </section>
1334         <section>
1335           <div class="wrap">
1336             <h3>ul.flexblock.metrics.border</h3>
1337             <!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
1338             <ul class="flexblock metrics border">
1339               <li> Founded
1340                 <span>2016</span>
1341               </li>
1342               <li>
1343                 <span>
1344                   <svg class="fa-users">
1345                     <use xlink:href="#fa-users"></use>
1346                   </svg>
1347                 </span>
1348                 24M Subscribers
1349               </li>
1350               <li>
1351                 <span>
1352                   <svg class="fa-line-chart">
1353                     <use xlink:href="#fa-line-chart"></use>
1354                   </svg>
1355                 </span>
1356                 Revenue: $16M
1357               </li>
1358               <li>
1359                 Monthly Growth
1360                 <span>64%</span>
1361               </li>
1362               <li>
1363                 <span>
1364                   <svg class="fa-building-o">
1365                     <use xlink:href="#fa-building-o"></use>
1366                   </svg>
1367                 </span>
1368                 8 Offices
1369               </li>
1370               <li>
1371                 <span>
1372                   <svg class="fa-smile-o">
1373                     <use xlink:href="#fa-smile-o"></use>
1374                   </svg>
1375                 </span>
1376                 48 Employees
1377               </li>
1378               <li>
1379                 <span>
1380                   <svg class="fa-usd">
1381                     <use xlink:href="#fa-usd"></use>
1382                   </svg>
1383                 </span>
1384                 Benefits: $2,4M
1385               </li>
1386               <li>
1387                 <span>
1388                   <svg class="fa-university">
1389                     <use xlink:href="#fa-university"></use>
1390                   </svg>
1391                 </span>
1392                 Bank: $32M
1393               </li>
1394             </ul>
1395           </div>
1396           <!-- .end .wrap -->
1397         </section>
1398         <section>
1399           <div class="wrap">
1400             <h2 class="aligncenter">.flexblock.plans.blink </h2>
1401             <p class="aligncenter">All content is for demo purposes only.</p>
1402             <ul class="flexblock plans blink">
1403               <li>
1404                 <a href="#" title="Purchase">
1405                   <h2>Basic</h2>
1406                   <div>
1407                     <span class="price">Free</span>
1408                     <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
1409                     <span class="button">Select</span>
1410                   </div>
1411                 </a>
1412               </li>
1413               <li>
1414                 <a href="#" title="Purchase">
1415                   <h2>Medium</h2>
1416                   <div>
1417                     <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
1418                     <p>Clean markup with popular naming conventions. Minimum effort.</p>
1419                     <span class="button">Buy Now</span>
1420                   </div>
1421                 </a>
1422               </li>
1423               <li>
1424                 <a href="#" title="Purchase">
1425                   <h2>Premium <sup>(save 20%)</sup></h2>
1426                   <div>
1427                     <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
1428                     <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
1429                     <span class="button">Select</span>
1430                   </div>
1431                 </a>
1432               </li>
1433             </ul>
1434           </div>
1435           <!-- .end .wrap -->
1436         </section>
1437         <section class="bg-purple">
1438           <div class="wrap size-50">
1439             <ul class="flexblock plans blink">
1440               <li>
1441                 <a href="#" title="Register">
1442                   <h2>Basic</h2>
1443                   <div>
1444                     <span class="price">Free</span>
1445                     <ul>
1446                       <li>
1447                         <svg class="fa-check">
1448                           <use xlink:href="#fa-check"></use>
1449                         </svg>
1450                         <strong>Free</strong> forever
1451                       </li>
1452                       <li>
1453                         <svg class="fa-check">
1454                           <use xlink:href="#fa-check"></use>
1455                         </svg>
1456                         <strong>Eternal</strong> sunshine
1457                       </li>
1458                       <li>
1459                         <svg class="fa-check">
1460                           <use xlink:href="#fa-check"></use>
1461                         </svg>
1462                         <strong>Ads</strong>
1463                       </li>
1464                     </ul>
1465                     <span class="button ghost">Select</span>
1466                   </div>
1467                 </a>
1468               </li>
1469               <li>
1470                 <a href="#" title="Purchase">
1471                   <h2>Good Karma</h2>
1472                   <div>
1473                     <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
1474                     <ul>
1475                       <li>
1476                         <svg class="fa-check">
1477                           <use xlink:href="#fa-check"></use>
1478                         </svg>
1479                         <strong>Exclusive</strong> content
1480                       </li>
1481                       <li>
1482                         <svg class="fa-check">
1483                           <use xlink:href="#fa-check"></use>
1484                         </svg>
1485                         <strong>Unlimited</strong> projects
1486                       </li>
1487                       <li>
1488                         <svg class="fa-check">
1489                           <use xlink:href="#fa-check"></use>
1490                         </svg>
1491                         <strong>Unlimited</strong> users
1492                       </li>
1493                     </ul>
1494                     <span class="button">Select</span>
1495                   </div>
1496                 </a>
1497               </li>
1498             </ul>
1499           </div>
1500           <!-- .end .wrap -->
1501         </section>
1502         <section>
1503           <div class="card-50">
1504             <div class="flex-content">
1505               <h3>ul.flexblock.specs</h3>
1506               <ul class="flexblock specs">
1507                 <li>
1508                   <div>
1509                     <svg class="fa-wifi">
1510                       <use xlink:href="#fa-wifi"></use>
1511                     </svg>
1512                     <h2>Ultra-Fast WiFi</h2>
1513                     Simple and secure file sharing.
1514                   </div>
1515                 </li>
1516                 <li>
1517                   <div>
1518                     <svg class="fa-battery-full">
1519                       <use xlink:href="#fa-battery-full"></use>
1520                     </svg>
1521                     <h2>All day battery life</h2>
1522                     Your battery worries may be over.
1523                   </div>
1524                 </li>
1525                 <li>
1526                   <div>
1527                     <svg class="fa-life-ring">
1528                       <use xlink:href="#fa-life-ring"></use>
1529                     </svg>
1530                     <h2>Lifetime Warranty </h2>
1531                     We'll fix it or if we can't, we'll replace it.
1532                   </div>
1533                 </li>
1534               </ul>
1535             </div>
1536             <!-- end .flex-content-->
1537             <figure>
1538               <img class="aligncenter" src="../static/images/android.png" alt="Pixel Phone">
1539             </figure>
1540           </div>
1541           <!-- .end card-50 -->
1542         </section>
1543         <section class="bg-gradient-gray">
1544           <!--.wrap = container (width: 90%) -->
1545           <div class="wrap size-50">
1546             <h3>.flexblock.reasons</h3>
1547             <hr>
1548             <div class="bg-white shadow">
1549               <ul class="flexblock reasons">
1550                 <li>
1551                   <h2>Why WebSlides? Work better, faster.</h2>
1552                   <p>Designers and marketers can now focus on the content. Simply <a href="../demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
1553                 </li>
1554                 <li>
1555                   <h2> Good karma. Just the essentials and using lovely CSS.</h2>
1556                   <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
1557                 </li>
1558               </ul>
1559             </div>
1560             <!-- .end bg-white.shadow -->
1561           </div>
1562           <!-- .end .wrap -->
1563         </section>
1564         <section>
1565           <div class="wrap">
1566             <h3>ul.flexblock.steps</h3>
1567             <ul class="flexblock steps">
1568               <!-- li>a? Add blink = <ul class="flexblock steps blink">-->
1569               <li>
1570                 <span>
1571                   <svg class="fa-heartbeat">
1572                     <use xlink:href="#fa-heartbeat"></use>
1573                   </svg>
1574                 </span>
1575                 <h2>01. Passion</h2>
1576                 <p>When you're really passionate about your job, you can change the world.</p>
1577               </li>
1578               <li>
1579                 <div class="process step-2"></div>
1580                 <span>
1581                   <svg class="fa-magic">
1582                     <use xlink:href="#fa-magic"></use>
1583                   </svg>
1584                 </span>
1585                 <h2>02. Purpose</h2>
1586                 <p>Why does this business exist? How are you different? Why matters?</p>
1587               </li>
1588               <li>
1589                 <div class="process step-3"></div>
1590                 <span>
1591                   <svg class="fa-balance-scale">
1592                     <use xlink:href="#fa-balance-scale"></use>
1593                   </svg>
1594                 </span>
1595                 <h2>03. Principles</h2>
1596                 <p>Leadership through usefulness, openness, empathy, and good taste.</p>
1597               </li>
1598               <li>
1599                 <div class="process step-4"></div>
1600                 <span>
1601                   <svg class="fa-cog">
1602                     <use xlink:href="#fa-cog"></use>
1603                   </svg>
1604                 </span>
1605                 <h2>04. Process</h2>
1606                 <ul>
1607                   <li>Useful</li>
1608                   <li>Easy</li>
1609                   <li>Fast</li>
1610                   <li>Beautiful</li>
1611                 </ul>
1612               </li>
1613             </ul>
1614           </div>
1615           <!-- .end .wrap -->
1616         </section>
1617         <section>
1618           <div class="wrap">
1619             <h3>ul.flexblock.activity</h3>
1620             <ul class="flexblock activity">
1621               <li>
1622                 <a href="#" title="UX Designer at ACME">
1623                   <div>
1624                     <p class="year">
1625                       2016
1626                     </p>
1627                     <p class="title">
1628                       UX Designer at ACME
1629                     </p>
1630                     <p class="summary">
1631                       This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
1632                     </p>
1633                   </div>
1634                 </a>
1635               </li>
1636               <li>
1637                 <a href="#" title="14 world famous buildings to inspire you">
1638                   <p class="year">
1639                     2 mins ago
1640                   </p>
1641                   <p class="title">
1642                     14 world famous buildings to inspire you
1643                   </p>
1644                   <p class="summary">
1645                     From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
1646                   </p>
1647                 </a>
1648               </li>
1649               <li>
1650                 <a href="#" title="Co-Founder of GAMMA">
1651                   <p class="year">
1652                     2013
1653                   </p>
1654                   <p class="title">
1655                     Co-Founder of GAMMA
1656                   </p>
1657                   <p class="summary">
1658                     The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
1659                   </p>
1660                 </a>
1661               </li>
1662             </ul>
1663           </div>
1664           <!-- .end .wrap -->
1665         </section>
1666         <section>
1667           <div class="wrap">
1668             <div class="cta">
1669               <div class="number">
1670                 <p><span>Ag</span></p>
1671               </div>
1672               <!--end .number -->
1673               <div class="benefit">
1674                 <p class="text-subtitle">Roboto in <a target="_blank" href="https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Roboto:400,700,700italic,400italic,300,300italic">Google Fonts</a>.</p>
1675                 <h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
1676                 <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
1677                 <p>abcdefghijklmnopqrstuvwxyz</p>
1678                 <p>1234567890(,.;:?!$&*)</p>
1679               </div>
1680               <!--end .benefit -->
1681             </div>
1682             <!--end .cta -->
1683           </div>
1684           <!-- .end .wrap -->
1685         </section>
1686         <section class="aligncenter">
1687           <div class="wrap">
1688             <h1 class="text-landing">Landings</h1>
1689             <p><code>.text-landing</code></p>
1690           </div>
1691           <!-- .end .wrap -->
1692         </section>
1693         <section class="aligncenter">
1694           <div class="wrap">
1695             <h1 class="text-landing">Landings</h1>
1696             <p class="text-intro">Create a simple web presence.</p>
1697             <p><code>.text-intro</code> </p>
1698           </div>
1699           <!-- .end .wrap -->
1700         </section>
1701         <section class="aligncenter">
1702           <div class="wrap">
1703             <p class="text-subtitle">Powered by <a href="https://twitter.com/search?f=tweets&vertical=default&q=%23WebSlides&src=typd">#WebSlides</a> <code>.text-subtitle</code></p>
1704             <h1 class="text-landing">Landings</h1>
1705             <p class="text-intro">Create a simple web presence.</p>
1706           </div>
1707           <!-- .end .wrap -->
1708         </section>
1709         <section class="bg-black aligncenter">
1710           <span class="background" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
1711           <div class="wrap">
1712             <h1 class="text-landing text-shadow"><strong>Landings</strong></h1>
1713             <p class="text-intro"><code>.text-shadow</code></p>
1714           </div>
1715           <!-- .end .wrap -->
1716         </section>
1717         <section class="bg-apple aligncenter">
1718           <h2 class="text-data">4,235,678</h2>
1719           <p><code>.text-data</code></p>
1720         </section>
1721         <section>
1722           <!--.wrap = container (width: 90%) with fadein animation -->
1723           <div class="wrap">
1724             <p class="text-context">Why WebSlides? .text-context</p>
1725             <h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
1726           </div>
1727           <!-- .end .wrap -->
1728         </section>
1729         <section>
1730           <div class="wrap">
1731           <p><code>.text-cols (2 columns)</code></p>
1732             <div class="text-cols">
1733               <p><strong>Why WebSlides?</strong> There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. <strong>Each parent &lt;section&gt;</strong> in the #webslides element is an individual slide. </p>
1734               <p><strong>WebSlides help you build a culture of innovation and excellence</strong>. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.</p>
1735             </div>
1736             <ul class="flexblock metrics">
1737               <li>
1738                 <div>
1739                   <svg class="fa-phone">
1740                     <use xlink:href="#fa-phone"></use>
1741                   </svg>
1742                   Call us at 555.345.6789
1743                 </div>
1744               </li>
1745               <li>
1746                 <div>
1747                   <svg class="fa-twitter">
1748                     <use xlink:href="#fa-twitter"></use>
1749                   </svg>
1750                   @username
1751                 </div>
1752               </li>
1753               <li>
1754                 <div>
1755                   <svg class="fa-envelope">
1756                     <use xlink:href="#fa-envelope"></use>
1757                   </svg>
1758                   Send us an email
1759                 </div>
1760               </li>
1761             </ul>
1762           </div>
1763           <!-- .end .wrap -->
1764         </section>
1765         <section>
1766           <div class="wrap">
1767             <div class="grid vertical-align">
1768               <div class="column">
1769                 <h2>
1770                   A Phone by Google
1771                 </h2>
1772                 <p class="text-intro">Pixel's camera lets you take brilliant photos in low light, bright light or any light.</p>
1773                 <ul class="description">
1774                   <li>
1775                     <span class="text-label">
1776                     .text-label:
1777                     </span>
1778                     Google (2016).
1779                   </li>
1780                   <li>
1781                     <span class="text-label">
1782                     Services:
1783                     </span>
1784                     Industrial Design.
1785                   </li>
1786                   <li>
1787                     <span class="text-label">
1788                     Website:
1789                     </span>
1790                     <a href="https://madeby.google.com/phone/">madeby.google.com/phone/</a>
1791                   </li>
1792                 </ul>
1793               </div>
1794               <!-- end .column-->
1795               <div class="column">
1796                 <figure>
1797                   <img src="../static/images/android.png" alt="Pixel Phone">
1798                 </figure>
1799               </div>
1800               <!-- end figure-->
1801             </div>
1802             <!-- end .grid-->
1803           </div>
1804           <!-- end .wrap-->
1805         </section>
1806         <section>
1807           <div class="wrap">
1808             <div class="cta text-serif">
1809               <div class="number">
1810                 <p><span>Ag</span></p>
1811               </div>
1812               <!--end .number -->
1813               <div class="benefit">
1814                 <p class="text-subtitle">Maitree in <a target="_blank" href="https://fonts.google.com/specimen/Maitree">Google Fonts</a>.</p>
1815                 <h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
1816                 <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
1817                 <p>abcdefghijklmnopqrstuvwxyz</p>
1818                 <p>1234567890(,.;:?!$&*)</p>
1819               </div>
1820               <!--end .benefit -->
1821             </div>
1822             <!--end .cta -->
1823           </div>
1824           <!-- .end .wrap -->
1825         </section>
1826         <section class="aligncenter text-serif">
1827           <!--.wrap = container (width: 90%) with fadein animation -->
1828           <div class="wrap">
1829             <div class="content-left">
1830               <h2>WebSlides is incredibly easy and versatile.</h2>
1831               <p><code>.text-serif</code> (Maitree)</p>
1832             </div>
1833             <div class="content-left">
1834               <p>Each parent &lt;section&gt; in the #webslides element is an individual slide.</p>
1835               <p>Clean markup with popular naming conventions. Minimum effort. Just focus on your content.</p>
1836             </div>
1837           </div>
1838           <!-- .end .wrap -->
1839         </section>
1840         <section>
1841           <div class="wrap size-50">
1842             <h3><strong>What is Stendhal Syndrome?</strong></h3>
1843             <p class="text-intro">Beauty overdose. <code>.text-pull-right</code></p>
1844             <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
1845             <p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
1846             <p>The syndrome is not only associated with viewing a beautiful place, but also good art. </p>
1847             <p>The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.</p>
1848             <p class="text-symbols">* * *</p>
1849           </div>
1850           <!-- .end .wrap -->
1851         </section>
1852         <section class="bg-apple aligncenter">
1853           <h2>One more thing...</h2>
1854           <p><code>.text-apple / .bg-apple</code></p>
1855         </section>
1856         <section class="aligncenter">
1857           <div class="wrap">
1858             <ul class="flexblock gallery">
1859               <li>
1860                 <a target="_blank" href="../demos/why-webslides.html" title="Why WebSlides?">
1861                   <figure>
1862                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
1863                     <figcaption>
1864                       <h2>Why WebSlides?</h2>
1865                     </figcaption>
1866                   </figure>
1867                 </a>
1868               </li>
1869               <li>
1870                 <a target="_blank" href="../demos/landings.html" title="Landings">
1871                   <figure>
1872                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
1873                     <figcaption>
1874                       <h2>Landings</h2>
1875                     </figcaption>
1876                   </figure>
1877                 </a>
1878               </li>
1879               <li>
1880                 <a target="_blank" href="../demos/portfolios.html" title="Portfolios">
1881                   <figure>
1882                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
1883                     <figcaption>
1884                       <h2>Portfolios</h2>
1885                     </figcaption>
1886                   </figure>
1887                 </a>
1888               </li>
1889               <li>
1890                 <a target="_blank" href="../demos/keynote.html" title="Apple Keynote">
1891                   <figure>
1892                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
1893                     <figcaption>
1894                       <h2>Apple Keynote</h2>
1895                     </figcaption>
1896                   </figure>
1897                 </a>
1898               </li>
1899             </ul>
1900           </div>
1901           <!-- .end .wrap -->
1902         </section>
1903         <section class="aligncenter">
1904           <!-- .wrap = container (width: 90%) -->
1905           <div class="wrap">
1906             <h2><strong>Start in seconds</strong> </h2>
1907             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
1908             <p>
1909               <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
1910                 <svg class="fa-cloud-download">
1911                   <use xlink:href="#fa-cloud-download"></use>
1912                 </svg>
1913                 Free Download
1914               </a>
1915               <span class="try">
1916                 <a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
1917                   <svg class="fa-paypal">
1918                     <use xlink:href="#fa-paypal"></use>
1919                   </svg>
1920                   Pay what you want.
1921                 </a>
1922               </span>
1923             </p>
1924           </div>
1925           <!-- .end .wrap -->
1926         </section>
1927
1928       </article>
1929     </main>
1930     <!--main-->
1931
1932     <!-- Required -->
1933     <script src="../static/js/webslides.js"></script>
1934
1935     <script>
1936       window.ws = new WebSlides();
1937     </script>
1938
1939     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
1940     <script defer src="../static/js/svg-icons.js"></script>
1941
1942   </body>
1943 </html>