######################
#### ------> Directory

######################
#### ------> Files:
C:\Users\pasch\Downloads\HTML5 and CSS3\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_advanced_selectors\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_animation\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_animation\examples\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_banner\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_columns\condensed_newsletter.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_columns\newsletter.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_columns\original_newsletter.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_fonts\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_fonts\stylesheets\fonts\garogier_unhinted-demo.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_mediaquery\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_print_links\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\css3_rough_edges\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_accessible_tables\accessible_index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_accessible_tables\original_index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_aria\blog\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_aria\homepage\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_audio\advanced_audio.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_audio\audio.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\canvas_graph.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\canvas_simple_drawing.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\logo.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\logo_gradient.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\rgraph_bar_example.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_content_editable\edit.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_content_editable\show.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_cross_document\contactlist\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_cross_document\supportpage\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_descriptionlist_faq\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_dragdrop\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_forms\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_forms\autofocus\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_forms\modernizr\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_geolocation\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_history\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_history\fallback\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_indexedDB\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_localstorage\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_meter\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_meter\progress.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_new_tags\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_offline\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_offline\offlinetest.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_placeholder\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\original_example_1.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\original_example_2.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\original_example_3.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\popup.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\popup_dataset.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\help\holiday_pay.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_svg\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_validation\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_video\mp4only_index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_video\native.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_video\videojs_index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_websockets\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_websockets\web-socket-js\sample.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_websql\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\html5_why\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\bind.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\create_elements.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\events.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\methods.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\popup.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\ready.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\remove_elements.html
C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\simple_selection.html
C:\Users\pasch\Downloads\HTML5 and CSS3\template\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\filters\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\flexbox\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\html5_sse\index.html
C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\web_workers\index.html

#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title><bookname>HTML5 and CSS3, Second Edition</bookname> Example Code</title>
  </head>
  <body>
    <h1><bookname>HTML5 and CSS3, Second Edition</bookname> Example Code</h1>

    <h2>New Structural Tags and Attributes</h2>
    <ul>
      <li><a href="html5_new_tags">New Structural Markup</a></li>
      <li><a href="html5_meter">Meter</a></li>
      <li><a href="html5_popups_with_custom_data">Custom Data Attributes</a></li>
      <li><a href="html5_descriptionlist_faq">Description List</a></li>
    </ul>

    <h2>Creating User Friendly Web Forms</h2>
    <ul>
      <li><a href="html5_forms">Forms</a></li>
      <li><a href="html5_forms/modernizr">Forms (Fallback with Modernizr)</a></li>
      <li><a href="html5_forms/autofocus">Autofocus</a></li>
      <li><a href="html5_placeholder">Placeholder</a></li>
      <li><a href="html5_content_editable">ContentEditable</a></li>
      <li><a href="html5_validation">Validation</a></li>
    </ul>

    <h2>Styling Content and Interfaces</h2>
    <ul>
      <li><a href="css3_advanced_selectors">Advanced Selectors</a></li>
      <li><a href="css3_print_links">Print Links</a></li>
      <li><a href="css3_columns">Columns</a></li>
      <li><a href="css3_mediaquery">Media Queries</a></li>
    </ul>

    <h2>Making Interfaces More Accessible</h2>
    <ul>
      <li><a href="html5_aria">Aria Roles and Regions</a></li>
      <li><a href="html5_accessible_tables">Accessible Tables</a></li>
    </ul>

    <h2>Drawing in the Browser</h2>
    <ul>
      <li><a href="html5_canvas">Canvas</a></li>
      <li><a href="html5_svg">SVG</a></li>
    </ul>

    <h2>Embedding Audio and Video</h2>
    <ul>
      <li><a href="html5_audio">Audio</a></li>
      <li><a href="html5_video">Video</a></li>
    </ul>

    <h2>Eye Candy</h2>
    <ul>
      <li><a href="css3_rough_edges">Rounding Rough Edges</a></li>
      <li><a href="css3_banner">Banner</a></li>
      <li><a href="css3_fonts">Web Fonts</a></li>
      <li><a href="css3_animation">Transitions and Animations</a></li>
    </ul>

    <h2>Saving Data on the Client</h2>
    <ul>
      <li><a href="html5_localstorage">Local Storage</a></li>
      <li><a href="html5_indexedDB">IndexedDB</a></li>
      <li><a href="html5_websql">Web SQL</a></li>
      <li><a href="html5_offline">Offline</a></li>
    </ul>

    <h2>Creating More Interactive Web Applications</h2>
    <ul>
      <li><a href="html5_history">History</a></li>
      <li><a href="html5_geolocation">Geolocation</a></li>
      <li><a href="html5_cross_document">Cross Document Messaging</a></li>
      <li><a href="html5_websockets">Web Sockets</a></li>
      <li><a href="html5_dragdrop">Drag and Drop</a></li>
    </ul>

    <h2>Where to Go Next</h2>
    <ul>
      <li><a href="where_next/flexbox">Flexible Box Model</a></li>
      <li><a href="where_next/filters">CSS Filter Effects</a></li>
      <li><a href="where_next/web_workers">Web Workers</a></li>
      <li><a href="where_next/html5_sse">Server -Sent Events</a></li>
      
    </ul>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_advanced_selectors\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="stylesheets/style.css">
    
    <script
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <!--[if (gte IE 5.5)&(lte IE 8)]>
      <script src="javascripts/selectivizr-min.js"></script>
    <![endif]-->
  
  </head>
  <body>

    <table >
      <tr>
        <th>Item</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>Coffee mug</td>
        <td>$10.00</td>
        <td>5</td>
        <td>$50.00</td>
      </tr>
      <tr>
        <td>Polo shirt</td>
        <td>$20.00</td>
        <td>5</td>
        <td>$100.00</td>
      </tr>
      <tr>
        <td>Red stapler</td>
        <td>$9.00</td>
        <td>4</td>
        <td>$36.00</td>
      </tr>
      <tr>
        <td colspan="3">Subtotal</td>
        <td>$186.00</td>
      </tr>
      <tr>
        <td colspan="3">Shipping</td>
        <td>$12.00</td>
      </tr>
      <tr>
        <td colspan="3">Total Due</td>
        <td>$198.00</td>
      </tr>
    </table>

    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_animation\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <title>AwesomeCo Customer Portal</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/style.css">
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen">
    <![endif]-->
    <script src="javascripts/modernizr.js"></script>
  </head>
  <body>
    <form class="login" action="/login" method="post">
      <fieldset>
        <legend>Existing Users</legend>
        <ol>
          <li>
            <label for="email">Email</label>
            <input id="email" type="email" name="email">
          </li>
          <li>
            <label for="password">Password</label>
            <input id="password" type="password" 
                   name="password" value="" autocomplete="off"/>
          </li>
          <li><input type="submit" value="Log in"></li>
        </ol>
      </fieldset>  
    </form>

    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>    
    <script src="javascripts/form.js"></script>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_animation\examples\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <title>Transition and Animation Examples</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    
    
    <h2>Easing functions</h2>
    
    <h3>Linear</h3>
    <div class="box linear">
      <p>Hover over me</p>
    </div>
    
    <h3>Ease in</h3>
    <div class="box ease_in">
      <p>Hover over me</p>
    </div>
    
    <h3>Ease out</h3>
    <div class="box ease_out">
      <p>Hover over me</p>
    </div>
    
    <h3>Ease-in-out</h3>
    <div class="box ease_in_out">
      <p>Hover over me</p>
    </div>
    
    <h3>Cubic bezier</h3>
    
    <pre><code>cubic-bezier(0.1, -0.6, 0.2, 0);</code></pre>
    
    <div class="box bounce">
      <p>Hover over me</p>
    </div>
    
    
  </body>
  
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_banner\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <title>Sample Banner</title>
    <link rel="stylesheet" href="stylesheets/style.css">

    <!--[if lte IE 8]>
      <script>
      document.createElement("section");
      </script>
      <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen">   
    <![endif]-->
  </head>
  <body>
    <div id="conference">
      <section id="badge">
        <h3>Hi, My Name Is</h3>
        <h2>Barney</h2>
      </section>
    
      <section id="info">
      </section>
    </div>

  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_columns\condensed_newsletter.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <title>AwesomeCo Newsletter</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/style.css">
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <!--[if lte IE 9]>
    <script>
      // support for styling HTML5 elements
      document.createElement("section");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("article");
      document.createElement("aside");
    </script>
    
    <script src="javascripts/css3-multi-column.min.js"></script>
    <![endif]-->
    
  </head>
  <body>
    <div id="container">
      <header id="header">
        <h1>AwesomeCo Newsletter</h1>
        <p>Volume 3, Issue 12</p>
      </header>
      <section id="newsletter">
        <article id="director_news">
          <header>
            <h2>News From The Director</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet...
            </p>
            <aside class="callout">
              <h4>Being Awesome</h4>
              <p>
                &quot;Lorem ipsum dolor sit amet, ....&quot;
              </p>  
            </aside>
            <p>
              Duis aute irure dolor in ...
            </p>
          </div>
        </article>    
        <article id="awesome_bits">
          <header>
            <h2>Quick Bits of Awesome</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet...
            </p>
          </div>
        </article>
        <article id="birthdays">
          <header>
            <h2>Birthdays</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet...
            </p>
          </div>
        </article>
      </section>
      <footer id="footer">
        <h6>
          Send newsworthy things to 
          <a href="mailto:news@aweseomco.com">news@awesomeco.com</a>.
        </h6>
      </footer>
    </div>
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_columns\newsletter.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Newsletter</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    
    <!--[if lte IE 9]>
    <script>
      // support for styling HTML5 elements
      document.createElement("section");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("article");
      document.createElement("aside");
    </script>
    
    <script src="javascripts/css3-multi-column.min.js"></script>
    <![endif]-->
    
  </head>
  <body>
    <div id="container">
      <header id="header">
        <h1>AwesomeCo Newsletter</h1>
        <p>Volume 3, Issue 12</p>
      </header>
      <section id="newsletter">
        <article id="director_news">
          <header>
            <h2>News From The Director</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <aside class="callout">
              <h4>Being Awesome</h4>
              <p>
                &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 Ut enim ad minim veniam.&quot;
              </p>  
            </aside>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </article>    
    
        <article id="awesome_bits">
          <header>
            <h2>Quick Bits of Awesome</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </article>
      
        <article id="birthdays">
          <header>
            <h2>Birthdays</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
              culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </article>
      
      
      </section>
      <footer id="footer">
        <h6>
          Send newsworthy things to <a href="mailto:news@aweseomco.com">news@awesomeco.com</a>.
        </h6>
      </footer>
    </div>
  </body>
  
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_columns\original_newsletter.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Newsletter</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    
    <!--[if lte IE 9]>
    <script>
      // support for styling HTML5 elements
      document.createElement("section");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("article");
      document.createElement("aside");
    </script>
    <![endif]-->
    
  </head>
  <body>
    <div id="container">
      <header id="header">
        <h1>AwesomeCo Newsletter</h1>
        <p>Volume 3, Issue 12</p>
      </header>
      <section id="newsletter">
        <article id="director_news">
          <header>
            <h2>News From The Director</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <aside class="callout">
              <h4>Being Awesome</h4>
              <p>
                &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 Ut enim ad minim veniam.&quot;
              </p>  
            </aside>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </article>    
    
        <article id="awesome_bits">
          <header>
            <h2>Quick Bits of Awesome</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
              eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </article>
      
        <article id="birthdays">
          <header>
            <h2>Birthdays</h2>
          </header>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
              culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </article>
      
      
      </section>
      <footer id="footer">
        <h6>
          Send newsworthy things to <a href="mailto:news@aweseomco.com">news@awesomeco.com</a>.
        </h6>
      </footer>
    </div>
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_fonts\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <!--[if lte IE 8]>
    <script>
      document.createElement("nav");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("section");
      document.createElement("aside");
      document.createElement("article");
    </script>
    <![endif]-->
    
    <link rel="stylesheet" href="stylesheets/style.css"> 
    <title>AwesomeCo Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>

  <body role="document"> 
    
    
    
      <header id="page_header" role="banner"> 
        <h1>AwesomeCo Blog!</h1>
        <nav role="navigation"> 
          <ul>
            <li><a href="#">Latest Posts</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Contributors</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
      

      <section id="posts" role="main">
        
      
        <article class="post" role="article">
          <header>
            <h2>How Many Should We Put You Down For?</h2>
            <p>Posted by Brian on 
              <time datetime="2013-10-01T14:39">October 1st, 2013 at 2:39PM</time>
            </p>
          </header>
          
          <aside>
            <p>
              &ldquo;Never give someone a chance to say no when
              selling your product.&rdquo;
            </p>
          </aside>
          <p>
            The first big rule in sales is that if the person leaves empty-handed,
            they're likely not going to come back. That's why you have to be 
            somewhat aggressive when you're working with a customer, but you have
            to make sure you don't overdo it and scare them away.
          </p>
          <p>
           One way you can keep a conversation going is to avoid asking questions
           that have yes or no answers. For example, if you're selling a service
           plan, don't ever ask &ldquo;Are you interested in our 3 or 5 year 
           service plan?&rdquo; Instead, ask &ldquo;Are you interested in the 3
           year service plan or the 5 year plan, which is a better value?&rdquo;
           At first glance, they appear to be asking the same thing, and while 
           a customer can still opt out, it's harder for them to opt out of 
           the second question because they have to say more than just
           &ldquo;no.&rdquo;
          </p>

          <footer>
            <p><a href="comments"><i>25 Comments</i></a> ...</p>
          </footer>
        </article>
        
        
      </section>
      
      
      <section id="sidebar" role="complementary">
        
        <nav>
          <h3>Archives</h3>
          <ul>
            <li><a href="2013/10">October 2013</a></li>
            <li><a href="2013/09">September 2013</a></li>
            <li><a href="2013/08">August 2013</a></li>
            <li><a href="2013/07">July 2013</a></li>
            <li><a href="2013/06">June 2013</a></li>
            <li><a href="2013/05">May 2013</a></li>
            <li><a href="2013/04">April 2013</a></li>
            <li><a href="2013/03">March 2013</a></li>
            <li><a href="2013/02">February 2013</a></li>
            <li><a href="2013/01">January 2013</a></li>
            <li><a href="all">More</a></li>
          </ul>
        </nav>
    	</section> <!-- sidebar -->
      
      
      <footer id="page_footer" role="contentinfo">
        <p>Copyright © 2013 AwesomeCo.</p>
        <nav>
          <ul>   
             <li><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Terms of Service</a></li>
             <li><a href="#">Privacy</a></li>
           </ul>
        </nav>
      </footer> <!-- footer -->
      
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_fonts\stylesheets\fonts\garogier_unhinted-demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

	<style type="text/css">
					body{
				font-family: 'garogierregular';
							}
		</style>

	<title>Garogier Regular Specimen</title>
	
	
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			$('#container').easyTabs({defaultContent:1});
		});
	</script>
