<!DOCTYPE html>
<html lang="en" ng-app="library" ng-controller="PageHeadController">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/">
    <meta name="fragment" content="!">

    <meta name="description" content={{metaTag.content().description}} />
    <meta name="keywords" content={{metaTag.content().keywords}} />

    <link rel="icon" href="https://s1-library.zurb.com/{{metaTag.content().favicon}}" type="image/x-icon"/>

    <title ng-bind="pageTitle.title()">ZURB U | Library</title>

    <link rel="alternate" type="application/rss+xml" title="Pattern Tap" href="http://patterntap.com/patterntap/feed.rss" />
    <link rel="stylesheet" media="screen" href="https://s1-library.zurb.com/assets/application-adb0f2f057710e8ad25768bb81dbf578.css" />
    <script src="https://s1-library.zurb.com/assets/application-75244018d70b6e4d897684a73c9228ee.js"></script>
    <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="TNhHAWY5ZXgvhyV/sFlKgUUz+W+Ous/jZpwqxVD3yXzbvIweO85gpdUA330X0fIZBvOPJV8GPNbFRHkLrwg5sw==" />

      <script>
        $(document).ready(function(){
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-2195009-2', 'auto');
          ga('create', 'UA-2195009-58', 'auto', {'name': 'library'});
          ga('create', 'UA-2195009-33', 'auto', {'name': 'university'});

          ga('send', 'pageview');
          ga('library.send', 'pageview')
          ga('university.send', 'pageview')

          // ga('create', 'UA-2195009-45', 'auto', {'name': 'friday15'});
          // ga('create', 'UA-2195009-31', 'auto', {'name': 'word'});
          // ga('create', 'UA-2195009-38', 'auto', {'name': 'patternTap'});
          // ga('create', 'UA-2195009-52', 'auto', {'name': 'buildingBlocks'});
          // ga('create', 'UA-2195009-41', 'auto', {'name': 'responsive'});
          // ga('create', 'UA-2195009-44', 'auto', {'name': 'quips'});

          //ga('send', 'pageview');  <-- run this on ui-router stateChangeSuccess
        });
      </script>

    <script type="text/javascript">var _kmq = _kmq || [];
var _kmk = _kmk || "d945f04ff5e68057c85f5323b46f185efb3826b3";
function _kms(u){
  setTimeout(function(){
    var d = document, f = d.getElementsByTagName('script')[0],
    s = d.createElement('script');
    s.type = 'text/javascript'; s.async = true; s.src = u;
    f.parentNode.insertBefore(s, f);
  }, 1);
}
_kms('//i.kissmetrics.com/i.js');
_kms('//doug1izaerwt3.cloudfront.net/' + _kmk + '.1.js');


