From 1869cdc9e3aa175891b8307ea8daee3bd77951c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= <jlantunez@gmail.com>
Date: Tue, 21 Mar 2017 13:30:53 +0100
Subject: [PATCH] new github username, .text-quote, new comments...

---
 demos/classes.html       | 39 ++++++++++++++-------------
 demos/components.html    | 57 ++++++++++++++++++++--------------------
 demos/index.html         | 16 +++++------
 demos/keynote.html       | 29 ++++++++++----------
 demos/landings.html      | 57 ++++++++++++++++++++--------------------
 demos/media.html         | 25 +++++++++---------
 demos/portfolios.html    | 31 +++++++++++-----------
 demos/why-webslides.html | 27 +++++++++----------
 8 files changed, 138 insertions(+), 143 deletions(-)

diff --git a/demos/classes.html b/demos/classes.html
index 7313b07..afb40ab 100644
--- a/demos/classes.html
+++ b/demos/classes.html
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -71,7 +70,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +85,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +96,18 @@
         <!-- 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"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-black-blue aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Classes</h1>
             <p class="text-symbols">* * * </p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -119,7 +118,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2><strong>WebSlides Classes</strong></h2>
             <p class="text-intro">Friendly naming conventions.</p>
@@ -226,7 +225,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -244,7 +243,7 @@
   <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 with fadein&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -405,7 +404,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.grid + .column</h2>
             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -432,7 +431,7 @@
           <!-- end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.grid.<strong>vertical-align</strong> + .column</h2>
             <p class="text-intro">Basic Grid (auto-fill and equal height).</p>
@@ -711,7 +710,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-h aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h1>Horizontal Gradient</h1>
             <p><code>section.bg-gradient-h</code></p>
@@ -726,7 +725,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-v aligncenter">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h1>Vertical Gradient</h1>
             <p><code>section.bg-gradient-v</code></p>
@@ -856,7 +855,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -1545,7 +1544,7 @@
           <!-- .end card-50 -->
         </section>
         <section class="bg-gradient-gray">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h3>.flexblock.reasons</h3>
             <hr>
@@ -1723,7 +1722,7 @@
           <p><code>.text-data</code></p>
         </section>
         <section>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <p class="text-context">Why WebSlides? .text-context</p>
             <h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
@@ -1828,7 +1827,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter text-serif">
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides is incredibly easy and versatile.</h2>
@@ -1905,7 +1904,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
diff --git a/demos/components.html b/demos/components.html
index 10fca20..6b18ef4 100644
--- a/demos/components.html
+++ b/demos/components.html
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -71,7 +70,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +85,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +96,18 @@
         <!-- 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"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-black-blue aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Components</h1>
             <p class="text-symbols">* * *</p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -200,7 +199,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -218,7 +217,7 @@
   <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 with fadein&lt;/h2&gt;
+      &lt;h2&gt;.wrap = container (width: 90%) with fadein&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -1688,7 +1687,7 @@
             <p class="text-intro">Create a simple web presence easily. <br> Clean markup and lovely CSS.
             </p>
             <p>
-              <a href="https://github.com/jlantunez/webslides" class="button">
+              <a href="https://github.com/webslides/webslides" class="button">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -1719,7 +1718,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -1730,7 +1729,7 @@
                   </svg>
                   WebSlides
                 </a>
-                <span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
+                <span class="try"><a href="../demos/index.html" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
               </p>
             </div>
             <ul class="flexblock features">
@@ -1792,7 +1791,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div id="tab-3" class="tab-content current">
               <h1 class="text-landing">Tell a Story</h1>
@@ -1939,7 +1938,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$56 Billion</h2>
             <h3>Revenue in Q3 2017</h3>
@@ -2006,7 +2005,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides was made to inspire people.</h2>
@@ -2143,7 +2142,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>iPhone 7</h2>
@@ -2423,7 +2422,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -2437,9 +2436,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good.</p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Sheryl_Sandberg">Sheryl Sandberg</a>, COO of Facebook.</cite></p>
             </blockquote>