</head>

<body>
<div id="container">
	<div id="header">
		Garogier Regular	</div>
	<ul class="tabs">
		<li><a href="#specimen">Specimen</a></li>
		<li><a href="#layout">Sample Layout</a></li>
				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
		<li><a href="#installing">Installing Webfonts</a></li>
		
	</ul>
	
	<div id="main_content">

		
			<div id="specimen">
		
				<div class="section">
					<div class="grid12 firstcol">
						<div class="huge">AaBb</div>
					</div>
				</div>
		
				<div class="section">
					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
				</div>
				<div class="section">
					<div class="grid12 firstcol">
						<table class="sample_table">
							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
						</table>
				
					</div>
			
				</div>
		
		
		
								<div class="section" id="bodycomparison">


										<div id="xheight">
				<div class="fontbody">&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;&#xE000;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
										<div class="fontbody" style="z-index:1">
											body<span>Garogier Regular</span>
										</div>
										<div class="arialbody" style="z-index:1">
											body<span>Arial</span>
										</div>
										<div class="verdanabody" style="z-index:1">
											body<span>Verdana</span>
										</div>
										<div class="georgiabody" style="z-index:1">
											body<span>Georgia</span>
										</div>



								</div>
		
		
				<div class="section psample psample_row1" id="">
					
					<div class="grid2 firstcol">
						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid3">
						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid3">
						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid4">
						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="white_blend"></div>
					
				</div>
				<div class="section psample psample_row2" id="">
					<div class="grid3 firstcol">
						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid4">
						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid5">
						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>

					<div class="white_blend"></div>

				</div>
				
				<div class="section psample psample_row3" id="">
					<div class="grid5 firstcol">
						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="grid7">
						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					
					<div class="white_blend"></div>
					
				</div>
				
				<div class="section psample psample_row4" id="">
					<div class="grid12 firstcol">
						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="white_blend"></div>
					
				</div>
				
				
				
				<div class="section psample psample_row1 fullreverse">
					<div class="grid2 firstcol">
						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid3">
						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid3">
						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid4">
						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="black_blend"></div>
					
				</div>
				
				<div class="section psample psample_row2 fullreverse">
					<div class="grid3 firstcol">
						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid4">
						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="grid5">
						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
			
					</div>
					<div class="black_blend"></div>

				</div>
				
				<div class="section psample fullreverse psample_row3" id="">
					<div class="grid5 firstcol">
						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="grid7">
						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					
					<div class="black_blend"></div>
					
				</div>
				
				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
					<div class="grid12 firstcol">
						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="black_blend"></div>
					
				</div>
				
				
				
				
			</div>
			
			<div id="layout">
				
				<div class="section">
					
					<div class="grid12 firstcol">
						<h1>Lorem Ipsum Dolor</h1>
						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
						
						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
					</div>
				</div>
				<div class="section">
					<div class="grid8 firstcol">
						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>

						
						<h3>Pellentesque ornare sem</h3>

						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>

						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>

						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>

						<h3>Cras mattis consectetur</h3>

						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>

						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
					</div>
					
					<div class="grid4 sidebar">
						
						<div class="box reverse">
							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
						</div>
						
						<p class="caption">Maecenas sed diam eget risus varius.</p>

						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>

					

						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>

						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>

					</div>
				</div>
				
			</div>


			



		<div id="glyphs">
			<div class="section">
				<div class="grid12 firstcol">
			
				<h1>Language Support</h1>
				<p>The subset of Garogier Regular in this kit supports the following languages:<br />
			
					English				</p>
				<h1>Glyph Chart</h1>
				<p>The subset of Garogier Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
				<div id="glyph_chart">
			
																														 <div><p>&amp;#13;</p>&#13;</div>
																				 <div><p>&amp;#32;</p>&#32;</div>
																				 <div><p>&amp;#33;</p>&#33;</div>
																				 <div><p>&amp;#34;</p>&#34;</div>
																				 <div><p>&amp;#35;</p>&#35;</div>
																				 <div><p>&amp;#36;</p>&#36;</div>
																				 <div><p>&amp;#37;</p>&#37;</div>
																				 <div><p>&amp;#38;</p>&#38;</div>
																				 <div><p>&amp;#39;</p>&#39;</div>
																				 <div><p>&amp;#40;</p>&#40;</div>
																				 <div><p>&amp;#41;</p>&#41;</div>
																				 <div><p>&amp;#42;</p>&#42;</div>
																				 <div><p>&amp;#43;</p>&#43;</div>
																				 <div><p>&amp;#44;</p>&#44;</div>
																				 <div><p>&amp;#45;</p>&#45;</div>
																				 <div><p>&amp;#46;</p>&#46;</div>
																				 <div><p>&amp;#47;</p>&#47;</div>
																				 <div><p>&amp;#48;</p>&#48;</div>
																				 <div><p>&amp;#49;</p>&#49;</div>
																				 <div><p>&amp;#50;</p>&#50;</div>
																				 <div><p>&amp;#51;</p>&#51;</div>
																				 <div><p>&amp;#52;</p>&#52;</div>
																				 <div><p>&amp;#53;</p>&#53;</div>
																				 <div><p>&amp;#54;</p>&#54;</div>
																				 <div><p>&amp;#55;</p>&#55;</div>
																				 <div><p>&amp;#56;</p>&#56;</div>
																				 <div><p>&amp;#57;</p>&#57;</div>
																				 <div><p>&amp;#58;</p>&#58;</div>
																				 <div><p>&amp;#59;</p>&#59;</div>
																				 <div><p>&amp;#60;</p>&#60;</div>
																				 <div><p>&amp;#61;</p>&#61;</div>
																				 <div><p>&amp;#62;</p>&#62;</div>
																				 <div><p>&amp;#63;</p>&#63;</div>
																				 <div><p>&amp;#64;</p>&#64;</div>
																				 <div><p>&amp;#65;</p>&#65;</div>
																				 <div><p>&amp;#66;</p>&#66;</div>
																				 <div><p>&amp;#67;</p>&#67;</div>
																				 <div><p>&amp;#68;</p>&#68;</div>
																				 <div><p>&amp;#69;</p>&#69;</div>
																				 <div><p>&amp;#70;</p>&#70;</div>
																				 <div><p>&amp;#71;</p>&#71;</div>
																				 <div><p>&amp;#72;</p>&#72;</div>
																				 <div><p>&amp;#73;</p>&#73;</div>
																				 <div><p>&amp;#74;</p>&#74;</div>
																				 <div><p>&amp;#75;</p>&#75;</div>
																				 <div><p>&amp;#76;</p>&#76;</div>
																				 <div><p>&amp;#77;</p>&#77;</div>
																				 <div><p>&amp;#78;</p>&#78;</div>
																				 <div><p>&amp;#79;</p>&#79;</div>
																				 <div><p>&amp;#80;</p>&#80;</div>
																				 <div><p>&amp;#81;</p>&#81;</div>
																				 <div><p>&amp;#82;</p>&#82;</div>
																				 <div><p>&amp;#83;</p>&#83;</div>
																				 <div><p>&amp;#84;</p>&#84;</div>
																				 <div><p>&amp;#85;</p>&#85;</div>
																				 <div><p>&amp;#86;</p>&#86;</div>
																				 <div><p>&amp;#87;</p>&#87;</div>
																				 <div><p>&amp;#88;</p>&#88;</div>
																				 <div><p>&amp;#89;</p>&#89;</div>
																				 <div><p>&amp;#90;</p>&#90;</div>
																				 <div><p>&amp;#91;</p>&#91;</div>
																				 <div><p>&amp;#92;</p>&#92;</div>
																				 <div><p>&amp;#93;</p>&#93;</div>
																				 <div><p>&amp;#94;</p>&#94;</div>
																				 <div><p>&amp;#95;</p>&#95;</div>
																				 <div><p>&amp;#96;</p>&#96;</div>
																				 <div><p>&amp;#97;</p>&#97;</div>
																				 <div><p>&amp;#98;</p>&#98;</div>
																				 <div><p>&amp;#99;</p>&#99;</div>
																				 <div><p>&amp;#100;</p>&#100;</div>
																				 <div><p>&amp;#101;</p>&#101;</div>
																				 <div><p>&amp;#102;</p>&#102;</div>
																				 <div><p>&amp;#103;</p>&#103;</div>
																				 <div><p>&amp;#104;</p>&#104;</div>
																				 <div><p>&amp;#105;</p>&#105;</div>
																				 <div><p>&amp;#106;</p>&#106;</div>
																				 <div><p>&amp;#107;</p>&#107;</div>
																				 <div><p>&amp;#108;</p>&#108;</div>
																				 <div><p>&amp;#109;</p>&#109;</div>
																				 <div><p>&amp;#110;</p>&#110;</div>
																				 <div><p>&amp;#111;</p>&#111;</div>
																				 <div><p>&amp;#112;</p>&#112;</div>
																				 <div><p>&amp;#113;</p>&#113;</div>
																				 <div><p>&amp;#114;</p>&#114;</div>
																				 <div><p>&amp;#115;</p>&#115;</div>
																				 <div><p>&amp;#116;</p>&#116;</div>
																				 <div><p>&amp;#117;</p>&#117;</div>
																				 <div><p>&amp;#118;</p>&#118;</div>
																				 <div><p>&amp;#119;</p>&#119;</div>
																				 <div><p>&amp;#120;</p>&#120;</div>
																				 <div><p>&amp;#121;</p>&#121;</div>
																				 <div><p>&amp;#122;</p>&#122;</div>
																				 <div><p>&amp;#123;</p>&#123;</div>
																				 <div><p>&amp;#124;</p>&#124;</div>
																				 <div><p>&amp;#125;</p>&#125;</div>
																				 <div><p>&amp;#126;</p>&#126;</div>
																				 <div><p>&amp;#160;</p>&#160;</div>
																				 <div><p>&amp;#161;</p>&#161;</div>
																				 <div><p>&amp;#162;</p>&#162;</div>
																				 <div><p>&amp;#163;</p>&#163;</div>
																				 <div><p>&amp;#164;</p>&#164;</div>
																				 <div><p>&amp;#165;</p>&#165;</div>
																				 <div><p>&amp;#166;</p>&#166;</div>
																				 <div><p>&amp;#167;</p>&#167;</div>
																				 <div><p>&amp;#168;</p>&#168;</div>
																				 <div><p>&amp;#169;</p>&#169;</div>
																				 <div><p>&amp;#170;</p>&#170;</div>
																				 <div><p>&amp;#171;</p>&#171;</div>
																				 <div><p>&amp;#172;</p>&#172;</div>
																				 <div><p>&amp;#173;</p>&#173;</div>
																				 <div><p>&amp;#174;</p>&#174;</div>
																				 <div><p>&amp;#175;</p>&#175;</div>
																				 <div><p>&amp;#176;</p>&#176;</div>
																				 <div><p>&amp;#177;</p>&#177;</div>
																				 <div><p>&amp;#178;</p>&#178;</div>
																				 <div><p>&amp;#179;</p>&#179;</div>
																				 <div><p>&amp;#180;</p>&#180;</div>
																				 <div><p>&amp;#182;</p>&#182;</div>
																				 <div><p>&amp;#183;</p>&#183;</div>
																				 <div><p>&amp;#184;</p>&#184;</div>
																				 <div><p>&amp;#185;</p>&#185;</div>
																				 <div><p>&amp;#186;</p>&#186;</div>
																				 <div><p>&amp;#187;</p>&#187;</div>
																				 <div><p>&amp;#188;</p>&#188;</div>
																				 <div><p>&amp;#189;</p>&#189;</div>
																				 <div><p>&amp;#190;</p>&#190;</div>
																				 <div><p>&amp;#191;</p>&#191;</div>
																				 <div><p>&amp;#198;</p>&#198;</div>
																				 <div><p>&amp;#208;</p>&#208;</div>
																				 <div><p>&amp;#215;</p>&#215;</div>
																				 <div><p>&amp;#216;</p>&#216;</div>
																				 <div><p>&amp;#222;</p>&#222;</div>
																				 <div><p>&amp;#223;</p>&#223;</div>
																				 <div><p>&amp;#230;</p>&#230;</div>
																				 <div><p>&amp;#240;</p>&#240;</div>
																				 <div><p>&amp;#247;</p>&#247;</div>
																				 <div><p>&amp;#248;</p>&#248;</div>
																				 <div><p>&amp;#254;</p>&#254;</div>
																				 <div><p>&amp;#338;</p>&#338;</div>
																				 <div><p>&amp;#339;</p>&#339;</div>
																				 <div><p>&amp;#710;</p>&#710;</div>
																				 <div><p>&amp;#732;</p>&#732;</div>
																				 <div><p>&amp;#8192;</p>&#8192;</div>
																				 <div><p>&amp;#8193;</p>&#8193;</div>
																				 <div><p>&amp;#8194;</p>&#8194;</div>
																				 <div><p>&amp;#8195;</p>&#8195;</div>
																				 <div><p>&amp;#8196;</p>&#8196;</div>
																				 <div><p>&amp;#8197;</p>&#8197;</div>
																				 <div><p>&amp;#8198;</p>&#8198;</div>
																				 <div><p>&amp;#8199;</p>&#8199;</div>
																				 <div><p>&amp;#8200;</p>&#8200;</div>
																				 <div><p>&amp;#8201;</p>&#8201;</div>
																				 <div><p>&amp;#8202;</p>&#8202;</div>
																				 <div><p>&amp;#8208;</p>&#8208;</div>
																				 <div><p>&amp;#8209;</p>&#8209;</div>
																				 <div><p>&amp;#8210;</p>&#8210;</div>
																				 <div><p>&amp;#8211;</p>&#8211;</div>
																				 <div><p>&amp;#8212;</p>&#8212;</div>
																				 <div><p>&amp;#8216;</p>&#8216;</div>
																				 <div><p>&amp;#8217;</p>&#8217;</div>
																				 <div><p>&amp;#8218;</p>&#8218;</div>
																				 <div><p>&amp;#8220;</p>&#8220;</div>
																				 <div><p>&amp;#8221;</p>&#8221;</div>
																				 <div><p>&amp;#8222;</p>&#8222;</div>
																				 <div><p>&amp;#8226;</p>&#8226;</div>
																				 <div><p>&amp;#8230;</p>&#8230;</div>
																				 <div><p>&amp;#8239;</p>&#8239;</div>
																				 <div><p>&amp;#8249;</p>&#8249;</div>
																				 <div><p>&amp;#8250;</p>&#8250;</div>
																				 <div><p>&amp;#8287;</p>&#8287;</div>
																				 <div><p>&amp;#8482;</p>&#8482;</div>
																				 <div><p>&amp;#57344;</p>&#57344;</div>
																				 <div><p>&amp;#64257;</p>&#64257;</div>
																				 <div><p>&amp;#64258;</p>&#64258;</div>
																												</div>	
				</div>
		
		
			</div>
		</div>
		
		
		<div id="specs">
			
		</div>
	
		<div id="installing">
			<div class="section">
				<div class="grid7 firstcol">
					<h1>Installing Webfonts</h1>
					
					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
					
					<h2>1. Upload your webfonts</h2>
					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
					
					<h2>2. Include the webfont stylesheet</h2>
					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>


