index.html

<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- CLEAN MARKUP = GOOD KARMA.
      Hi source code lover,
      
      you're a curious person and a fast learner ;)
      Let's make something beautiful together. Contribute on Github:
      https://github.com/jlantunez/webslides
      
      Thanks,
      @jlantunez.
    -->
      
    <!-- SEO --> 
    <title>WebSlides: Making HTML presentations easy</title>
    <meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
    
    <!-- URL CANONICAL -->
    <!-- <link rel="canonical" href="http://your-url.com/"> -->
    
    <!-- Google Fonts -->
    <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">
    
    <!-- CSS Base -->
    <link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
    
    <!-- CSS Colors -->
    <link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
    
    <!-- Optional - CSS SVG Icons (Font Awesome) -->
    <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
    
    <!-- SOCIAL CARDS (ADD YOUR INFO) -->
    
    <!-- FACEBOOK -->
    <meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
    <meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
    <meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
    <meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
    
    <!-- TWITTER -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
    <meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
    <meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
    <meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT -->
    <meta name="twitter:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
    
    <!-- FAVICONS -->
    <link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
    <link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
    <link rel="apple-touch-icon icon" sizes="76x76" href="static/images/favicons/favicon-76.png">
    <link rel="apple-touch-icon icon" sizes="120x120" href="static/images/favicons/favicon-120.png">
    <link rel="apple-touch-icon icon" sizes="152x152" href="static/images/favicons/favicon-152.png">
    <link rel="apple-touch-icon icon" sizes="180x180" href="static/images/favicons/favicon-180.png">
    <link rel="apple-touch-icon icon" sizes="192x192" href="static/images/favicons/favicon-192.png">
    
    <!-- Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#333333">
    
  </head>
  <body>
    <header role="banner">
      <nav role="navigation">
        <p class="logo"><a href="index.html" title="WebSlides">WebSlides</a></p>
        <ul>
          <li class="github">
            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
              <svg class="fa-github">
                <use xlink:href="#fa-github"></use>
              </svg>
              <em>WebSlides</em>
            </a>
          </li>
          <li class="twitter">
            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
              <svg class="fa-twitter">
                <use xlink:href="#fa-twitter"></use>
              </svg>
              <em>@WebSlides</em>
            </a>
          </li>
          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
        </ul>
      </nav>
    </header>
    
    <main role="main">
      <article id="webslides" class="vertical">
      
        <!-- Quick Guide
          - Each parent <section> in the <article id="webslides"> element is an individual slide.
          - Vertical sliding = <article id="webslides" class="vertical">
          - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px; 
        -->
      
        <section>
         <span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
          <!--.wrap = container 1200px -->
          <div class="wrap aligncenter">
            <h1><strong>Create beautiful stories</strong></h1>
            <p class="text-intro">WebSlides makes HTML presentations easy.<br>
              Just the essentials and using lovely CSS.
            </p>
            <p>
              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button zoomIn" title="Download WebSlides for free">
                <svg class="fa-cloud-download">
                  <use xlink:href="#fa-cloud-download"></use>
                </svg>
                WebSlides
              </a>
            </p>
          </div>
          <!-- .end .wrap -->  
        </section>
        <section>
          <!--.wrap = container 1200px -->
          <div class="wrap size-50 aligncenter">
            <h2><strong>Why WebSlides?</strong></h2>
            <p class="text-intro">Good karma and productivity.</p>
            <div class="bg-white shadow">
              <ul class="flexblock reasons">
                <li>
                  <h2>An opportunity to engage.</h2>
                  <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
                </li>
                <li>
                  <h2>Work better, faster.</h2>
                  <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>
                </li>
              </ul>
            </div>
            <!-- .end .bg-white shadow -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <!--.wrap = container 1200px -->
          <div class="wrap">
            <div class="grid vertical-align">
              <div class="column">
                <h3><strong>WebSlides is really easy</strong></h3>
                <p class="text-intro">Each parent <code>&lt;section&gt;</code> in the #webslides element is an individual slide. </p>
                <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>
              </div>
              <!-- .end .column -->
              <div class="column">
                <pre>&lt;article id="webslides"&gt;
  <span class="code-comment">&lt;!-- Slide 1 --&gt;</span>
  &lt;section&gt;
    &lt;h1&gt;Design for trust&lt;/h1&gt;
  &lt;/section&gt;
  <span class="code-comment">&lt;!-- Slide 2 --&gt;</span>
  &lt;section class="bg-primary"&gt;
    &lt;div class="wrap"&gt;
      &lt;h2&gt;.wrap = container 1200px&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/section&gt;