@@ -2447,9 +2446,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-primary">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>Finally, everything you need to make HTML presentations in a simple way.</p>
               <p><cite><a href="https://twitter.com/jlantunez">@jlantunez</a></cite></p>
             </blockquote>
@@ -2535,7 +2534,7 @@
         </section>
         <section class="bg-black">
           <span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-70 aligncenter">
             <h2>Planning a vacation?</h2>
             <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -2550,7 +2549,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-green">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -2624,7 +2623,7 @@
         </section>
         <section class="bg-primary">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-30">
             <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
             <form action="/" method="post">
@@ -2769,7 +2768,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -2936,9 +2935,9 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>"An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism."</p>
               <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
             </blockquote>
@@ -3089,7 +3088,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in Seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
diff --git a/demos/index.html b/demos/index.html
index 6caaf95..a593ae3 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -9,7 +9,7 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
       Thanks,
       @jlantunez.
@@ -71,7 +71,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +86,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -97,12 +97,12 @@
         <!-- 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"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
           <span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1><strong>WebSlides Demos</strong></h1>
             <p class="text-intro">All of these presentations are free and responsive.<br>
@@ -112,7 +112,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-white">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <ul class="flexblock gallery">
               <li>
@@ -164,7 +164,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px with fadein animation -->
+          <!--.wrap = container (width: 90%) with fadein animation -->
           <div class="wrap">
             <h2 class="aligncenter">General Questions</h2>
             <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>.</p>
@@ -194,7 +194,7 @@
           <!-- end .wrap -->
         </section>
         <section class="bg-white aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
diff --git a/demos/keynote.html b/demos/keynote.html
index 36f515f..694361e 100644
--- a/demos/keynote.html
+++ b/demos/keynote.html
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -71,7 +70,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +85,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -97,18 +96,18 @@
         <!-- 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"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1><img class="whitelogo" src="../static/images/logos/apple.svg" alt="Apple Logo"></h1>
           </div>
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h1>Make a Keynote presentation using HTML</h1>
             <p class="text-intro">WebSlides is an open source framework for building HTML presentations, landings, and portfolios.</p>
@@ -117,7 +116,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>HTML presentations can be easy</h2>
           </div>
@@ -328,7 +327,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$48 Billion</h2>
             <h3>Revenue in Q4 2024</h3>
@@ -490,7 +489,7 @@
         </section>
         <section class="bg-apple">
           <span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>Payments Made Simple</h2>
@@ -568,9 +567,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.</p>
               <p>
                 <cite>
@@ -775,7 +774,7 @@
           <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>Think Different</strong></h2>
             <p>0verlay: <code>.bg-black > .background-video.dark</code> or .light</p>
@@ -810,7 +809,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong></h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
diff --git a/demos/landings.html b/demos/landings.html
index 7c0f989..3cd6d13 100644
--- a/demos/landings.html
+++ b/demos/landings.html
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
 
     <!-- SEO -->
@@ -71,7 +70,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +85,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -96,16 +95,16 @@
         <!-- 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;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-purple aligncenter">
          <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h1 class="text-landing">Landings</h1>
             <p class="text-symbols">* * * </p>
-            <p><a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides for free"><svg class="fa-github">
+            <p><a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides for free"><svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg> WebSlides</a>
             </p>
@@ -113,7 +112,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <p class="text-subtitle">The interface is your brand:</p>
             <h2>Create a stylish web presence easily</h2>
@@ -121,7 +120,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -139,7 +138,7 @@
   <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;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -176,7 +175,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2 class="text-landing">Welcomes</h2>
             <p class="text-intro"><strong>WebSlides</strong> is an open source tool for telling stories.<br>
@@ -185,13 +184,13 @@
                <ul>
                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
-                 <li><a href="https://github.com/jlantunez/webslides">Github</a></li>
+                 <li><a href="https://github.com/webslides/webslides">Github</a></li>
                </ul>
              </nav>
           </div>
         </section>
         <section class="bg-secondary">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 frame">
             <h2 class="text-serif aligncenter">How to Tell Your Story?</h2>
             <p class="text-symbols">* * *</p>