<code>
@font-face{ 
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}
</code>

	<p>We've already gone ahead and generated the code for you. All you have to do is link to the style sheet in your HTML, like this:</p>
	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>

					<h2>3. Modify your own stylesheet</h2>
					<p>To take advantage of your new fonts, you must tell your style sheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>

<h2>4. Test</h2>
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
				</div>
				
				<div class="grid5 sidebar">
					<div class="box">
						<h2>Troubleshooting<br />Font-Face Problems</h2>
						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>

						<h3>Fonts not showing in any browser</h3>

						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>

						<h3>Fonts not loading in iPhone or iPad</h3>

						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>

						<h3>Fonts not loading in Firefox</h3>

						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>

						<h3>Fonts not loading in IE</h3>

						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>

						<h3>Fonts not loading in IE9</h3>

						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
					</div>
				</div>
			</div>
			
		</div>
	
	</div>
	<div id="footer">
		<p>&copy;2010-2011 Font Squirrel. All rights reserved.</p>
	</div>
</div>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_mediaquery\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
      document.createElement("nav");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("section");
      document.createElement("aside");
      document.createElement("article");
    </script>
    
    <link rel="stylesheet" href="stylesheets/style.css"> 
    <title>AwesomeCo Blog</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>

  <body>
      <header id="page_header">
        <h1>AwesomeCo Blog!</h1>
        <nav> 
          <ul>
            <li><a href="#">Latest Posts</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Contributors</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
      <section id="posts">
        <article class="post">
          <header>
            <h2>How Many Should We Put You Down For?</h2>
            <p>Posted by Brian on 
              <time datetime="2013-10-01T14:39">October 1st, 2013 at 2:39PM</time>
            </p>
          </header>
          <aside>
            <p>
              &ldquo;Never give someone a chance to say no when
              selling your product.&rdquo;
            </p>
          </aside>
          <p>
            The first big rule in sales is that if the person leaves empty-handed,
            they're likely not going to come back. That's why you have to be 
            somewhat aggressive when you're working with a customer, but you have
            to make sure you don't overdo it and scare them away.
          </p>
          <p>
           One way you can keep a conversation going is to avoid asking questions
           that have yes or no answers. For example, if you're selling a service
           plan, don't ever ask &ldquo;Are you interested in our 3 or 5 year 
           service plan?&rdquo; Instead, ask &ldquo;Are you interested in the 3
           year service plan or the 5 year plan, which is a better value?&rdquo;
           At first glance, they appear to be asking the same thing, and while 
           a customer can still opt out, it's harder for them to opt out of 
           the second question because they have to say more than just
           &ldquo;no.&rdquo;
          </p>
          <footer>
            <p><a href="comments"><i>25 Comments</i></a> ...</p>
          </footer>
        </article>
      </section>
      
      <section id="sidebar">
        <nav>
          <h3>Archives</h3>
          <ul>
            <li><a href="2013/10">October 2013</a></li>
            <li><a href="2013/09">September 2013</a></li>
            <li><a href="2013/08">August 2013</a></li>
            <li><a href="2013/07">July 2013</a></li>
            <li><a href="2013/06">June 2013</a></li>
            <li><a href="2013/05">May 2013</a></li>
            <li><a href="2013/04">April 2013</a></li>
            <li><a href="2013/03">March 2013</a></li>
            <li><a href="2013/02">February 2013</a></li>
            <li><a href="2013/01">January 2013</a></li>
            <li><a href="all">More</a></li>
          </ul>
        </nav>
    	</section> 
      
      <footer id="page_footer">
        <p>Copyright © 2013 AwesomeCo.</p>
        <nav>
          <ul>   
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">Privacy</a></li>
          </ul>
        </nav>
      </footer>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_print_links\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <title>Forms and Policies - Human Resources | AwesomeCo</title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="print.css" type="text/css" media="print">

    <script 
      charset="utf-8"
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'
      type='text/javascript'>
    </script>
    <!--[if lte IE 7]>
    <script type="text/javascript" src="print.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Forms and Policies</h1>
      
      <ul>
        <li>
           <a href="travel/index.html">Travel Authorization Form</a>
        </li>
        <li>
           <a href="travel/expenses.html">Travel Reimbursement Form</a>
        </li>
        <li>
           <a href="travel/guidelines.html">Travel Guidelines</a>
        </li>
      </ul>
      
  </body>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\css3_rough_edges\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <title>AwesomeCo Customer Portal</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/style.css">
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen">
    <![endif]-->
  </head>
  <body>
    <form class="login" action="/login" method="post">
      <fieldset>
        <legend>Existing Users</legend>
        <ol>
          <li>
            <label for="email">Email</label>
            <input id="email" type="email" name="email">
          </li>
          <li>
            <label for="password">Password</label>
            <input id="password" type="password" 
                   name="password" value="" autocomplete="off"/>
          </li>
          <li><input type="submit" value="Log in"></li>
        </ol>
      </fieldset>  
    </form>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_accessible_tables\accessible_index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Workshops</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body role="document">
    <table aria-describedby="schedule_instructions">
      <caption>
        <h1>Conference Schedule</h1>
      </caption>
      <tr>
        <th scope="col">Time</th>
        <th scope="col">Room 100</th>
        <th scope="col">Room 101</th>
        <th scope="col">Room 152</th>
        <th scope="col">Room 153</th>
      </tr>
	  
      <tr>
        <th scope="row">8:00 AM</th>
        <td colspan="4">Opening Remarks and Keynote  - Ballroom</td>
      </tr>
	  
      <tr>
        <th scope="row">9:00 AM</th>
        <td>Creating Better Marketing Videos</td>
        <td>Embracing Social Media</td>
        <td>Pop Culture And You</td>
        <td>Visualizing Success</td>
      </tr>
      <tr>
        <th scope="row">10:00 AM</th>
        <td>Build a Solid Fundraising Campaign</td>
        <td>Print Is Dead</td>
        <td>Mobile First? Not So Fast!</td>
        <td>Proving What Works</td>
      </tr>
      <tr>
        <th scope="row">11:00 AM</th>
        <td>Making Connections</td>
        <td>Marketing Panel</td>
        <td>Clear Content</td>
        <td>Improving Experiences</td>
      </tr>
      <tr>
        <th scope="row">12:00</th>
        <td colspan="4">Lunch</td>
      </tr>
    </table>
    
    <section id="schedule_instructions">
      <p>
        Use this grid to find the session you want
        to attend.  Note that the keynote and lunch
        are in the ballroom.
      </p>
    </section>
    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_accessible_tables\original_index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Workshops</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body role="document">
    <h1>Conference Schedule</h1>
    
    <table>
      <tr>
        <th>Time</th>
        <th>Room 100</th>
        <th>Room 101</th>
        <th>Room 152</th>
        <th>Room 153</th>
      </tr>
      <tr>
        <th>8:00 AM</th>
        <td colspan="4">Opening Remarks and Keynote  - Ballroom</td>
      </tr>
      <tr>
        <th>9:00 AM</th>
        <td>Creating Better Marketing Videos</td>
        <td>Embracing Social Media</td>
        <td>Pop Culture And You</td>
        <td>Visualizing Success</td>
      </tr>
      <tr>
        <th>10:00 AM</th>
        <td>Build a Solid Fundraising Campaign</td>
        <td>Print Is Dead</td>
        <td>Mobile First? Not So Fast!</td>
        <td>Proving What Works</td>
      </tr>
      <tr>
        <th>11:00 AM</th>
        <td>Making Connections</td>
        <td>Marketing Panel</td>
        <td>Clear Content</td>
        <td>Improving Experiences</td>
      </tr>
      <tr>
        <th>12:00</th>
        <td colspan="4">Lunch</td>
      </tr>
    </table>
    <section>
      <p>
        Use this grid to find the session you want
        to attend.  Note that the keynote and lunch
        are in the ballroom.
      </p>
    </section>
    
    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_aria\blog\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <!--[if lte IE 8]>
    <script>
      document.createElement("nav");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("section");
      document.createElement("aside");
      document.createElement("article");
    </script>
    <![endif]-->
    
    <link rel="stylesheet" href="stylesheets/style.css"> 
    <title>AwesomeCo Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>

  <body role="document"> 
    
      <header id="page_header" role="banner"> 
        <h1>AwesomeCo Blog!</h1>
        <nav role="navigation"> 
          <ul>
            <li><a href="#">Latest Posts</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Contributors</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>

      <section id="posts" role="main">
        <article class="post" role="article">
          <header>
            <h2>How Many Should We Put You Down For?</h2>
            <p>Posted by Brian on 
              <time datetime="2013-10-01T14:39">October 1st, 2013 at 2:39PM</time>
            </p>
          </header>
          
          <aside>
            <p>
              &ldquo;Never give someone a chance to say no when
              selling your product.&rdquo;
            </p>
          </aside>
          <p>
            The first big rule in sales is that if the person leaves empty-handed,
            they're likely not going to come back. That's why you have to be 
            somewhat aggressive when you're working with a customer, but you have
            to make sure you don't overdo it and scare them away.
          </p>
          <p>
           One way you can keep a conversation going is to avoid asking questions
           that have yes or no answers. For example, if you're selling a service
           plan, don't ever ask &ldquo;Are you interested in our 3 or 5 year 
           service plan?&rdquo; Instead, ask &ldquo;Are you interested in the 3
           year service plan or the 5 year plan, which is a better value?&rdquo;
           At first glance, they appear to be asking the same thing, and while 
           a customer can still opt out, it's harder for them to opt out of 
           the second question because they have to say more than just
           &ldquo;no.&rdquo;
          </p>

          <footer>
            <p><a href="comments"><i>25 Comments</i></a> ...</p>
          </footer>
        </article>

      </section>
      <section id="sidebar" role="complementary">
        
        <nav>
          <h3>Archives</h3>
          <ul>
            <li><a href="2013/10">October 2013</a></li>
            <li><a href="2013/09">September 2013</a></li>
            <li><a href="2013/08">August 2013</a></li>
            <li><a href="2013/07">July 2013</a></li>
            <li><a href="2013/06">June 2013</a></li>
            <li><a href="2013/05">May 2013</a></li>
            <li><a href="2013/04">April 2013</a></li>
            <li><a href="2013/03">March 2013</a></li>
            <li><a href="2013/02">February 2013</a></li>
            <li><a href="2013/01">January 2013</a></li>
            <li><a href="all">More</a></li>
          </ul>
        </nav>
    	</section> <!-- sidebar -->
 
      <footer id="page_footer" role="contentinfo">
        <p>Copyright © 2013 AwesomeCo.</p>
        <nav>
          <ul>   
             <li><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Terms of Service</a></li>
             <li><a href="#">Privacy</a></li>
           </ul>
        </nav>
      </footer> <!-- footer -->
      
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_aria\homepage\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body>
    <header id="header" role="banner"> 
      <h1>AwesomeCo </h1>
      <nav>
        <ul>
          <li><a href="#welcome">Welcome</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
    </header>
    <section id="content"
             role="document" aria-live="assertive" aria-atomic="true">
      
      <section id="welcome">
        <header>
          <h2>Welcome</h2>
        </header>
        <p>The welcome section</p>
      </section>

      <section id="services">
        <header>
          <h2>Services</h2>
        </header>
        <p>The services section</p>
      </section>
    
      <section id="contact">
        <header>
          <h2>Contact</h2>
        </header>
        <p>The contact section</p>
      </section>
    
      <section id="about">
        <header>
          <h2>About</h2>
        </header>
        <p>The about section</p>
      </section>

    </section>
    <footer id="footer" role="contentinfo">
      <p>Copyright © 2013 AwesomeCo.</p>
      <nav>
        <ul>   
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Terms of Service</a></li>
           <li><a href="#">Privacy</a></li>
         </ul>
      </nav>
    </footer> 
    
    <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    
    <script src="javascripts/application.js"></script>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_audio\advanced_audio.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sound Samples</title>
  </head>
  
  <body>
    <h1>Samples:</h1>
    <article class="sample">
      <header><h2>Drums</h2></header>
      <audio id="drums" controls>
        <source src="sounds/ogg/drums.ogg" type="audio/ogg">
        <source src="sounds/mp3/drums.mp3" type="audio/mpeg">
      </audio>
      <a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
    </article>
  
    <article class="sample">
      <header><h2>Guitar</h2></header>
      <audio id="guitar" controls>
        <source src="sounds/ogg/guitar.ogg" type="audio/ogg">
        <source src="sounds/mp3/guitar.mp3" type="audio/mpeg">
      </audio>
      <a href="sounds/mp3/guitar.mp3">Download guitar.mp3</a>
    </article>
    
    <article class="sample">
      <header><h2>Organ</h2></header>
      <audio id="organ" controls>
        <source src="sounds/ogg/organ.ogg" type="audio/ogg">
        <source src="sounds/mp3/organ.mp3" type="audio/mpeg">
      </audio>
      <a href="sounds/mp3/organ.mp3">Download organ.mp3</a>
    </article>
    
    <article class="sample">
      <header><h2>Bass</h2></header>
      <audio id="bass" controls>
        <source src="sounds/ogg/bass.ogg" type="audio/ogg">
        <source src="sounds/mp3/bass.mp3" type="audio/mpeg">
      </audio>
      <a href="sounds/mp3/bass.mp3">Download bass.mp3</a>
    </article>
      <script 
        src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
      </script>
      <script src="javascripts/audio.js"></script>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_audio\audio.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sound Samples</title>
  </head>
  
  <body>
    <h1>Samples:</h1>
    <article class="sample">
      <header><h2>Drums</h2></header>
      <audio id="drums" controls>
        <source src="sounds/ogg/drums.ogg" type="audio/ogg">
        <source src="sounds/mp3/drums.mp3" type="audio/mpeg">
        <a href="sounds/mp3/drums.mp3">Download drums.mp3</a>  
      </audio>
    </article>
  
    <article class="sample">
      <header><h2>Guitar</h2></header>
      <audio id="guitar" controls>
        <source src="sounds/ogg/guitar.ogg" type="audio/ogg">
        <source src="sounds/mp3/guitar.mp3" type="audio/mpeg">
        <a href="sounds/mp3/guitar.mp3">Download guitar.mp3</a>  
      </audio>
    </article>
    
    <article class="sample">
      <header><h2>Organ</h2></header>
      <audio id="organ" controls>
        <source src="sounds/ogg/organ.ogg" type="audio/ogg">
        <source src="sounds/mp3/organ.mp3" type="audio/mpeg">
        <a href="sounds/mp3/organ.mp3">Download organ.mp3</a>
      </audio>
    </article>
    
    <article class="sample">
      <header><h2>Bass</h2></header>
      <audio id="bass" controls>
        <source src="sounds/ogg/bass.ogg" type="audio/ogg">
        <source src="sounds/mp3/bass.mp3" type="audio/mpeg">
        <a href="sounds/mp3/bass.mp3">Download bass.mp3</a>
      </audio>
    </article>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\canvas_graph.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Graph</title>
    <!--[if lte IE 8]>
    <script src="javascripts/excanvas.js"></script>
    <![endif]-->
    
  </head>
  <body>
    <h2>Browser support</h2>
    <canvas id="browsers" width="700" height="250"></canvas>
    
    <div id="graph_data">
      <h1>Browser share for this site</h1>
      <ul>
        <li>
          <p data-name="Safari" data-percent="10">
            Safari - 10%
          </p>
        </li>
        <li>
          <p data-name="Internet Explorer" data-percent="30">
            Internet Explorer - 30%
          </p>
        </li>
        <li>
          <p data-name="Firefox" data-percent="15">
            Firefox - 15%
          </p>
        </li>       
        <li>
          <p data-name="Google Chrome" data-percent="45">
            Google Chrome - 45%
          </p>
        </li>        
      </ul>
    </div>
    
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/RGraph.common.js" ></script>
    <script src="javascripts/RGraph.bar.js" ></script>
    <script src="javascripts/graph.js" ></script>

  </body>
