mypapers/webslides/index.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       @jlantunez.
  16     -->
  17
  18     <!-- SEO -->
  19     <title>WebSlides: Making HTML presentations easy</title>
  20     <meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
  21
  22     <!-- URL CANONICAL -->
  23     <!-- <link rel="canonical" href="http://your-url.com/"> -->
  24
  25     <!-- Google Fonts -->
  26     <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">
  27
  28     <!-- CSS WebSlides -->
  29     <link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
  30
  31     <!-- Optional - CSS SVG Icons (Font Awesome) -->
  32     <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
  33
  34     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
  35
  36     <!-- FACEBOOK -->
  37     <meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
  38     <meta property="og:type" content="article">
  39     <meta property="og:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
  40     <meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
  41     <meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
  42     <meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
  43
  44     <!-- TWITTER -->
  45     <meta name="twitter:card" content="summary_large_image">
  46     <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
  47     <meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
  48     <meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
  49     <meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT -->
  50     <meta name="twitter:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
  51
  52     <!-- FAVICONS -->
  53     <link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
  54     <link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
  55     <link rel="apple-touch-icon icon" sizes="76x76" href="static/images/favicons/favicon-76.png">
  56     <link rel="apple-touch-icon icon" sizes="120x120" href="static/images/favicons/favicon-120.png">
  57     <link rel="apple-touch-icon icon" sizes="152x152" href="static/images/favicons/favicon-152.png">
  58     <link rel="apple-touch-icon icon" sizes="180x180" href="static/images/favicons/favicon-180.png">
  59     <link rel="apple-touch-icon icon" sizes="192x192" href="static/images/favicons/favicon-192.png">
  60
  61     <!-- Android -->
  62     <meta name="mobile-web-app-capable" content="yes">
  63     <meta name="theme-color" content="#333333">
  64
  65   </head>
  66   <body>
  67     <header role="banner">
  68       <nav role="navigation">
  69         <p class="logo"><a href="index.html" title="WebSlides">WebSlides</a></p>
  70         <ul>
  71           <li class="github">
  72             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
  73               <svg class="fa-github">
  74                 <use xlink:href="#fa-github"></use>
  75               </svg>
  76               <em>WebSlides</em>
  77             </a>
  78           </li>
  79           <li class="twitter">
  80             <a rel="external" href="https://twitter.com/webslides" title="Twitter">
  81               <svg class="fa-twitter">
  82                 <use xlink:href="#fa-twitter"></use>
  83               </svg>
  84               <em>@WebSlides</em>
  85             </a>
  86           </li>
  87           <!--  <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> -->
  88         </ul>
  89       </nav>
  90     </header>
  91
  92     <main role="main">
  93       <article id="webslides" class="vertical">
  94         <!-- Quick Guide
  95           - Each parent <section> in the <article id="webslides"> element is an individual slide.
  96           - Vertical sliding = <article id="webslides" class="vertical">
  97           - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
  98         -->
  99
 100         <section>
 101          <span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
 102           <!--.wrap = container (width: 90%) -->
 103           <div class="wrap aligncenter">
 104             <h1><strong>Create beautiful stories</strong></h1>
 105             <p class="text-intro">WebSlides makes HTML presentations easy.<br>
 106               Just the essentials and using lovely CSS.
 107             </p>
 108             <p>
 109               <a href="https://webslides.tv/webslides-latest.zip" class="button zoomIn" title="Download WebSlides for free">
 110                 <svg class="fa-cloud-download">
 111                   <use xlink:href="#fa-cloud-download"></use>
 112                 </svg>
 113                 WebSlides
 114               </a>
 115             </p>
 116           </div>
 117           <!-- .end .wrap -->
 118         </section>
 119         <section>
 120           <!--.wrap = container (width: 90%) -->
 121           <div class="wrap size-50 aligncenter">
 122             <h2><strong>Why WebSlides?</strong></h2>
 123             <p class="text-intro"><a href="demos/why-webslides.html" title="Why WebSlides?">Presentations</a>, <a href="demos/landings.html" title="Landings">landings</a>, <a href="demos/portfolios.html" title="Portfolios">portfolios</a>, and <a href="demos/longforms.html" title="Longforms">longforms</a>.</p>
 124             <div class="bg-white shadow">
 125               <ul class="flexblock reasons">
 126                 <li>
 127                   <h2>An opportunity to engage.</h2>
 128                   <p>WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.</p>
 129                 </li>
 130                 <li>
 131                   <h2>Work better, faster.</h2>
 132                   <p>Designers, marketers, and journalists can now focus on the content. Simply <a href="demos/index.html" title="WebSlides Demos">choose a demo</a> and customize it in minutes.</p>
 133                 </li>
 134               </ul>
 135             </div>
 136             <!-- .end .bg-white shadow -->
 137           </div>
 138           <!-- .end .wrap -->
 139         </section>
 140         <section>
 141           <!--.wrap = container (width: 90%) -->
 142           <div class="wrap">
 143             <div class="grid vertical-align">
 144               <div class="column">
 145                 <h3><strong>WebSlides is really easy</strong></h3>
 146                 <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide. </p>
 147                 <p>Code is clean and scalable. It uses <strong>intuitive markup</strong> with popular naming conventions. There's no need to overuse classes or nesting. <strong>Making an HTML presentation has never been so fast</strong>.</p>
 148               </div>
 149               <!-- .end .column -->
 150               <div class="column">
 151                 <pre>&lt;article id="webslides"&gt;
 152   <span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
 153   &lt;section&gt;
 154     &lt;h1&gt;Design for trust&lt;/h1&gt;
 155   &lt;/section&gt;
 156   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
 157   &lt;section class="bg-primary"&gt;
 158     &lt;div class="wrap"&gt;
 159       &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
 160     &lt;/div&gt;
 161   &lt;/section&gt;
 162 &lt;/article&gt;
 163 </pre>
 164               </div>
 165               <!-- .end .column -->
 166             </div>
 167             <!-- .end .grid -->
 168           </div>
 169           <!-- .end .wrap -->
 170         </section>
 171         <section>
 172           <div class="wrap">
 173             <h2>Features</h2>
 174             <ul class="flexblock features">
 175               <li>
 176                 <div>
 177                   <h2>
 178                     <span>&rarr;</span>
 179                     Simple Navigation
 180                   </h2>
 181                   with arrow keys, presenter...
 182                 </div>
 183               </li>
 184               <li>
 185                 <div>
 186                   <h2>
 187                     <svg class="fa-link">
 188                       <use xlink:href="#fa-link"></use>
 189                     </svg>
 190                     Permalinks
 191                   </h2>
 192                   Go to a specific slide.
 193                 </div>
 194               </li>
 195               <li>
 196                 <div>
 197                   <h2>
 198                     <svg class="fa-clock-o">
 199                       <use xlink:href="#fa-clock-o"></use>
 200                     </svg>
 201                     Slide Counter
 202                   </h2>
 203                   Current/Total number.
 204                 </div>
 205               </li>
 206               <li>
 207                 <div>
 208                   <h2>
 209                     <span>40<sup>+</sup></span>
 210                     Beautiful Components
 211                   </h2>
 212                   Covers, cards, quotes...
 213                 </div>
 214               </li>
 215               <li>
 216                 <div>
 217                   <h2>
 218                     <svg class="fa-text-height">
 219                       <use xlink:href="#fa-text-height"></use>
 220                     </svg>
 221                     Vertical Rhythm
 222                   </h2>
 223                   Use multiples of 8.
 224                 </div>
 225               </li>
 226               <li>
 227                 <div>
 228                   <h2>
 229                     <span>500<sup>+</sup></span>
 230                     SVG Icons
 231                   </h2>
 232                   Font Awesome Kit.
 233                 </div>
 234               </li>
 235             </ul>
 236           </div>
 237         </section>
 238         <section>
 239           <div class="wrap">
 240             <h2><strong>WebSlides Demos</strong></h2>
 241             <p>Contribute on <a href="https://github.com/webslides/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all &rsaquo;</a></span></p>
 242             <ul class="flexblock gallery">
 243               <li>
 244                 <a href="demos/why-webslides.html" title="Why WebSlides?">
 245                   <figure>
 246                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
 247                     <figcaption>
 248                       <h2>Why WebSlides?</h2>
 249                     </figcaption>
 250                   </figure>
 251                 </a>
 252               </li>
 253               <li>
 254                 <a href="demos/landings.html" title="Landings">
 255                   <figure>
 256                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
 257                     <figcaption>
 258                       <h2>Landings</h2>
 259                     </figcaption>
 260                   </figure>
 261                 </a>
 262               </li>
 263               <li>
 264                 <a href="demos/portfolios.html" title="Portfolios">
 265                   <figure>
 266                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
 267                     <figcaption>
 268                       <h2>Portfolios</h2>
 269                     </figcaption>
 270                   </figure>
 271                 </a>
 272               </li>
 273               <li>
 274                 <a href="demos/keynote.html" title="Apple Keynote">
 275                   <figure>
 276                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
 277                     <figcaption>
 278                       <h2>Apple Keynote</h2>
 279                     </figcaption>
 280                   </figure>
 281                 </a>
 282               </li>
 283             </ul>
 284           </div>
 285           <!-- .end .wrap -->
 286         </section>
 287         <section>
 288           <div class="wrap">
 289             <div class="grid vertical-align">
 290               <div class="column">
 291                 <h4>
 292                   <svg class="fa-life-ring">
 293                     <use xlink:href="#fa-life-ring"></use>
 294                   </svg>
 295                   <strong>Guides</strong>
 296                 </h4>
 297                 <p>If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:</p>
 298                 <ul class="description">
 299                   <li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
 300                   <li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
 301                   <li><a href="demos/media.html" title="WebSlides Media">WebSlides Media: images, videos...</a></li>
 302                 </ul>
 303               </div>
 304               <div class="column">
 305                 <figure><img class="aligncenter" src="static/images/setup.png" alt="WebSlides Files"></figure>
 306               </div>
 307               <div class="column">
 308                 <h4>
 309                   <svg class="fa-cubes">
 310                     <use xlink:href="#fa-cubes"></use>
 311                   </svg>
 312                   <strong>Built to expand</strong>
 313                 </h4>
 314                 <p>The best way to <strong>inspire with your content</strong> is to connect on a personal level:</p>
 315                 <ul class="description">
 316                   <li>Background images: <a href="http://unsplash.com">Unsplash</a>.</li>
 317                   <li>CSS animations: <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</li>
 318                   <li>Longforms: <a href="http://michalsnik.github.io/aos/"> Animate on scroll</a>.</li>
 319                 </ul>
 320               </div>
 321             </div>
 322             <!--end .grid -->
 323           </div>
 324         </section>
 325         <section class="aligncenter">
 326           <!-- .wrap = container (width: 90%) -->
 327           <div class="wrap">
 328             <h2><strong>Ready to Start?</strong> </h2>
 329             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
 330             <p>
 331               <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
 332                 <svg class="fa-cloud-download">
 333                   <use xlink:href="#fa-cloud-download"></use>
 334                 </svg>
 335                 Free Download
 336               </a>
 337               <span class="try">
 338                 <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
 339                   <svg class="fa-paypal">
 340                     <use xlink:href="#fa-paypal"></use>
 341                   </svg>
 342                   Pay what you want.
 343                 </a>
 344               </span>
 345             </p>
 346           </div>
 347           <!-- .end .wrap -->
 348         </section>
 349         <section class="slide-bottom">
 350           <div class="wrap">
 351             <div class="content-right text-serif">
 352               <h2>
 353                 <strong>Thanks.</strong>
 354                 <a target="_blank" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=Finally,%20everything%20you%20need%20to%20make%20HTML%20presentations%20in%20a%20fast/beautiful%20way.%20@WebSlides%20=%20Good%20karma%20&mdash;%20https://webslides.tv">
 355                   <svg class="fa-twitter">
 356                     <use xlink:href="#fa-twitter"></use>
 357                   </svg>
 358                 </a>
 359               </h2>
 360               <p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.</p>
 361               <p>Best,<br> <a href="https://twitter.com/jlantunez">@jlantunez</a>, <a href="https://twitter.com/belelros">@belelros</a>, and <a href="https://twitter.com/luissacristan">@luissacristan</a>.</p>
 362             </div>
 363             <!-- .end .content-right -->
 364           </div>
 365           <!-- .end .wrap -->
 366         </section>
 367
 368       </article>
 369       <!-- end article -->
 370     </main>
 371     <!-- end main -->
 372
 373    <!-- A global footer
 374
 375      <footer role="contentinfo">
 376       <div class="wrap">
 377         <p>An <a href="https://github.com/webslides/webslides">open source solution</a>, by <a href="https://twitter.com/webslides">@webslides</a>.</p>
 378       </div>
 379     </footer>  -->
 380
 381     <!-- Required -->
 382     <script src="static/js/webslides.js"></script>
 383     <script>
 384       window.ws = new WebSlides();
 385     </script>
 386
 387     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
 388     <script defer src="static/js/svg-icons.js"></script>
 389
 390   </body>
 391 </html>