@@ -199,7 +198,7 @@
           </div>
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-60">
             <h3><strong>Why WebSlides?</strong> Good karma and productivity.</h3>
             <hr>
@@ -231,7 +230,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="cta-cover">
               <h1><strong>HTML Presentations</strong> Made Easy</h1>
@@ -242,7 +241,7 @@
                   </svg>
                   WebSlides
                 </a>
-                <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/jlantunez/webslides" title="Github">Github</a></span>
+                <span class="try"><a href="https://webslides.tv/demos" title="WebSlides Demos">Demos</a> &middot; <a href="https://github.com/webslides/webslides" title="Github">Github</a></span>
               </p>
             </div>
             <ul class="flexblock features">
@@ -600,7 +599,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid">
               <div class="column">
@@ -880,7 +879,7 @@
         </section>
         <section>
           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>iPhone 7</h2>
@@ -1447,7 +1446,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -1461,9 +1460,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.
               </p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Zaha_Hadid">Zaha Hadid</a></cite></p>
@@ -1553,7 +1552,7 @@
         </section>
         <section class="bg-black">
           <span class="background" style="background-image:url('https://source.unsplash.com/p3UCTiZIU6M/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-70 aligncenter">
             <h2>Planning a vacation?</h2>
             <p class="text-intro">Hidden attractions and unusual things to do.</p>
@@ -1568,7 +1567,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-gradient-white">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -1643,7 +1642,7 @@
         </section>
         <section class="bg-primary">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-30">
             <p><a href="#" title="Microsoft"><img class="whitelogo aligncenter" src="../static/images/logos/microsoft.svg" alt="Microsoft"></a></p>
             <form action="/" method="post">
@@ -1849,7 +1848,7 @@
           <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Every end is a new beginning</strong></h2>
           </div>
@@ -1859,7 +1858,7 @@
           <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Overlay</strong></h2>
             <p><code>section.bg-blue > .background-video.dark</code> or .light</p>
@@ -1890,12 +1889,12 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in seconds</strong> </h2>
             <p class="text-intro">120+ prebuilt slides ready to use.</p>
             <p>
-              <a href="https://github.com/jlantunez/webslides" class="button" title="Download WebSlides">
+              <a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
                 <svg class="fa-cloud-download">
                   <use xlink:href="#fa-cloud-download"></use>
                 </svg>
diff --git a/demos/media.html b/demos/media.html
index 77a69f3..4da7f57 100644
--- a/demos/media.html
+++ b/demos/media.html
@@ -8,10 +8,9 @@
       
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
       
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
     <!-- SEO -->
     <title>WebSlides Tutorial: Videos, Images, and Maps</title>
@@ -87,7 +86,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -102,26 +101,28 @@
               <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> -->
+          <!--  <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> -->
         </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"> = container 90% / <div class="wrap size-50"> = 45%;
           -->
+          
         <section class="bg-black-blue aligncenter">
           <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <p class="text-subtitle">WebSlides Tutorial</p>
             <h1 class="text-landing">Media</h1>
             <p class="text-symbols">* * *</p>
             <p>
-              <a class="button ghost" href="https://github.com/jlantunez/webslides" title="Download WebSlides">
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
                 <svg class="fa-github">
                   <use xlink:href="#fa-github"></use>
                 </svg>
@@ -285,7 +286,7 @@
         </section>
         <section class="aligncenter bg-black">
           <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2>.background.anim</h2>
           </div>
@@ -388,9 +389,9 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>"An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism."</p>
               <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="../static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
             </blockquote>
@@ -667,7 +668,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="aligncenter">
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap">
             <h2><strong>Start in Seconds</strong> </h2>
             <p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
diff --git a/demos/portfolios.html b/demos/portfolios.html
index d0e1bcc..6957b27 100644
--- a/demos/portfolios.html
+++ b/demos/portfolios.html
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
       -->
 
     <!-- SEO -->
@@ -71,7 +70,7 @@
         <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">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -86,7 +85,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -97,7 +96,7 @@
         <!-- 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"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section class="bg-primary">