</html>
    


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\canvas_simple_drawing.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <title>Simple Drawings</title>
    <script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
     <canvas id="my_canvas" width="150" height="150">
       Fallback content here
     </canvas>
     
     <script type="text/javascript" charset="utf-8">
       var canvas = document.getElementById('my_canvas');
       if (canvas.getContext){
         var context = canvas.getContext('2d');
         
            context.fillStyle = "rgb(200,0,0)";
            context.fillRect (10, 10, 100, 100);
            context.fillStyle = "rgb(0,200,0)";
            context.fillRect (20, 20, 100, 100);
            
            context.fillStyle = "rgb(0,0,200)";
            context.fillRect (30, 30, 100, 100);
       

            
         
   
       }else{
         // do something to show the canvas's hidden contents
         // or let the browser display the text within the <canvas> element.
       }
     </script>
     </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\logo.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Logo Test</title>
  </head>
  <body>
      <canvas id="logo" width="900" height="80">
        <h1>AwesomeCo</h1>
      </canvas>
      <script>
      var drawLogo = function(){
        var canvas = document.getElementById("logo");
        var context = canvas.getContext("2d");
        
        context.fillStyle = "#FF0000";
        context.strokeStyle = "#FF0000";
      
        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(0, 40); 
        context.lineTo(30, 0);
        context.lineTo(60, 40 );
        context.lineTo(285, 40 );
        
        context.fill();   
        context.closePath();
        
        context.font = "italic 40px 'Arial'";
        context.fillText("AwesomeCo", 60, 36);
            
        context.save();
        context.translate(20,20);
        context.fillRect(0,0,20,20); 
        
        context.fillStyle    = "#FFFFFF";
        context.strokeStyle = "#FFFFFF";
        
        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(0, 20); 
        context.lineTo(10, 0);
        context.lineTo(20, 20 );
        context.lineTo(0, 20 );
        
        context.fill();
        context.closePath();
        context.restore();
            
     };
     
     var canvas = document.getElementById("logo");
     
     if (canvas.getContext){
       drawLogo();
     }
     </script>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\logo_gradient.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Logo Test</title>
    
    <!--[if lte IE 8]>
    <script src="javascripts/excanvas.js"></script>
    <![endif]-->
  </head>
  <body>
    <canvas id="logo" width="900" height="80">
      <h1>AwesomeCo</h1>
    </canvas>
    
    <script>
      var drawLogo = function(){
        var canvas = document.getElementById("logo");
        var context = canvas.getContext("2d");
        
        var gradient = context.createLinearGradient(0, 0, 0, 40);
        gradient.addColorStop(0,   "#AA0000"); // darker red
        gradient.addColorStop(1,   "#FF0000"); // red
        context.fillStyle = gradient;
        context.strokeStyle = gradient;
      
        context.font = "italic 40px 'Arial'";
        context.fillText("AwesomeCo", 60, 36);
      
         context.lineWidth = 2;
         context.beginPath();
         context.moveTo(0, 40); 
         context.lineTo(30, 0);
         context.lineTo(60, 40 );
         context.lineTo(285, 40 );
         context.stroke();
         context.closePath();
              
         context.save();
         context.translate(20,20);
         context.fillRect(0,0,20,20);
         
         
         context.fillStyle    = "#fff";
         context.strokeStyle = "#fff";
                  
         context.lineWidth = 2;
         context.beginPath();
         context.moveTo(0, 20); 
         context.lineTo(10, 0);
         context.lineTo(20, 20 );
         context.lineTo(0, 20 );
         context.fill();
         context.closePath();
         context.restore();
         
        
     };
     //END setup
     var canvas = document.getElementById("logo");
     
     var G_vmlCanvasManager; // so non-IE browsers won't error
     if (G_vmlCanvasManager != undefined) { // IE 8
       G_vmlCanvasManager.initElement(canvas);
     }
     if (canvas.getContext){
       drawLogo();
     }
     </script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_canvas\rgraph_bar_example.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <title>Graph</title>
  </head>
  <body>
  <canvas width="500" height="250" id="test">[no canvas support]</canvas>
  
  <script src="javascripts/RGraph.common.js" ></script>
  <script src="javascripts/RGraph.bar.js" ></script>
  
  <script type="text/javascript" charset="utf-8">
    var bar = new RGraph.Bar('test', [50,25,15,10]);
    bar.Set('chart.gutter', 50);
    bar.Set('chart.colors', ['red']);
    bar.Set('chart.title', "A bar graph of my favorite pies");
    bar.Set('chart.labels', ["Banana Creme", "Pumpkin", "Apple", "Cherry"]);
    bar.Draw();
  </script>
  
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_content_editable\edit.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Editing Profile</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body>
    <form action="/users/1" method="post" accept-charset="utf-8">
      <fieldset id="your_information">
        <legend>Your Information</legend>
        <ol>
         <li>
           <label for="name">Your Name</label>
           <input type="text" name="name" value="" id="name">
         </li>
         <li>
           <label for="city">City</label>
           <input type="text" name="city" value="" id="city">
         </li>
         <li>
           <label for="state">State</label>
           <input type="text" name="state" value="" id="state">
         </li>
         <li>
           <label for="postal_code">Postal Code</label>
           <input type="text" name="postal_code" value="" id="postal_code">
         </li>
         <li>
           <label for="email">Email</label>
           <input type="email" name="email" value="" id="email">
         </li>
        </ol>
        
      </fieldset>
      <p><input type="submit" value="Save"></p>
    </form>
 
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_content_editable\show.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Show User</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body id="forms">
    <h1>User information</h1>
    <section id="edit_profile_link">
      <p><a href="edit.html">Edit Your Profile</a></p>
    </section>
    <div id="status"></div>
    <ul data-url="/users/1">
      <li>
        <b>Name</b>
        <span id="name" contenteditable>Hugh Mann</span>
      </li>
      <li>
        <b>City</b>
        <span id="city" contenteditable>Anytown</span>
      </li>
      <li>
        <b>State</b>
        <span id="state" contenteditable>OH</span>
      </li>
      <li>
        <b>Postal Code</b>
        <span id="postal_code" contenteditable>92110</span>
        </li>
      <li>
        <b>Email</b>
        <span id="email" contenteditable>boss@awesomecompany.com</span>
      </li>
    </ul>
    <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/edit.js"></script>

  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_cross_document\contactlist\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Contact List</title>
    <link rel="stylesheet" href="stylesheets/style.css" >  
  </head>
  <body>
    <ul id="contacts">
      <li>
        <h2>Sales</h2>
        <p class="name">James Norris</p>
        <p class="email">j.norris@awesomeco.com</p>
      </li>
      <li>
        <h2>Operations</h2>
        <p class="name">Tony Raymond</p>
        <p class="email">t.raymond@awesomeco.com</p>
      </li>
      <li>
        <h2>Accounts Payable</h2>
        <p class="name">Clark Greenwood</p>
        <p class="email">c.greenwood@awesomeco.com</p>
      </li>
      <li>
        <h2>Accounts Receivable</h2>
        <p class="name">Herbert Whitmore</p>
        <p class="email">h.whitmore@awesomeco.com</p>
      </li>
    </ul>
    
    <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
	
    <script src="javascripts/application.js"></script>
  </body>  
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_cross_document\supportpage\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Support</title>
    
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body>
    
    <div id="form">
      <form id="supportform">
        <fieldset>
          <ol>
            <li>
              <label for="to">To</label>
              <input type="email" name="to" id="to">
            </li>
            <li>
              <label for="from">From</label>
              <input type="text" name="from" id="from">
            </li>
            <li>
              <label for="message">Message</label>
              <textarea name="message" id="message"></textarea>
            </li>
          </ol>
          <input type="submit" value="Send!">
        </fieldset>
      </form>
    </div>
   <div id="contacts">
     <iframe src="http://localhost:4000/index.html"></iframe>
   </div>
    
    <script 
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/application.js"></script>
    
    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_descriptionlist_faq\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>FAQ</title> 
  </head>
  
  <body>
    <article>
      <h1>AwesomeCo FAQ</h1>
      <dl>
        <dt>What is it that AwesomeCo actually does?</dt>
        <dd>
          <p>
            AwesomeCo creates innovative solutions for business that
            leverage growth and promote synergy, resulting in a better
            life for the global community.
          </p>
        </dd>
      </dl>
    </article>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_dragdrop\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <title>AwesomeCards</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/modernizr.js"></script>
  </head>
  <body>
    <h1>Quick Planner</h1>
    <input type="button" id="addcard" value="Add card">
        
    <div id="cards">
    </div>
    
    <script
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script src="javascripts/cards.js"></script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_forms\index.html
 <!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Project Information</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body id="forms">
    
    <form method="post" action="/projects/1">
      
      <fieldset id="personal_information">
        <legend>Project Information</legend>
        <ol>
          <li>
            <label for="name">Name</label>
            <input type="text" name="name" id="name">
          </li>
          
          <li>
            <label for="priority">Priority</label>
            <input type="range" min="0" max="10" 
                   name="priority" value="0" id="priority">
          </li>
          
          <li>
            <label for="estimated_hours">Estimated Hours</label>
            <input type="number" name="estimated_hours"
                   min="0" max="1000"
                   id="estimated_hours">
          </li>
          
          <li>
            <label for="start_date">Start date</label>
            <input type="date" name="start_date" id="start_date"
                   value="2013-12-01">
          </li>

          <li>
            <label for="email">Email contact</label>
            <input type="email" name="email" id="email">
          </li>
          
          <li>
            <label for="url">Staging URL</label>
            <input type="url" name="url" id="url">
          </li>
          
          <li>
            <label for="project_color">Project color</label>
            <input type="color" name="project_color" id="project_color">
          </li>
          <li>
            <input type="submit" value="Submit">
          </li>
        </ol>
        
      </fieldset>

    </form>
    
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    
    <script src="javascripts/fallbacks.js"></script>
  </body>