&lt;/article&gt;
</pre>
              </div>
              <!-- .end .column -->
            </div>
            <!-- .end .grid -->
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <h2>Features</h2>
            <ul class="flexblock features">
              <li>
                <div>
                  <h2>
                    <span>&rarr;</span>
                    Simple Navigation
                  </h2>
                  with arrow keys and swipe.
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <svg class="fa-link">
                      <use xlink:href="#fa-link"></use>
                    </svg>
                    Permalinks
                  </h2>
                  Go to a specific slide.
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <svg class="fa-clock-o">
                      <use xlink:href="#fa-clock-o"></use>
                    </svg>
                    Slide Counter
                  </h2>
                  Current/Total number.
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <span>40<sup>+</sup></span>
                    Beautiful Components
                  </h2>
                  Covers, cards, quotes...
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <svg class="fa-text-height">
                      <use xlink:href="#fa-text-height"></use>
                    </svg>
                    Vertical Rhythm
                  </h2>
                  Use multiples of 8.
                </div>
              </li>
              <li>
                <div>
                  <h2>
                    <span>500<sup>+</sup></span>
                    SVG Icons
                  </h2>
                  Font Awesome Kit.
                </div>
              </li>
            </ul>
          </div>
        </section>
        <section>
          <div class="wrap">
            <h2><strong>WebSlides Demos</strong></h2>
            <p>Contribute on <a href="https://github.com/jlantunez/webslides" title="Contribute on Github">Github</a>. <span class="alignright"><a href="demos/index.html" title="WebSlides Demos">View all &rsaquo;</a></span></p>
            <ul class="flexblock gallery">
              <li>
                <a href="demos/why-webslides.html" title="Why WebSlides?">
                  <figure>
                    <img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
                    <figcaption>
                      <h2>Why WebSlides?</h2>
                    </figcaption>
                  </figure>
                </a>
              </li>
              <li>
                <a href="demos/landings.html" title="Landings">
                  <figure>
                    <img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
                    <figcaption>
                      <h2>Landings</h2>
                    </figcaption>
                  </figure>
                </a>
              </li>
              <li>
                <a href="demos/portfolios.html" title="Portfolios">
                  <figure>
                    <img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
                    <figcaption>
                      <h2>Portfolios</h2>
                    </figcaption>
                  </figure>
                </a>
              </li>
              <li>
                <a href="demos/keynote.html" title="Apple Keynote">
                  <figure>
                    <img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
                    <figcaption>
                      <h2>Apple Keynote</h2>
                    </figcaption>
                  </figure>
                </a>
              </li>
            </ul>
          </div>
          <!-- .end .wrap -->
        </section>
        <section>
          <div class="wrap">
            <div class="grid vertical-align">
              <div class="column">
                <h4>
                  <svg class="fa-life-ring">
                    <use xlink:href="#fa-life-ring"></use>
                  </svg>
                  <strong>Guides</strong>
                </h4>
                <p>If you need some help, here's just two tutorials. Just a basic knowledge of HTML is required:</p>
                <ul class="description">
                  <li><a href="demos/components.html" title="WebSlides Components">WebSlides Components</a>.</li>
                  <li><a href="demos/classes.html" title="WebSlides Classes">WebSlides Classes</a>.</li>
                </ul>
              </div>
              <div class="column">
                <figure><img src="static/images/setup.png" alt="WebSlides Files"></figure>
              </div>
              <div class="column">
                <h4>
                  <svg class="fa-cubes">
                    <use xlink:href="#fa-cubes"></use>
                  </svg>
                  <strong>Built to expand</strong>
                </h4>
                <p>The best way to <strong>inspire with your content</strong> is to connect on a personal level. We love these solutions:</p>
                <ul class="description">
                  <li>Background images: <a href="http://unsplash.com">Unsplash</a>.</li>
                  <li>CSS animations: <a href="https://daneden.github.io/animate.css/">Animate.css</a>.</li>
                </ul>
              </div>
            </div>
            <!--end .grid -->
          </div>
        </section>
        <section class="aligncenter">
          <!-- .wrap = container 1200px -->
          <div class="wrap">
            <h2><strong>Ready to Start?</strong> </h2>
            <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
            <p>
              <a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
                <svg class="fa-cloud-download">
                  <use xlink:href="#fa-cloud-download"></use>
                </svg>
                Free Download
              </a>
              <span class="try">
                <a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
                  <svg class="fa-paypal">
                    <use xlink:href="#fa-paypal"></use>
                  </svg>
                  Pay what you want.
                </a>
              </span>
            </p>
          </div>
          <!-- .end .wrap -->
        </section>
        <section class="slide-bottom">
          <div class="wrap">
            <div class="content-right text-serif">
              <h2>
                <strong>Thanks.</strong>
                <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">
                  <svg class="fa-twitter">
                    <use xlink:href="#fa-twitter"></use>
                  </svg>
                </a>
              </h2>
              <p>People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams. Best, <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
              <figure>
                <a href="http://linkedin.com/in/jlantunez" title="LinkedIN — José Luis Antúnez">
                  <img class="aligncenter fadeInUp" src="https://webslides.tv/static/images/signature.png" alt="Signature">
                </a>
              </figure>
            </div>
            <!-- .end .content-right -->
          </div>
          <!-- .end .wrap -->
        </section>
        
      </article>
      <!-- end article -->
    </main>
    <!-- end main --> 
    
   <!-- Remove #webslides element :)
   
     <footer role="contentinfo">
      <div class="wrap">
        <p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
      </div>
    </footer>  --> 
    
    <!-- jQuery (required for slides to work) -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="static/js/webslides.js"></script>
    
    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
    <script defer src="static/js/svg-icons.js"></script>
    
  </body>
</html>