@@ -112,7 +111,7 @@
           </div>
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <p class="text-subtitle">Design faster, better.</p>
             <h2>Create a beautiful portfolio for your work</h2>
@@ -120,7 +119,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -138,7 +137,7 @@
   <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;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -569,7 +568,7 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-apple aligncenter">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <h2 class="text-data">$48 Billion</h2>
             <h3>Revenue in Q2 2019</h3>
@@ -1211,7 +1210,7 @@
         </section>
         <section>
           <span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>Call to action</h2>
@@ -1389,7 +1388,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap size-50 aligncenter">
               <h2><strong>Why WebSlides?</strong></h2>
               <blockquote>
@@ -1400,9 +1399,9 @@
           <!-- .end .wrap -->
         </section>
         <section class="bg-black-blue">
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
-            <blockquote class="wall">
+            <blockquote class="text-quote">
               <p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p>
               <p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p>
             </blockquote>
@@ -1760,7 +1759,7 @@
           <video class="background-video" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We build brands with integrity and substance</strong></h2>
           </div>
@@ -1770,7 +1769,7 @@
           <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
             <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
           </video>
-          <!-- .wrap = container 1200px -->
+          <!-- .wrap = container (width: 90%) -->
           <div class="wrap size-50">
             <h2><strong>We help with design direction</strong></h2>
             <p>0verlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
diff --git a/demos/why-webslides.html b/demos/why-webslides.html
index a8d5375..642415a 100644
--- a/demos/why-webslides.html
+++ b/demos/why-webslides.html
@@ -9,10 +9,9 @@
 
       you're a curious person and a fast learner ;)
       Let's make something beautiful together. Contribute on Github:
-      https://github.com/jlantunez/webslides
+      https://github.com/webslides/webslides
 
-      Thanks,
-      @jlantunez.
+      Thanks!
     -->
 
     <!-- SEO -->
@@ -73,7 +72,7 @@
         <p class="logo"><a href="https://webslides.tv" title="WebSlides">WebSlides</a></p>
         <ul>
           <li class="github">
-            <a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
               <svg class="fa-github">
                 <use xlink:href="#fa-github"></use>
               </svg>
@@ -88,7 +87,7 @@
               <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> -->
+          <!--  <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> -->
         </ul>
       </nav>
     </header>
@@ -99,11 +98,11 @@
         <!-- 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;
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
         -->
 
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap aligncenter">
             <h1 class="text-landing">Good Karma</h1>
             <p class="text-intro">
@@ -114,7 +113,7 @@
                <ul>
                  <li><a href="https://twitter.com/webslides">Twitter</a></li>
                  <li><a href="https://dribbble.com/tags/webslides">Dribbble</a></li>
-                 <li><a href="https://github.com/jlantunez/webslides">Github</a></li>
+                 <li><a href="https://github.com/webslides/webslides">Github</a></li>
                </ul>
              </nav>
           </div>
@@ -123,7 +122,7 @@
         <section class="bg-black aligncenter">
           <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
           <span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap fadeInUp">
             <h1>
               Everyone
@@ -136,7 +135,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <!-- alignment [class*="content-"] = container max-width:50% = 600px -->
             <div class="content-center">
@@ -150,7 +149,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="grid vertical-align">
               <div class="column">
@@ -168,7 +167,7 @@
   <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;h2&gt;.wrap = container (width: 90%)&lt;/h2&gt;
     &lt;/div&gt;
   &lt;/section&gt;
 &lt;/article&gt;
@@ -181,7 +180,7 @@
           <!-- .end .wrap -->
         </section>
         <section>
-          <!--.wrap = container 1200px -->
+          <!--.wrap = container (width: 90%) -->
           <div class="wrap">
             <div class="content-left">
               <h2>WebSlides was made to inspire people.</h2>
@@ -302,7 +301,7 @@
                 </ul>
               </div>
               <div class="column">
-                <a href="https://github.com/jlantunez/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
+                <a href="https://github.com/webslides/webslides" title="Github"><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></a>
               </div>
               <div class="column">
                 <h3>Extensible</h3>