mypapers/webslides/demos/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 Demos</title>
  20     <meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
  21
  22     <!-- URL CANONICAL -->
  23     <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
  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 Base -->
  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/permalink"> <!-- EDIT -->
  38     <meta property="og:type" content="article">
  39     <meta property="og:title" content="WebSlides Demos"> <!-- EDIT -->
  40     <meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
  41     <meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- 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 Demos"> <!-- EDIT -->
  49     <meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- 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   </head>
  65   <body>
  66     <header role="banner">
  67       <nav role="navigation">
  68         <p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
  69         <ul>
  70           <li class="github">
  71             <a rel="external" href="https://github.com/webslides/webslides" title="Github">
  72               <svg class="fa-github">
  73                 <use xlink:href="#fa-github"></use>
  74               </svg>
  75               <em>WebSlides</em>
  76             </a>
  77           </li>
  78           <li class="twitter">
  79             <a rel="external" href="https://twitter.com/webslides" title="Twitter">
  80               <svg class="fa-twitter">
  81                 <use xlink:href="#fa-twitter"></use>
  82               </svg>
  83               <em>@WebSlides</em>
  84             </a>
  85           </li>
  86           <!--  <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> -->
  87         </ul>
  88       </nav>
  89     </header>
  90
  91     <main role="main">
  92       <article>  <!-- Slideshow? id="webslides" -->
  93
  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-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
 102           <!--.wrap = container (width: 90%) -->
 103           <div class="wrap">
 104             <h1><strong>WebSlides Demos</strong></h1>
 105             <p class="text-intro">All of these presentations are free and responsive.<br>
 106               40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
 107             <p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
 108           </div>
 109           <!-- .end .wrap -->
 110         </section>
 111         <section class="bg-white">
 112           <!-- .wrap = container (width: 90%) -->
 113           <div class="wrap">
 114             <ul class="flexblock gallery">
 115               <li>
 116                 <a href="../demos/why-webslides.html" title="Why WebSlides?">
 117                   <figure>
 118                     <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
 119                     <figcaption>
 120                       <h2>Why WebSlides?</h2>
 121                       <time datetime="2017-01-08T16:21:44-08:00">Jan 08, 2017</time>
 122                     </figcaption>
 123                   </figure>
 124                 </a>
 125               </li>
 126               <li>
 127                 <a href="../demos/landings.html" title="Landings">
 128                   <figure>
 129                     <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
 130                     <figcaption>
 131                       <h2>Landings</h2>
 132                       <time datetime="2017-01-07T19:21:26-08:00">Jan 07, 2017</time>
 133                     </figcaption>
 134                   </figure>
 135                 </a>
 136               </li>
 137               <li>
 138                 <a href="../demos/portfolios.html" title="Portfolios">
 139                   <figure>
 140                     <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
 141                     <figcaption>
 142                       <h2>Portfolios</h2>
 143                       <time datetime="2017-01-06T21:22:21-08:00">Jan 06, 2017</time>
 144                     </figcaption>
 145                   </figure>
 146                 </a>
 147               </li>
 148               <li>
 149                 <a href="../demos/keynote.html" title="Apple Keynote">
 150                   <figure>
 151                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
 152                     <figcaption>
 153                       <h2>Apple Keynote</h2>
 154                       <time datetime="2017-01-05T20:13:48-08:00">Jan 05, 2017</time>
 155                     </figcaption>
 156                   </figure>
 157                 </a>
 158               </li>
 159               <li>
 160                 <a href="../demos/netflix-culture.html" title="Netflix's Culture">
 161                   <figure>
 162                     <img alt="Thumbnail Netflix's Culture" src="https://webslides.tv/static/images/demos-netflix.png">
 163                     <figcaption>
 164                       <h2>Netflix's Culture</h2>
 165                       <time datetime="2017-04-16T20:16:48-08:00">Mar 16, 2017</time>
 166                     </figcaption>
 167                   </figure>
 168                 </a>
 169               </li>
 170               <li>
 171                 <a href="../demos/longforms.html" title="Longform Articles">
 172                   <figure>
 173                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-longforms.png">
 174                     <figcaption>
 175                       <h2>Longforms</h2>
 176                       <time datetime="2017-04-15T20:16:48-08:00">Apr 15, 2017</time>
 177                     </figcaption>
 178                   </figure>
 179                 </a>
 180               </li>
 181               <li>
 182                 <a href="../demos/interviews.html" title="Interviews">
 183                   <figure>
 184                     <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-interviews.png">
 185                     <figcaption>
 186                       <h2>Interviews</h2>
 187                       <time datetime="2017-04-14T24:08:16-24:32">Apr 14, 2017</time>
 188                     </figcaption>
 189                   </figure>
 190                 </a>
 191               </li>
 192             </ul>
 193           </div>
 194           <!-- .end .wrap -->
 195         </section>
 196         <section>
 197           <!--.wrap = container (width: 90%) with fadein animation -->
 198           <div class="wrap">
 199             <h2 class="aligncenter">General Questions</h2>
 200             <p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a> &middot; <a href="../demos/media.html" title="WebSlides Media">Media</a>.</p>
 201             <div class="grid">
 202               <div class="column">
 203                 <h6>Why WebSlides? Good karma</h6>
 204                 <p>There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.</p>
 205                 <h6>Is WebSlides a framework?</h6>
 206                 <p>We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic <a href="../demos/components.html" title="WebSlides Components">structural components</a> and a scalable <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
 207               </div>
 208               <!-- end .column -->
 209               <div class="column">
 210                 <figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
 211               </div>
 212               <!-- end .column -->
 213               <div class="column">
 214                 <h6>What can you do with WebSlides?</h6>
 215                 <p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/media.html#slide=2">background images, videos</a>...
 216                 </p>
 217                 <h6>How easy is WebSlides?</h6>
 218                 <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>
 219               </div>
 220               <!-- end .column -->
 221             </div>
 222             <!-- end .grid -->
 223           </div>
 224           <!-- end .wrap -->
 225         </section>
 226         <section class="bg-white aligncenter">
 227           <!-- .wrap = container (width: 90%) -->
 228           <div class="wrap">
 229             <h2><strong>Start in seconds</strong> </h2>
 230             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
 231             <p>
 232               <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
 233                 <svg class="fa-cloud-download">
 234                   <use xlink:href="#fa-cloud-download"></use>
 235                 </svg>
 236                 Free Download
 237               </a>
 238               <span class="try">
 239                 <a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
 240                   <svg class="fa-paypal">
 241                     <use xlink:href="#fa-paypal"></use>
 242                   </svg>
 243                   Pay what you want.
 244                 </a>
 245               </span>
 246             </p>
 247           </div>
 248           <!-- .end .wrap -->
 249         </section>
 250
 251       </article>
 252     </main>
 253     <!-- end main -->
 254
 255     <!-- Required -->
 256     <script src="../static/js/webslides.js"></script>
 257     <script>
 258       window.ws = new WebSlides();
 259     </script>
 260
 261     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
 262     <script defer src="../static/js/svg-icons.js"></script>
 263
 264   </body>
 265 </html>