</html>
  


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_forms\autofocus\index.html
 <!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Project Information</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/modernizr.js"></script>   
  </head>
  <body id="forms">
    
    <form method="post" action="/projects/1">
      
      <fieldset id="personal_information">
        <legend>Project Information</legend>
        <ol>
          <li>
            <label for="name">Name</label>
            <input type="text" name="name" autofocus id="name">
          </li>
          
          <li>
            <label for="priority">Priority</label>
            <input type="range" min="0" max="10" 
                   name="priority" value="0" id="priority">
          </li>
          
          <li>
            <label for="estimated_hours">Estimated Hours</label>
            <input type="number" name="estimated_hours"
                   min="0" max="1000"
                   id="estimated_hours">
          </li>
          
          <li>
            <label for="start_date">Start date</label>
            <input type="date" name="start_date" id="start_date"
                   value="2013-12-01">
          </li>

          <li>
            <label for="email">Email contact</label>
            <input type="email" name="email" id="email">
          </li>
          
          <li>
            <label for="url">Staging URL</label>
            <input type="url" name="url" id="url">
          </li>
          
          <li>
            <label for="project_color">Project color</label>
            <input type="color" name="project_color" id="project_color">
          </li>
          <li>
            <input type="submit" value="Submit">
          </li>
        </ol>
        
      </fieldset>

    </form>
    
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    
    <script src="javascripts/fallbacks.js"></script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_forms\modernizr\index.html
 <!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Project Information</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/modernizr.js"></script>   
  <body id="forms">
    
    <form method="post" action="/projects/1">
      
      <fieldset id="personal_information">
        <legend>Project Information</legend>
        <ol>
          <li>
            <label for="name">Name</label>
            <input type="text" name="name" autofocus id="name">
          </li>
          
          <li>
            <label for="priority">Priority</label>
            <input type="range" min="0" max="10" 
                   name="priority" value="0" id="priority">
          </li>
          
          <li>
            <label for="estimated_hours">Estimated Hours</label>
            <input type="number" name="estimated_hours"
                   min="0" max="1000"
                   id="estimated_hours">
          </li>
          
          <li>
            <label for="start_date">Start date</label>
            <input type="date" name="start_date" id="start_date"
                   value="2013-12-01">
          </li>

          <li>
            <label for="email">Email contact</label>
            <input type="email" name="email" id="email">
          </li>
          
          <li>
            <label for="url">Staging URL</label>
            <input type="url" name="url" id="url">
          </li>
          
          <li>
            <label for="project_color">Project color</label>
            <input type="color" name="project_color" id="project_color">
          </li>
          <li>
            <input type="submit" value="Submit">
          </li>
        </ol>
        
      </fieldset>

    </form>
    
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    
    <script src="javascripts/fallbacks.js"></script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_geolocation\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Support Centers</title>
    <script src="javascripts/modernizr.js"></script>
  </head>
  <body>
    
    <p>
