mypapers/webslides/demos/why-webslides.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: Why WebSlides is so inspiring?</title>
  19     <meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials.">
  20
  21     <!-- URL CANONICAL -->
  22     <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
  23
  24     <!-- Google Fonts -->
  25     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
  26
  27     <!-- CSS Base -->
  28     <link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
  29
  30     <!-- Optional - CSS SVG Icons (Font Awesome) -->
  31     <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
  32
  33     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
  34
  35     <!-- FACEBOOK -->
  36     <meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
  37     <meta property="og:type" content="article">
  38     <meta property="og:title" content="Why WebSlides? Good karma" />
  39     <meta property="og:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
  40     <meta property="og:updated_time" content="2017-01-04T16:27:50"> <!-- EDIT -->
  41     <meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT -->
  42     <meta property="og:image:width" content="800">
  43     <meta property="og:image:height" content="429">
  44
  45     <!-- TWITTER -->
  46     <meta name="twitter:card" content="summary_large_image">
  47     <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
  48     <meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
  49     <meta name="twitter:title" content="Why WebSlides? Good karma"> <!-- EDIT -->
  50     <meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
  51     <meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.jpg"> <!-- EDIT -->
  52
  53     <!-- FAVICONS -->
  54     <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
  55     <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
  56     <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
  57     <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
  58     <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
  59     <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
  60     <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
  61
  62     <!-- Android -->
  63     <meta name="mobile-web-app-capable" content="yes">
  64     <meta name="theme-color" content="#333333">
  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
  95         <!-- Quick Guide
  96           - Each parent <section> in the <article id="webslides"> element is an individual slide.
  97           - Vertical sliding = <article id="webslides" class="vertical">
  98           - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
  99         -->
 100
 101         <section>
 102           <!--.wrap = container (width: 90%) -->
 103           <div class="wrap aligncenter">
 104             <h1 class="text-landing">Good Karma</h1>
 105             <p class="text-intro">
 106               <strong><a href="http://webslides.tv/">WebSlides</a></strong> &mdash; HTML presentations made easy. <br>
 107               Hypertext and beauty as narrative elements.
 108             </p>
 109             <nav>
 110                <ul>
 111                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
 112                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
 113                  <li><a href="https://github.com/webslides/webslides">Github</a></li>
 114                </ul>
 115              </nav>
 116           </div>
 117           <!-- .end .wrap -->
 118         </section>
 119         <section class="bg-black aligncenter">
 120           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
 121           <span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
 122           <!-- background with a frame frame -->
 123           <span class="background frame"></span>
 124           <!--.wrap = container (width: 90%) -->
 125           <div class="wrap fadeInUp">
 126             <h1>
 127               Everyone
 128               <svg class="fa-heart-o">
 129                 <use xlink:href="#fa-heart-o"></use>
 130               </svg>
 131               Stories
 132             </h1>
 133           </div>
 134           <!-- .end .wrap -->
 135         </section>
 136         <section>
 137           <!--.wrap = container (width: 90%) -->
 138           <div class="wrap">
 139             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
 140             <div class="content-center">
 141               <h2><strong>Why WebSlides?</strong></h2>
 142               <blockquote>
 143                 <p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made <a href="https://twitter.com/search?q=%23webslides&amp;src=typd">#WebSlides</a>."</p>
 144                 <p><cite> <img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a>.</cite></p>
 145               </blockquote>
 146             </div>
 147           </div>
 148           <!-- .end .wrap -->
 149         </section>
 150         <section>
 151           <!--.wrap = container (width: 90%) -->
 152           <div class="wrap">
 153             <div class="grid vertical-align">
 154               <div class="column">
 155                 <h3><strong>WebSlides is really easy</strong></h3>
 156                 <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide. </p>
 157                 <p>Code is clean, scalable, and well documented. It uses <strong>intuitive markup</strong> with popular naming conventions. 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>
 158               </div>
 159               <!-- .end .column -->
 160               <div class="column">
 161                 <pre>&lt;article id="webslides"&gt;
 162   <span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
 163   &lt;section&gt;
 164     &lt;h1&gt;Design for trust&lt;/h1&gt;
 165   &lt;/section&gt;
 166   <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
 167   &lt;section class="bg-primary"&gt;
 168     &lt;div class="wrap"&gt;
 169       &lt;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
 170     &lt;/div&gt;
 171   &lt;/section&gt;
 172 &lt;/article&gt;
 173 </pre>
 174               </div>
 175               <!-- .end .column -->
 176             </div>
 177             <!-- .end .grid -->
 178           </div>
 179           <!-- .end .wrap -->
 180         </section>
 181         <section>
 182           <!--.wrap = container (width: 90%) -->
 183           <div class="wrap">
 184             <div class="content-left">
 185               <h2>WebSlides was made to inspire people.</h2>
 186             </div>
 187             <div class="content-left">
 188             <p>There are excellent presentation tools out there. WebSlides is <strong>an open source solution</strong> for telling stories. Hypertext and beauty as narrative elements.</p>
 189             </div>
 190             <ul class="flexblock features">
 191               <li>
 192                 <div>
 193                   <h2>
 194                     <span>&rarr;</span>
 195                     Keyboard navigation
 196                   </h2>
 197                   with arrow keys.
 198                 </div>
 199               </li>
 200               <li>
 201                 <div>
 202                   <h2>
 203                     <svg class="fa-link">
 204                       <use xlink:href="#fa-link"></use>
 205                     </svg>
 206                     Go to a specific slide
 207                   </h2>
 208                   URL: #slide=number
 209                 </div>
 210               </li>
 211               <li>
 212                 <div>
 213                   <h2>
 214                     <svg class="fa-clock o">
 215                       <use xlink:href="#fa-clock-o"></use>
 216                     </svg>
 217                     Slide counter
 218                   </h2>
 219                   Current/Total number.
 220                 </div>
 221               </li>
 222             </ul>
 223           </div>
 224           <!-- .end .wrap -->
 225         </section>
 226         <section>
 227           <div class="wrap">
 228             <ul class="flexblock features">
 229               <li>
 230                 <div>
 231                   <h2><span>100<sup>%</sup></span> customizable</h2>
 232                   Well documented.
 233                 </div>
 234               </li>
 235               <li>
 236                 <div>
 237                   <h2>
 238                     <span>40<sup>+</sup></span>
 239                     Beautiful Components
 240                   </h2>
 241                   Covers, cards, quotes...
 242                 </div>
 243               </li>
 244               <li>
 245                 <div>
 246                   <h2>
 247                     <svg class="fa-list">
 248                       <use xlink:href="#fa-list"></use>
 249                     </svg>
 250                     Flexible blocks
 251                   </h2>
 252                   with auto-fill and equal height.
 253                 </div>
 254               </li>
 255               <li>
 256                 <div>
 257                   <h2>
 258                     <svg class="fa-text-height">
 259                       <use xlink:href="#fa-text-height"></use>
 260                     </svg>
 261                     Vertical rhythm
 262                   </h2>
 263                   Use multiples of 8.
 264                 </div>
 265               </li>
 266               <li>
 267                 <div>
 268                   <h2>
 269                     <svg class="fa-language">
 270                       <use xlink:href="#fa-language"></use>
 271                     </svg>
 272                     Fade transition
 273                   </h2>
 274                   to all slides.
 275                 </div>
 276               </li>
 277               <li>
 278                 <div>
 279                   <h2>
 280                     <span>500<sup>+</sup></span>
 281                     SVG Icons
 282                   </h2>
 283                   Font Awesome Kit.
 284                 </div>
 285               </li>
 286             </ul>
 287           </div>
 288           <!-- .end .wrap -->
 289         </section>
 290         <section>
 291           <div class="wrap">
 292             <div class="grid vertical-align">
 293               <div class="column">
 294                 <h3>Support</h3>
 295                 <p>Making a beautiful HTML presentation has never been so rewarding.</p>
 296                 <ul class="description">
 297                   <li><strong>Demos:</strong> <a href="../demos/landings.html">Landings</a> &middot; <a href="../demos/portfolios.html">Portfolios</a></li>
 298                   <li><strong>Docs:</strong> <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a></li>
 299                   <li><strong>Tags:</strong> <a href="https://dribbble.com/tags/webslides" title="WebSlides Screenshots">Dribbble</a> &middot; <a href="https://instagram.com/webslides" title="WebSlides Screenshots">Instagram</a></li>
 300                 </ul>
 301               </div>
 302               <div class="column">
 303                 <a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
 304               </div>
 305               <div class="column">
 306                 <h3>Extensible</h3>
 307                 <p>The best way to inspire with your content is to connect on a personal level:</p>
 308                 <ul class="description">
 309                   <li>
 310                     <strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
 311                     Animate.css</a>.
 312                   </li>
 313                   <li>
 314                     <strong>Images:</strong> <a href="http://unsplash.com" title="Unsplash">Unsplash</a>.
 315                   </li>
 316                   <li>
 317                     <strong>Videos:</strong> <a href="https://pixabay.com/en/videos" title="Pixabay"> Pixabay</a>.
 318                   </li>
 319                 </ul>
 320               </div>
 321             </div>
 322             <!-- end .grid-->
 323           </div>
 324           <!-- end .wrap-->
 325         </section>
 326         <section class="bg-apple aligncenter">
 327           <span class="background-right-bottom" style="background-image:url('https://webslides.tv/static/images/tim-cook.png')"></span>
 328           <div class="wrap">
 329             <h2>One more thing...</h2>
 330             <p class="fadeInUp"><a href="../demos/keynote.html">Make your keynote &mdash; <code>.bg-apple</code></a></p>
 331           </div>
 332           <!-- .end .wrap -->
 333         </section>
 334
 335       </article>
 336     </main>
 337     <!--main-->
 338
 339     <!-- Required -->
 340     <script src="../static/js/webslides.js"></script>
 341
 342     <!-- Autoslide 5 seconds. If you don't want autoslide, remove: {autoslide: 5000} -->
 343     <script>
 344       window.ws = new WebSlides({ autoslide: 5000 });
 345     </script>
 346
 347     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
 348     <script defer src="../static/js/svg-icons.js"></script>
 349
 350   </body>
 351 </html>