Merge pull request #119 from kimulaco/fix/html-validate

Fixed HTML syntax of the demo page

index.html

@@ -64,9 +64,8 @@
         id='ph'
         src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
         alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
-        style='width: 250px; height: 54px;'
+        width='250'
-        width='250px'
+        height='54'
-        height='54px'
     /></a>
 
     <h2>Goals</h2>
@@ -184,7 +183,7 @@
 
       <div>
         <label for='volume'>Volume</label>
-        <input type='range' id='start' name='volume' id='volume' min='0' max='11' />
+        <input type='range' name='volume' id='volume' min='0' max='11' />
       </div>
     </form>
 
@@ -267,16 +266,16 @@
       for how to change it). A URL for the source of the quotation may be given
       using the
       <code>cite</code> attribute, while a text representation of the source can
-      be given using the <code>&ltcite&gt</code> cite element.'
+      be given using the <code>&lt;cite&gt;</code> cite element.'
 
       <footer>
         <cite>MDN, 'The Block Quotation element'</cite>
       </footer>
     </blockquote>
 
-    <q>Quotes (&ltq&gt) share the same style as blockquotes.</q>
+    <q>Quotes (&lt;q&gt;) share the same style as blockquotes.</q>
 
-    <p>Use &ltmark&gt to <mark>highlight the important stuff</mark>.</p>
+    <p>Use &lt;mark&gt; to <mark>highlight the important stuff</mark>.</p>
 
     <ul>
       <li>Unordered list item 1</li>
@@ -318,7 +317,7 @@
       Here is an example of a footer! Maybe you want to put some links here. <a href='#'>Privacy Policy</a> | <a href='https://github.com/kognise/water.css'>Contribute</a>
     </footer>
 
-    <script src='https://unpkg.com/favicon-mode-switcher@^1.0.0' defer></script>
+    <script src='https://unpkg.com/favicon-mode-switcher@%5E1.0.0' defer></script>
     <script src='script.js' defer></script>
   </body>
 </html>