<img id="map" alt="Map of AwesomeCo Service Center locations"
src="http://maps.google.com/maps/api/staticmap?
&amp;size=900x300
&amp;sensor=false
&amp;maptype=roadmap 
&amp;markers=color:green|label:A|1+Davol+square,+Providence,+RI+02906-3810 
&amp;markers=color:green|label:B|22+Southwest+3rd+Avenue,Portland,+OR
&amp;markers=color:green|label:C|77+West+Wacker+Drive+Chicago+IL">
      
    </p>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/geolocation.js"></script>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_history\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo</title>
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body>
    <header id="header"> 
      <h1>AwesomeCo </h1>
      <nav>
        <ul>
          <li><a href="#welcome">Welcome</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
    </header>
    <section id="content"
             role="document" aria-live="assertive" aria-atomic="true">
      
      <section id="welcome">
        <header>
          <h2>Welcome</h2>
        </header>
        <p>The welcome section</p>
      </section>

      <section id="services">
        <header>
          <h2>Services</h2>
        </header>
        <p>The services section</p>
      </section>
    
      <section id="contact">
        <header>
          <h2>Contact</h2>
        </header>
        <p>The contact section</p>
      </section>
    
      <section id="about">
        <header>
          <h2>About</h2>
        </header>
        <p>The about section</p>
      </section>

    </section>
    <footer id="footer">
      <p>&copy; 2013 AwesomeCo.</p>
      <nav>
        <ul>   
          <li><a href="http://awesomeco.com/">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="terms.html">Terms of Service</a></li>
          <li><a href="privacy.html">Privacy</a></li>
        </ul>
      </nav>
    </footer> 
    <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script> 
    <script src="javascripts/application.js"></script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_history\fallback\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/modernizr.js"></script>
  </head>
  <body>
    <header id="header"> 
      <h1>AwesomeCo </h1>
      <nav>
        <ul>
          <li><a href="#welcome">Welcome</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
    </header>
    <section id="content"
             role="document" aria-live="assertive" aria-atomic="true">
      
      <section id="welcome">
        <header>
          <h2>Welcome</h2>
        </header>
        <p>The welcome section</p>
      </section>

      <section id="services">
        <header>
          <h2>Services</h2>
        </header>
        <p>The services section</p>
      </section>
    
      <section id="contact">
        <header>
          <h2>Contact</h2>
        </header>
        <p>The contact section</p>
      </section>
    
      <section id="about">
        <header>
          <h2>About</h2>
        </header>
        <p>The about section</p>
      </section>

    </section>
    <footer id="footer">
      <p>&copy; 2013 AwesomeCo.</p>
      <nav>
        <ul>   
          <li><a href="http://awesomeco.com/">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="terms.html">Terms of Service</a></li>
          <li><a href="privacy.html">Privacy</a></li>
        </ul>
      </nav>
    </footer> 
    <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    
    <script src="javascripts/application.js"></script>
</body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_indexedDB\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>AwesomeNotes</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/IndexedDBShim.min.js"></script>
  </head>
  <body>
    <div id="container">
      <section id="sidebar">
        <input type="button" id="new_button" value="New note">
        <input type="button" id="delete_all_button" value="Delete all">
        <ul aria-live="polite" id="notes">
        </ul>
      </section> 
      <section id="main" aria-live="polite">
        <form>
          <ol>
            <li>
              <label for="title">Title</label>
              <input type="text" id="title">
            </li>
            <li>
              <label for="note">Note</label>
              <textarea id="note"></textarea>
            </li>
            <li>
              <input type="submit" id="save_button" value="Save">
              <input type="submit" id="delete_button" value="Delete">
            </li>
          </ol>
        </form>
      </section>
    </div>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>       
    <script src="javascripts/notes.js"></script>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_localstorage\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Preferences</title>   
    <link rel="stylesheet" href="stylesheets/style.css"> 
    <script src="javascripts/modernizr.js"></script>
  </head>
  <body>
    <div id="container">
      <p><strong>Preferences</strong></p>
      <form id="preferences" action="save_prefs" 
            method="post" accept-charset="utf-8">
        <fieldset id="colors" class="">
          <legend>Colors</legend>
          <ol>
            <li>
              <label for="background_color">Background color</label>
              <input class="color" type="color" name="background_color"
                     value="" id="background_color">
            </li>
            <li>
              <label for="text_color">Text color</label>
              <input class="color" type="color" name="text_color" 
                     value="" id="text_color">
            </li>
            <li>
              <label for="text_size">Text size</label>
              <select name="text_size" id="text_size">
                <option value="16">16px</option>
                <option value="20">20px</option>
                <option value="24">24px</option>
                <option value="32">32px</option>
              </select>
          </ol>
        </fieldset>
      
        <input type="submit" value="Save changes">
      </form>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/storage.js"></script>
    <script src="javascripts/fallbacks.js"></script>
  </body>
</html>