</script>

  </head>

  <body>

    <!-- Info Banner For Announcements or Links -->
    <!-- <a href="http://zurb.com/wired" id="notice">
      <div class="info">
        <div id="clockdiv" class="countdown">
            <span class="timer-day days"></span>
            <span class="timer-colon">:</span>
          <span class="timer-hour hours"></span>
          <span class="timer-colon">:</span>
          <span class="timer-hour minutes"></span>
          <span class="timer-colon">:</span>
          <span class="timer-seconds seconds"></span>
        </div>
      </div>
    </a> -->


      <div zf-offcanvas position="left" id="off-canvas" class="dark">
    <a zf-close class="close-button">&times;</a>
    <ul>
      <li class="title">Library</li>
      <li class="patterntap"><a href="http://patterntap.com/" target="_self">Pattern Tap</a></li>
      <li class="buildingblocks" ui-sref-active="current"><a ui-sref="building-blocks" ui-sref-opts="{ reload: true }">Building Blocks</a></li>
      <li class="responsive"><a href="http://zurb.com/responsive" target="_self">Responsive</a></li>
      <li class="triggers"><a href="http://zurb.com/triggers" target="_self">Triggers</a></li>
      <li class="quips"><a href="http://zurb.com/quips" target="_self">Quips</a></li>
      <li class="word"><a href="http://zurb.com/word" target="_self">Word</a></li>
      <li class="friday15" ui-sref-active="current"><a ui-sref="friday15" ui-sref-opts="{ reload: true }">Friday 15</a></li>
      <!-- <li class="university"><a href="http://zurb.com/university/your-library" target="_self"><img src="https://s1-library.zurb.com/assets/yourlibrary-dark-469c5f4fa75096afb9eff2050b7f04fc.png" alt="Yourlibrary dark" />YOUR LIBRARY</a></li> -->
    </ul>
    <div id="mobile-hr"></div>
    <ul>
      <li class="title">University</li>
      <li><a href="http://zurb.com/university/" target="_self">Home</a></li>
      <li><a href="http://zurb.com/university/training" target="_self">Training</a></li>
      <li><a href="http://zurb.com/university/lessons" target="_self">Lessons</a></li>
      <li><a href="http://zurb.com/library" target="_self">Library</a></li>
      <li><a href="http://zurb.com/tavern" target="_self">Tavern</a></li>
    </ul>
    <div id="mobile-hr"></div>      
    <ul>
      <li class="title">More ZURB Goodness</li>
      <li><a href="http://patterntap.com/">Pattern Tap</a></li>
      <li><a href="http://foundation.zurb.com/">Foundation</a></li>
      <!-- <li><a href="http://zurb.com/jobs" target="_self">Job Board</a></li> -->
    </ul>
    <div id="mobile-hr"></div>  
    <ul id="mobile-stack">
      <li class="logo"><a ng-href="http://zurb.com" target="_self"><img src="https://s1-library.zurb.com/assets/zurb-logo-ee15335e8eb8f9e85de0c0e7ba738f06.png" alt="Zurb logo" /></a><li>
      <li class="title stack"><a href="http://zurb.com/about" target="_self">About</a></li>
      <li class="title stack"><a href="http://zurb.com/blog" target="_self">Blog</a></li>
      <li class="title stack"><a href="http://zurb.com/contact" target="_self">Contact</a></li>      
      <li><a href="http://zurb.com/studios" target="_self"><h1>Studios</h1><p>Helping startups win since '98.</p></a></li>
      <li><a href="http://foundation.zurb.com/"><h1>Foundation</h1><p>World's most advanced responsive framework.</p></a></li>
      <li><a href="http://zurb.com/notable" target="_self"><h1>Notable</h1><p>Tools to radpidly prototype and iterate.</p></a></li>
      <li><a href="http://zurb.com/university" target="_self"><h1>University</h1><p>Online training for smarter product design.</p></a></li>
    </ul>
  </div>
    <div class="grid-frame vertical">
      <div class="main-nav grid-content shrink" style="padding: 0;">
  <div class="hide-for-small-only">
    <div class="menu-group dark">
      <div class="menu-group-left">
        <ul class="menu-bar dark">
         <li class="notable-logo"><a ng-href="http://zurb.com/notable" target="_self"><h1>ZURB</h1><h2>Notable</h2></a></li>
       </ul>
     </div>
     <div class="menu-group-right">
      <ul class="menu-bar dark">
        <li class="has-dropdown">
          <a href="#">Tour</a>
          <ul class="dropdown-content right-aligned">
            <li><a href="http://zurb.com/notable/features/platform" target="_self">Platform</a></li>
            <li><a href="http://zurb.com/notable/features/notebooks" target="_self">Notebooks</a></li>
            <li><a href="http://zurb.com/notable/features/tests" target="_self">Tests</a></li>
            <li><a href="http://zurb.com/notable/features/prototypes" target="_self">Prototypes</a></li>
            <li><a href="http://zurb.com/notable/features/stories" target="_self">Stories</a></li>
            <li><a href="http://zurb.com/notable/features/code" target="_self">Code</a></li>
          </ul>
        </li>

        <!-- <li><a href="http://zurb.com/notable/examples" target="_self">Examples</a></li> -->
        <li><a href="http://zurb.com/helio" target="_self">Helio</a></li>
        <!-- <li class="has-dropdown">
          <a href="#">Support</a>
          <ul class="dropdown-content right-aligned">
            <li><a href="http://zurb.com/notable/support" target="_self">Support Channels</a></li>
            <li><a href="http://zurb.com/notable/support/guide" target="_self">Notable Guide</a></li>
            <li><a href="http://zurb.com/notable/pricing" target="_self">Pricing</a></li>
            <li><a href="http://zurb.com/notable/support/faq" target="_self">FAQs</a></li>
            <li><a href="http://zurb.com/notable/support/buzz" target="_self">Buzz</a></li>
          </ul>
        </li> -->
        <li class="active-library"><a ui-sref="library" ui-sref-opts="{ reload: true }">Library</a></li>
        <li><a href="https://notable.zurb.com">Sign In</a></li>
        <li>
          
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="show-for-small-only">
  <ul class="menu-bar dark">
    <li class="mobile notable-logo"><a zf-toggle="off-canvas"><img src="https://s1-library.zurb.com/assets/offcanvas-6f5876937c152322ef013feee843368b.png" alt="Offcanvas" /><h1>ZURB</h1><h2>Notable</h2></a></li>
  </ul>