#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_meter\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Pledge Meter</title>
    <link rel="stylesheet" href="stylesheets/style.css">
   </head>
   <body>
     
       <h3>Our Fundraising Goal</h3>  
       <meter title="USD" id="pledge_goal" 
              value="2500.00" min="0" max="5000.00">
       </meter>
       <p>Help us reach our goal of $5000!</p>
     <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
     </script>
     <script src="javascripts/fallback.js"></script>
     
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_meter\progress.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Progress</title>
    <script type="text/javascript" 
       charset="utf-8"
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
  </head>
  <body>
    <section>
     <h2>Task Progress</h2>
     <p>Progress: 
       <progress id="progressbar" min="0" max="100" value="0"></progress>
     </p>
     
     <script>
       var progressBar = document.getElementById("progressbar");
       
         setTimeout("incrementProgressbar()", 5000);
         setTimeout("incrementProgressbar()", 5000);

       
       function incrementProgressbar(){
         progressBar.value += 25;
       }
      // var progressBar = document.getElementById('p');
      // function updateProgress(newValue) {
      //   progressBar.value = newValue;
      //   progressBar.getElementsByTagName('span')[0].textContent = newValue;
      // }
      // 
      // for (i=0;i<=100;i++){
      //  $("h2").delay(5000).fadeIn();
      //  updateProgress(i);
      // };
      
     </script>
    </section>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_new_tags\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <!--[if lte IE 8]>
    <script>
      document.createElement("nav");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("section");
      document.createElement("aside");
      document.createElement("article");
    </script>
    <![endif]-->
    <link rel="stylesheet" href="stylesheets/style.css"> 
    <title>AwesomeCo Blog</title>
  </head>

  <body>
      <header id="page_header"> 
        <h1>AwesomeCo Blog!</h1>
        <nav> 
          <ul>
            <li><a href="#">Latest Posts</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Contributors</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
      <section id="posts">
        <article class="post">
          <header>
            <h2>How Many Should We Put You Down For?</h2>
            <p>Posted by Brian on 
              <time datetime="2013-10-01T14:39">October 1st, 2013 at 2:39PM</time>
            </p>
          </header>
          <aside>
            <p>
              &ldquo;Never give someone a chance to say no when
              selling your product.&rdquo;
            </p>
          </aside>
          <p>
            The first big rule in sales is that if the person leaves empty-handed,
            they're likely not going to come back. That's why you have to be 
            somewhat aggressive when you're working with a customer, but you have
            to make sure you don't overdo it and scare them away.
          </p>
          <p>
           One way you can keep a conversation going is to avoid asking questions
           that have yes or no answers. For example, if you're selling a service
           plan, don't ever ask &ldquo;Are you interested in our 3 or 5 year 
           service plan?&rdquo; Instead, ask &ldquo;Are you interested in the 3
           year service plan or the 5 year plan, which is a better value?&rdquo;
           At first glance, they appear to be asking the same thing, and while 
           a customer can still opt out, it's harder for them to opt out of 
           the second question because they have to say more than just
           &ldquo;no.&rdquo;
          </p>
          <footer>
            <p><a href="comments"><i>25 Comments</i></a> ...</p>
          </footer>
        </article>
      </section>
      
      <section id="sidebar">
	  
        <nav>
          <h3>Archives</h3>
		  
          <ul>
            <li><a href="2013/10">October 2013</a></li>
            <li><a href="2013/09">September 2013</a></li>
            <li><a href="2013/08">August 2013</a></li>
            <li><a href="2013/07">July 2013</a></li>
            <li><a href="2013/06">June 2013</a></li>
            <li><a href="2013/05">May 2013</a></li>
            <li><a href="2013/04">April 2013</a></li>
            <li><a href="2013/03">March 2013</a></li>
            <li><a href="2013/02">February 2013</a></li>
            <li><a href="2013/01">January 2013</a></li>
            <li><a href="all">More</a></li>
          </ul>
		  
        </nav>
		
    	</section> 
      
      <footer id="page_footer">
        <p>Copyright © 2013 AwesomeCo.</p>
        <nav>
          <ul>   
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">Privacy</a></li>
          </ul>
        </nav>
      </footer>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_offline\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html manifest="notes.appcache">
  <head>
    <meta charset="utf-8">
    <title>AwesomeNotes</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/IndexedDBShim.min.js"></script>
  </head>
  <body>
    <div id="container">
      <section id="sidebar">
        <input type="button" id="new_button" value="New note">
        <input type="button" id="delete_all_button" value="Delete all">
        <ul aria-live="polite" id="notes">
        </ul>
      </section> 
      <section id="main" aria-live="polite">
        <form>
          <ol>
            <li>
              <label for="title">Title</label>
              <input type="text" id="title">
            </li>
            <li>
              <label for="note">Note</label>
              <textarea id="note"></textarea>
            </li>
            <li>
              <input type="submit" id="save_button" value="Save">
              <input type="submit" id="delete_button" value="Delete">
            </li>
          </ol>
        </form>
      </section>
    </div>
    <script src="javascripts/jquery-1.9.1.min.js"></script> 
    <script src="javascripts/notes.js"></script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_offline\offlinetest.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <title>Test offline</title>
  </head>
  <body>
    <script>
    if (navigator.onLine) {
      alert('online')
    } else {
      alert('offline');
    }
    
    window.addEventListener("offline", function(e) {
      alert("offline");
    }, false);

    window.addEventListener("online", function(e) {
      alert("online");
    }, false);
    
    </script>
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_placeholder\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src='javascripts/modernizr.js'></script>
  </head>
  <body>
    <form id="create_account" action="/signup" method="post">
      <fieldset id="signup">
        <legend>Create New Account</legend>
        <ol>
          <li>
            <label for="first_name">First Name</label>
            <input id="first_name" type="text" 
                   autofocus
                   name="first_name" placeholder="'John'">
          </li>
          <li>
            <label for="last_name">Last Name</label>
            <input id="last_name" type="text" 
                   name="last_name" placeholder="'Smith'">
          </li>
          <li>
            <label for="email">Email</label>
            <input id="email" type="email" 
                   name="email" placeholder="user@example.com">
          </li>
          <li>
            <label for="password">Password</label>
            <input id="password" type="password" name="password" value=""
                   autocomplete="off" placeholder="8-10 characters" />
          </li>
          <li>
            <label for="password_confirmation">Password Confirmation</label>
            <input id="password_confirmation" type="password" 
                   name="password_confirmation" value=""
                   autocomplete="off" placeholder="Type your password again" />
          </li>
          <li><input type="submit" value="Sign Up"></li>
        </ol>
      </fieldset>  
    </form>
    <script 
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script src='javascripts/fallbacks.js'></script>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\original_example_1.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Human Resources | AwesomeCo</title>
  </head>
  <body>
    <ul>
      <li>
        <a href='#'
          onclick="window.open('help/holiday_pay.html',WinName,'width=300,height=300');">
          Holiday pay
        </a>
        
      </li>
    </ul>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\original_example_2.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Human Resources | AwesomeCo</title>
  </head>
  <body>
    <ul>
      <li>
        <a href='help/holiday_pay.html'
          onclick="window.open(this.href,WinName,'width=300,height=300');">
          Holiday pay
        </a>
        
      </li>
    </ul>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\original_example_3.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Human Resources | AwesomeCo</title>

  </head>
  <body>
    <ul>
      <li>
        <a href="help/holiday_pay.html" class="popup">Holiday Pay</a>
        
      </li>
    </ul>
    <script 
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script>
    $("a.popup").click(function(event){
      event.preventDefault();
      window.open(this.getAttribute('href'));
    });
    </script>
    
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\popup.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Human Resources | AwesomeCo</title>
  </head>
  <body>
    <h1>Human Resources info</h1>   
      <ul>
        <li>
          <a href="help/holiday_pay.html" 
             data-width="600" 
             data-height="400"
             title="Holiday Pay"
             class="popup">Holiday pay</a>
        </li>
      </ul>
      
      <script 
        src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
      </script>
      <script>
       $("a.popup").click(function(event){
         event.preventDefault();
         var link = this;
         var href = link.getAttribute("href");
         var height = link.getAttribute("data-height");
         var width = link.getAttribute("data-width");
         
         window.open (href,"popup",
           "height=" + height +",width=" + width + "");          
       });
      </script>
  </body>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\popup_dataset.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Human Resources | AwesomeCo</title>
  </head>
  <body>
    <h1>Human Resources info</h1>   
      <ul>
        <li>
          <a href="help/holiday_pay.html" 
             data-width="600" 
             data-height="400"
             title="Holiday Pay"
             class="popup">Holiday pay</a>
        </li>
      </ul>
      
      <script 
        src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
      </script>
      <script>
       $("a.popup").click(function(event){
         event.preventDefault();
         var link = this;
         var href = link.getAttribute("href");
         var height = link.dataset.height;
         var width = link.dataset.width;
         window.open (href,"popup",
           "height=" + height +",width=" + width + "");          
       });
      </script>
  </body>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_popups_with_custom_data\help\holiday_pay.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <title>Holiday Pay</title>
  </head>
  <body>
    <h1>Holiday Pay</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
         ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit
           esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui
             officia deserunt mollit anim id est laborum.</p>
  
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_svg\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Logo Test</title>
    <script src="javascripts/svg.js" data-path="javascripts"></script>
  </head>
  <body>
    <script type="image/svg+xml">
      <svg id="awesomeco_logo" width="900" height="80">
          <polyline id="line" 
                    points="0,40 30,0 60,40 285,40"
                    style="fill:none;stroke:rgb(255,0,0);stroke-width:2">
          </polyline>
        
          <text id="AwesomeCo" 
                fill="rgb(255,0,0)" 
                font-family="Arial" font-size="40" 
                font-style="italic" font-weight="normal">
              <tspan x="60" y="36" fill="rgb(255,0,0)">AwesomeCo</tspan>
           </text>  
        
           <rect id="square" 
                 x="20" y="20" height="20" width="20" 
                 style="fill:rgb(255,0,0)"></rect>   
        
           <path id="Triangle" 
                 d="M20,40 L30,20 L40,40 Z M20,40" 
                 fill="rgb(255,255,255)"></path>
      </svg>
    </script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_validation\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src="javascripts/modernizr.js"></script>   
  </head>
  <body>
    <form id="create_account" action="/signup" method="post">
      <fieldset id="signup">
        <legend>Create New Account</legend>
        <ol>
          <li>
            <label for="first_name">First Name</label>
			
            <input id="first_name" type="text" 
              autofocus="true"
              required
              name="first_name" placeholder="'John'">
          </li>
          <li>
            <label for="last_name">Last Name</label>
			
            <input id="last_name" type="text" 
              required
              name="last_name" placeholder="'Smith'">
          </li>
          <li>
            <label for="email">Email</label>
			
            <input id="email" type="email" 
              required
              name="email" placeholder="user@example.com">
          </li>
          <li>
            <label for="password">Password</label>
            <input id="password" type="password" name="password" value=""
              autocomplete="off" placeholder="8-10 characters"
              pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\W]).*$"
              title="Password must be 8 or more characters with at 
                    least one number, an uppercase letter, and one special character"
            />
          </li>
          <li>
            <label for="password_confirmation">Password Confirmation</label>
            <input id="password_confirmation" type="password" 
              name="password_confirmation" value=""
              autocomplete="off" placeholder="Type your password again"   
              pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\W]).*$"
              title="Password confirmation must be 8 or more characters with at 
                     least one number, an uppercase letter, and one special character"
            />
          </li>
          <li><input type="submit" value="Sign Up"></li>
        </ol>
      </fieldset>  
    </form>
    <script 
      src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script src="javascripts/fallbacks.js"></script>
    
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_video\mp4only_index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Video</title>
    <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.0/video.js"></script>
  </head>
  
  <body>
    <header>
      <h1>Photoshop Tricks</h1>
    </header>
    
    <section id="videos">
            
      <article>
        <header>
          <h2>Saturate with Blur</h2>
        </header>
        <video id="video_blur" preload="auto" controls
               width="640" height="480"
               class="video-js vjs-default-skin"
               data-setup="{}">
          <source src="video/h264/01_blur.mp4"   type='video/mp4'>
          <track kind="captions" src="video/captions/01_blur.vtt"
                 srclang="en-us" label="English" />
          <p>Your browser does not support the video tag.</p>
        </video>
        <script>
          var videoElement = document.createElement("video");
          if(videoElement.canPlayType){
            if (videoElement.canPlayType("video/mp4") === ""){
              videojs("video_blur", {"techOrder": ["flash","html5"]});
            };
          }
        </script>
        <section class="downloads">
          <header>
            <h3>Downloads</h3>
          </header>
          <ul>
            <li><a href="video/h264/01_blur.mp4">
              H264, playable on most platforms</a></li>
          </ul>
        </section>
        <section class="transcript">
          <h2>Transcript</h2>
          <p>
            We'll drag the existing layer to the new button on the bottom of 
            the Layers palette to create a new copy.
          </p>
          <p>
            Next we'll go to the Filter menu and choose Gaussian Blur. 
            We'll change the blur amount just enough so that we lose a little 
            bit of the detail of the image.
          </p>
          <p>
            Now we'll double-click on the layer to edit the layer and 
            change the blending mode to Overlay. We can then adjust the 
            amount of the effect by changing the opacity slider.
          </p>
          <p>Now we have a slightly enhanced image.</p>
        </section>
      </article>
      
      <article>
        <header><h2>Adjustment Layers</h2></header>
        <video id="video_adjustment" preload="auto" controls
               width="640" height="480"
               class="video-js vjs-default-skin"
               data-setup="{}">
          <source src="video/h264/02_adjust.mp4"   type="video/mp4">
          <p>Your browser does not support the video tag.</p>
        </video>
        <section class="downloads">
          <header>
            <h3>Downloads</h3>
          </header>
          <ul>
            <li>
              <a href="video/h264/02_adjust.mp4">
                H264, playable on most platforms
              </a>
            </li>
          </ul>
        </section>
        
        <section class="transcript">
          <h2>Transcript</h2>
          
          <p>
            Many people who use Photoshop tend to make adjustments by going 
            to the Image -> Adjustment menu and choosing things like Levels
            which you use to change the lighting of the image. Adjusting 
            points on the graph change the lighting.
          </p>
          <p>
            The problem with this approach is that this adjustment is now applied
            to the image, so when we go to adjust things like the exposure of the 
            image, which we can do from the same menu, then the changes we make 
            to the exposure are being made on the image we have already adjusted.
          </p>
          <p>
            There's a better way to to this, by using Adjustment Layers. 
          </p>
          <p>
            We'll revert this image, and then we'll make a new adjustment layer
             for the Levels. This interface looks exactly the same as the previous.
          </p>
          <p>
            We adjust the points on the graph and see the changes to the 
            image in real-time.
          </p>
          <p>
            Then we can add another layer for the exposure. When we make changes,
            they're applied independently to the image.
          </p>
          <p>
            We can always come back and adjust these at any time, and we can 
            toggle them on and off when we don't need them. This is a great 
            way to adjust images non-destructively.
          </p>
          
        </section>
      </article>
    
    </section>

    
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_video\native.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Video</title>
  </head>
  
  <body>
    <header>
      <h1>Photoshop Tricks</h1>
    </header>
    
    <section id="videos">            
      <article>
        <header>
          <h2>Saturate with Blur</h2>
        </header>
        <video id="video_blur" preload="auto" controls
               width="640" height="480">
          <source src="video/h264/01_blur.mp4"   type='video/mp4'>
          <source src="video/theora/01_blur.ogv" type='video/ogg'>
          <source src="video/webm/01_blur.webm"  type='video/webm'>
          <p>Your browser does not support the video tag.</p>
        </video>
        
        <section class="downloads">
          <header>
            <h3>Downloads</h3>
          </header>
          <ul>
            <li><a href="video/h264/01_blur.mp4">
              H264, playable on most platforms</a></li>
            <li><a href="video/theora/01_blur.ogv">OGG format</a></li>
            <li><a href="video/webm/01_blur.webm">WebM format</a></li>
          </ul>
        </section>
      </article>
      
      <article>
        <header><h2>Adjustment Layers</h2></header>
        <video id="video_adjustment" preload="auto" controls
               width="640" height="480">
          <source src="video/h264/02_adjust.mp4"   type="video/mp4">
          <source src="video/theora/02_adjust.ogv" type="video/ogv" >
          <source src="video/webm/02_adjust.webm"  type="video/webm">
          <p>Your browser does not support the video tag.</p>
        </video>
        <section class="downloads">
          <header>
            <h3>Downloads</h3>
          </header>
          <ul>
            <li>
              <a href="video/h264/02_adjust.mp4">
                H264, playable on most platforms
              </a>
            </li>
            <li><a href="theora/h264/02_adjust.ogv">OGG format</a></li>
            <li><a href="video/webm/02_adjust.webm">WebM format</a></li>
          </ul>
        </section>
        

      </article>
    
    </section>

    
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_video\videojs_index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Video</title>
    <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/4.0/video.js"></script>
  </head>
  
  <body>
    <header>
      <h1>Photoshop Tricks</h1>
    </header>
    
    <section id="videos">
            
      <article>
        <header>
          <h2>Saturate with Blur</h2>
        </header>
        <video id="video_blur" preload="auto" controls
               width="640" height="480"
               class="video-js vjs-default-skin"
               data-setup="{}">
          <source src="video/h264/01_blur.mp4"   type='video/mp4'>
          <source src="video/theora/01_blur.ogv" type='video/ogg'>
          <source src="video/webm/01_blur.webm"  type='video/webm'>
          <track kind="captions" src="video/captions/01_blur.vtt"
                 srclang="en-us" label="English" />
          <p>Your browser does not support the video tag.</p>
        </video>
        
        <section class="downloads">
          <header>
            <h3>Downloads</h3>
          </header>
          <ul>
            <li><a href="video/h264/01_blur.mp4">
              H264, playable on most platforms</a></li>
            <li><a href="video/theora/01_blur.ogv">OGG format</a></li>
            <li><a href="video/webm/01_blur.webm">WebM format</a></li>
          </ul>
        </section>
        <section class="transcript">
          <h2>Transcript</h2>
          <p>
            We'll drag the existing layer to the new button on the bottom of 
            the Layers palette to create a new copy.
          </p>
          <p>
            Next we'll go to the Filter menu and choose Gaussian Blur. 
            We'll change the blur amount just enough so that we lose a little 
            bit of the detail of the image.
          </p>
          <p>
            Now we'll double-click on the layer to edit the layer and 
            change the blending mode to Overlay. We can then adjust the 
            amount of the effect by changing the opacity slider.
          </p>
          <p>Now we have a slightly enhanced image.</p>
        </section>
      </article>
      
      <article>
        <header><h2>Adjustment Layers</h2></header>
        <video id="video_adjustment" preload="auto" controls
               width="640" height="480"
               class="video-js vjs-default-skin"
               data-setup="{}">
          <source src="video/h264/02_adjust.mp4"   type="video/mp4">
          <source src="video/theora/02_adjust.ogv" type="video/ogv" >
          <source src="video/webm/02_adjust.webm"  type="video/webm">
          <p>Your browser does not support the video tag.</p>
        </video>
        <section class="downloads">
          <header>
            <h3>Downloads</h3>
          </header>
          <ul>
            <li>
              <a href="video/h264/02_adjust.mp4">
                H264, playable on most platforms
              </a>
            </li>
            <li><a href="theora/h264/02_adjust.ogv">OGG format</a></li>
            <li><a href="video/webm/02_adjust.webm">WebM format</a></li>
          </ul>
        </section>
        
        <section class="transcript">
          <h2>Transcript</h2>
          
          <p>
            Many people who use Photoshop tend to make adjustments by going 
            to the Image -> Adjustment menu and choosing things like Levels
            which you use to change the lighting of the image. Adjusting 
            points on the graph change the lighting.
          </p>
          <p>
            The problem with this approach is that this adjustment is now applied
            to the image, so when we go to adjust things like the exposure of the 
            image, which we can do from the same menu, then the changes we make 
            to the exposure are being made on the image we have already adjusted.
          </p>
          <p>
            There's a better way to to this, by using Adjustment Layers. 
          </p>
          <p>
            We'll revert this image, and then we'll make a new adjustment layer
             for the Levels. This interface looks exactly the same as the previous.
          </p>
          <p>
            We adjust the points on the graph and see the changes to the 
            image in real-time.
          </p>
          <p>
            Then we can add another layer for the exposure. When we make changes,
            they're applied independently to the image.
          </p>
          <p>
            We can always come back and adjust these at any time, and we can 
            toggle them on and off when we don't need them. This is a great 
            way to adjust images non-destructively.
          </p>
          
        </section>
      </article>
    
    </section>

    
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_websockets\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>My Chat Server</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src='javascripts/modernizr.js'></script>
  </head>
  <body>
    <div id="chat_wrapper">
      <h2>AwesomeCo Help!</h2>
      <form id="nick_form" action="#" method="post">
        <p>
          <label>Nickname
            <input id="nickname" type="text" value="GuestUser"/>
          </label>
          <input type="submit" value="Change">
        </p>
      </form>
      <div id="chat">connecting....</div>
      <form id="chat_form" action="#" method="post">
        <p>
          <label>Message
            <input id="message" type="text" />
          </label>
          <input type="submit" value="Send">
        </p>
      </form>
    </div>
    <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src='javascripts/chat.js'></script>

  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_websockets\web-socket-js\sample.html
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<!--
  Lincense: Public Domain
-->

<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Sample of web_socket.js</title>
  
  <!-- Include these three JS files: -->
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript" src="web_socket.js"></script>

  <script type="text/javascript">
    
    // Set URL of your WebSocketMain.swf here:
    WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";
    // Set this to dump debug message from Flash to console.log:
    WEB_SOCKET_DEBUG = true;
    
    // Everything below is the same as using standard WebSocket.
    
    var ws;
    
    function init() {

      // Connect to Web Socket.
      // Change host/port here to your own Web Socket server.
      ws = new WebSocket("ws://localhost:10081/");

      // Set event handlers.
      ws.onopen = function() {
        output("onopen");
      };
      ws.onmessage = function(e) {
        // e.data contains received string.
        output("onmessage: " + e.data);
      };
      ws.onclose = function() {
        output("onclose");
      };
      ws.onerror = function() {
        output("onerror");
      };

    }
    
    function onSubmit() {
      var input = document.getElementById("input");
      // You can send message to the Web Socket using ws.send.
      ws.send(input.value);
      output("send: " + input.value);
      input.value = "";
      input.focus();
    }
    
    function onCloseClick() {
      ws.close();
    }
    
    function output(str) {
      var log = document.getElementById("log");
      var escaped = str.replace(/&/, "&amp;").replace(/</, "&lt;").
        replace(/>/, "&gt;").replace(/"/, "&quot;"); // "
      log.innerHTML = escaped + "<br>" + log.innerHTML;
    }

  </script>
</head><body onload="init();">
  <form onsubmit="onSubmit(); return false;">
    <input type="text" id="input">
    <input type="submit" value="Send">
    <button onclick="onCloseClick(); return false;">close</button>
  </form>
  <div id="log"></div>
</body></html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_websql\index.html
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <!--[if lte IE 9]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <![endif]-->
    
    <title>AwesomeNotes</title>
    
    
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>
    <section id="sidebar">
      <input type="button" id="new_button" value="New note">
      <input type="button" id="delete_all_button" value="Delete all">
      
      <ul id="notes">
      </ul>
    </section> 
    <section id="main">
      <form>
        <ol>
          <li>
            <input type="submit" id="save_button" value="Save">
            <input type="submit" id="delete_button" value="Delete">
          </li>
          <li>
            <label for="title">Title</label>
            <input type="text" id="title">
          </li>
          <li>
            <label for="note">Note</label>
            <textarea id="note"></textarea>
          </li>
        </ol>
      </form>
    </section>

    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/notes.js"></script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\html5_why\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Your Title Goes Here</title>    
  </head>
  <body>
     <!-- your usual tags and content -->
  </body>
</html>
    


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\bind.html
<!DOCTYPE HTML">
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Ready event</title>
  </head>
  <body>
    <div id="droparea">
      <p>Drop something here</p>
    </div>
    
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
  
    
    <script>
       $(function() { 
         
         target = $("#droparea")
         target.bind('dragover', function(event) {    
           if (event.preventDefault) event.preventDefault();
           return false;
         });
         
       });
       
    </script>
    
  </body>
    
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\create_elements.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple Selection</title>  
  </head>
  <body>
    
     <div id="header">
       <h1>Heading</h1>
     </div>
     
     <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
     </script>


     <script type="text/javascript" charset="utf-8">
       $(function(){

         var input = $("input");
         var element = $("<p>Hello World</p>");
         element.css("color", "#f00").insertAfter("#header");
       });
     </script>
    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\events.html
<!DOCTYPE HTML">
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery events</title>
  </head>
  <body>
    <div id="droparea">
      <p>Drop something here</p>
    </div>
    
    
    <ul id="links">
      <li><a class="popup" href="http://google.com">Google</a></li>
      <li><a class="popup" href="http://bing.com">Bing</a></li>
      <li><a class="popup" href="http://yahoo.com">Yahoo</a></li>
    </ul>
    
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    
    
  
    
    <script>

         target = $("#droparea")
         target.on('dragover', function(event) {    
           event.preventDefault();
           return false;
         });
         
         var links = $("#links");
         links.click(function(event){
           link = event.target;  
           var address = $(link).attr('href'); 
           event.preventDefault();
           window.open(address);
         });
         
    </script>
    
  </body>
    
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\methods.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <style type="text/css" media="screen">
      .focused{ background-color: #ddd; }
    </style>
  </head>
  <body>
    <h1>Todo List</h1>
    <div id="message">
    </div>
    <form id="task_form">
      <label for="task">Task</label>
      <input type="text" id="task" >
      <input type="submit" value="Add">
    </form>
    <ul id="tasks">
    </ul>
    
     <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
     </script>
      
      <script type="text/javascript">
      $(function(){

       $("label").css("color", "#f00");

         $("h1").css( {"color" : "red",
                       "text-decoration" : "underline"}
                    );


       $("input").focus(function(event){
         $(this).addClass("focused");
       });
       $("input").blur(function(event){
         $(this).removeClass("focused");
       });


       $("#message").html("Hello World!");

       var wrapper = $("#message").wrap("<div class='wrapper'></div>").parent();

        $("#task_form").submit(function(event){
          event.preventDefault();
          var new_element = $("<li>" + $("#task").val() + "</li>");
          $("#tasks").append(new_element);
        });
      });
      </script>
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\popup.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Popup</title>
  </head>
  <body>
    
    <ul id="links">
      <li><a class="popup" href="http://google.com">Google</a></li>
      <li><a class="popup" href="http://bing.com">Bing</a></li>
      <li><a class="popup" href="http://yahoo.com">Yahoo</a></li>
    </ul>
    
     <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
     </script>


      <script type="text/javascript" charset="utf-8">
        var links = $("a.popup");
        links.click(function(event){
          var address = $(this).attr('href'); 
          event.preventDefault();
          window.open(address);
        });
      </script>
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\ready.html
<!DOCTYPE HTML">
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Ready event</title>
  </head>
  
  <body>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
      $(document).ready(function() { 
        alert("Hi! I am a popup that displays when the page loads");
      });
    </script>
  
    
    <script>
       $(function() { 
         alert("Hi! I am a popup that displays when the page loads");
       });
       
    </script>
  </body>
  
    
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\remove_elements.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Removing Elements</title>  
  </head>
  <body>
    
    <div id="things">
      <ul id="animals">
        <li>Lions</li>
        <li>Tigers</li>
        <li>Bears</li>
      </ul>
    </div>
    
    <button id="btnRemove">Remove</button>
    <button id="btnEmpty">Empty</button>
    
     
     <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
     </script>


     <script>
       $("#btnRemove").click(function(){
         $("#animals").remove();
       });
     
       $("#btnEmpty").click(function(){
         $("#animals").empty();
       });
     </script>
    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\jqueryprimer\simple_selection.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Simple Selection</title>
  </head>
  <body>
    
    <h1 class="hide">Header</h1>
    
    
    <h2 class="hide">Second header</h2>
    
    <p>This is a simple paragraph</p>
    
    <p class="important">This is an important paragraph</p>
    
     <script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
     </script>

      <script>

        $("h1");

        $(".important");

        $("h1").hide();
        
        $("#sidebar a").hide();

        $("h2").addClass("hidden").removeClass("visible");

      </script>
    
  </body>
</html>


#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\template\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Page</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <!--[if lte IE 8]>
    
    <![endif]-->
  </head>
  <body>

    

    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>       
    <script src="javascripts/fallbacks.js"></script>
  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\filters\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Image filters</title>
    <link rel="stylesheet" href="stylesheets/style.css" />
  </head>
  <body>

    <img class="photo" src="images/purple.jpg"> 

  </body>
</html>



#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\flexbox\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" href="stylesheets/style.css" />
  </head>
  <body>
    <header>
      <h1>AwesomeCo</h1>
    </header>

    <div class="container">
	
      <section id="main">
        <h1>Some Story</h1>
		
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
          enim ad minim veniam, quis nostrud exercitation ullamco laboris 
          nisi ut aliquip ex ea commodo consequat. 
        </p>
        
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </section>
      <section id="sidebar">
        <ul>
          <li><a href="#">Related Link</a></li>
          <li><a href="#">Related Link</a></li>
          <li><a href="#">Related Link</a></li>
          <li><a href="#">Related Link</a></li>
        </ul>
      </section>
      
    </div>
    <footer>
      <p>Copyright © 2013 AwesomeCo</p>
    </footer>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\html5_sse\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Messages</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <script src='javascripts/modernizr.js'></script>
  </head>
  <body>
    <h2>AwesomeCo Messages</h2>
    <div id="message">connecting....</div>
    <script src='javascripts/streamer.js'></script>
  </body>
</html>




#########################
#########################
#########################


#### ------> C:\Users\pasch\Downloads\HTML5 and CSS3\where_next\web_workers\index.html
<!DOCTYPE html>
<!--
 ! Excerpted from "HTML5 and CSS3 Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/bhh52e for more book information.
-->
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Workers</title>
    <style>
      #output > div{float: left; margin-right: 5px;}
    </style>
  </head>
  <body>
    <input type="button" id="button" value="Get Results">
    <div id="output"></div>
    
    <script 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script src="javascripts/application.js"></script>
  </body>
</html>



#########################
#########################
#########################