</div>
</div>

      <div class="grid-block main-body">
        <div class="left-sidebar hide-for-small-only">
  <ul class="property-nav">
     <li class="library" ui-sref-active="current">
      <a ui-sref="library" ui-sref-opts="{ reload: true }"><img src="https://s1-library.zurb.com/assets/library-dark-ba4737bcbac0898df26756fe6cb5ff9c.png" alt="Library dark" />LIBRARY</a>
    </li>
    <li class="patterntap" ui-sref-active="current">
      <a ui-sref="patterntap" ui-sref-opts="{ reload: true }"><img src="https://s1-library.zurb.com/assets/patterntap-dark-ffe3bb5e1541711b8588a81ea6b02d94.png" alt="Patterntap dark" />PATTERN TAP</a>
    </li>
    <!-- <li class="responsive" ui-sref-active="current">
      <a ui-sref="responsive" ui-sref-opts="{ reload: true }">RESPONSIVE</a>
    </li> -->
    <li class="triggers" ui-sref-active="current">
      <a ui-sref="triggers" ui-sref-opts="{ reload: true }"><img src="https://s1-library.zurb.com/assets/trigger-dark-2586b4f75c40baef8a228d9e1a852215.png" alt="Trigger dark" />TRIGGERS</a>
    </li>
    <li class="quips" ui-sref-active="current">
      <a ui-sref="quips" ui-sref-opts="{ reload: true }"><img src="https://s1-library.zurb.com/assets/quips-dark-7bf713815d62f80270143f60251d93f3.png" alt="Quips dark" />QUIPS</a>
    </li>
    <!-- <li class="word" ui-sref-active="current">
      <a ui-sref="words" ui-sref-opts="{ reload: true }"><img src="https://s1-library.zurb.com/assets/word-dark-bb728bc4c86de76ebb83ceed09b2bf4b.png" alt="Word dark" />WORD</a>
    </li>
    <li class="friday15" ui-sref-active="current">
      <a ui-sref="friday15" ui-sref-opts="{ reload: true }"><img src="https://s1-library.zurb.com/assets/friday15-dark-03254a64e4740adcfe49964cea2fdf06.png" alt="Friday15 dark" />FRIDAY15</a>
    </li> -->
    <div ng-show="client_ip == '75.144.253.52'">
    </div>
  </ul>
</div>

        <div class="grid-block">
          <div class="main-view-container" ui-view style="width: 100%" autoscroll="true"></div>

        </div>
      </div>
    </div>
    <!-- SignUp/LogIn Modal -->
<zf-modal class="small" id="notable-signup-modal" overlay="false" overlay-close="true">
  <a zf-close class="close-button">&times;</a>
  
  <div ng-hide="signupSuccess" class="grid-block vertical">
    <div class="shrink grid-content modal-contain">
      <h4>Create Notable Account</h4>
      <form name="notableForm" ng-submit="createUser(newUser)" novalidate>

        <div class="signup-errors">
          <ul ng-repeat="error in signupErrors">
            <li>{{error}}</li>
          </ul>
        </div>

        <p>
          <label>Name</label>
          <input name="name" ng-model="newUser.name" type="text" required/>
        </p>
        <p>
          <label>Email Address</label>
          <input name="email" ng-model="newUser.email" type="email" required/>
        </p>
        <!-- <p ng-show="notableForm.email.$invalid && !notableForm.email.$pristine">Enter a valid email.</p> -->
        <p>
          <label>Password</label>
          <input name="password" ng-model="newUser.password" type="password" required/>
        </p>
        <p>
          <label>Confirm Password<span ng-show="notableForm.passwordConfirm.$error.match && notableForm.passwordConfirm.$dirty"> - passwords must match</span></label>
          <input name="passwordConfirm" ng-model="newUser.passwordConfirmation" type="password" required match="notableForm.password"/>
        </p>
        <!-- <p ng-show="notableForm.passwordConfirm.$error.match">Passwords must match.</p> -->

        <div class="grid-block">

          <div class="medium-4 grid-content">
            <button ng-disabled="notableForm.$invalid" class="button-style button" type="submit">Sign Up</button>
          </div>

          <div class="medium-8 grid-content">
            <a ng-href="http://notable.zurb.com/signin?source_url={{location.absUrl()}}" class="button-style gray button">Log In</a>
            <p>Already have an account?</p>
          </div>

        </div>

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

  <!-- Signup Success -->
  <div ng-show="signupSuccess" class="grid-block vertical">
    <div class="shrink grid-content modal-contain">
      <h3>Welcome to Notable!</h3>
      <p>Your Notable account has been successfully created. You can now do all the things!</p>

      <div class="grid-block">
        <div class="medium-6 grid-content">
          <a href="http://notable.zurb.com/dashboard" class="button-style button" type="submit">Go to Notable Dashboard</a>
        </div>

        <div class="medium-6 grid-content">
          <a zf-close class="button-style gray button">Continue to Library</a>
        </div>
      </div>
    </div>
  </div>
</zf-modal>
  </body>
</html>
