index.html

<!DOCTYPE HTML>
<!--
  Helios by HTML5 UP
  html5up.net | @n33co
  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
  <head>
    <title>Donate.js - A Project by SmarterGiving</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="noindex, nofollow">
    <meta name="google-site-verification" content="FX7Y5MVsgph5vpuFnymXRqi4FRTCMtMlCmtugbEn4wA" />
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.dropotron.min.js"></script>
    <script src="js/jquery.scrolly.min.js"></script>
    <script src="js/jquery.onvisible.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/app.js"></script>
    <noscript>
      <link rel="stylesheet" href="css/skel.css" />
      <link rel="stylesheet" href="css/style.css" />
      <link rel="stylesheet" href="css/style-desktop.css" />
      <link rel="stylesheet" href="css/style-noscript.css" />
    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
  </head>
  <body class="homepage">

    <!-- Header -->
    <div id="header">

      <!-- Inner -->
        <div class="inner">
          <header>
          <h1><i class="fa fa-code orange"></i></h1>
          <h1><a href="index.html" id="logo" style="font-weight: bold">Donate.js</a></h1>
            <hr />
            <p>A project by <a href="https://smartergiving.org"></a>SmarterGiving</p>
          </header>
          <footer style="margin-top:3em">
            <!--a class="button circled" href="https://twitter.com/smartergiving"><i class="twitter-button fa fa-twitter fa-2x"></i></a-->
            <a href="#banner" class="button circled scrolly"><i class="fa fa-angle-double-down fa-3x"></i></a>
          </footer>
          <!--Use Formspree? http://formspree.io/ -->
          <!--form action="//formspree.io/you@email.com">
            <input type="text" name="name">
            <input type="email" name="_replyto">
            <input type="submit" value="Send">
          </form-->
        </div>

      <!-- Nav -->
        <nav id="nav">
          <ul>
            <li>Coming Soon</li>
            <!--li><a href="index.html">Home</a></li>
            <li>
              <a href="">Dropdown</a>
              <ul>
                <li><a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Magna phasellus</a></li>
                <li><a href="#">Etiam dolore nisl</a></li>
                <li>
                  <a href="">And a submenu &hellip;</a>
                  <ul>
                    <li><a href="#">Lorem ipsum dolor</a></li>
                    <li><a href="#">Phasellus consequat</a></li>
                    <li><a href="#">Magna phasellus</a></li>
                    <li><a href="#">Etiam dolore nisl</a></li>
                  </ul>
                </li>
                <li><a href="#">Veroeros feugiat</a></li>
              </ul>
            </li>
            <li><a href="left-sidebar.html">Left Sidebar</a></li>
            <li><a href="right-sidebar.html">Right Sidebar</a></li>
            <li><a href="no-sidebar.html">No Sidebar</a></li-->
          </ul>
        </nav>
      <div class="image-stripe">
        <img src="images/stripe.png" alt="">
      </div>
    </div>

    <!-- Banner -->
    <div class="wrapper style1">
      <section id="banner" class="container special">
        <header>
          <p style="margin-bottom:50px">Our Mission:</p>
          <h2>A <strong>donate button</strong> next to every mention of a nonprofit</h2>
          <p>We envision a world where any <strong>citizen of the Internet</strong> can donate to <strong>any nonprofit</strong> mentioned anywhere on the web. She should be able to do so confidently and securely, in one click, as close to zero cost as possible, regardless of her payment method and where her charitable assets are held.</p>
        </header>

      </section>
    </div>

    <div class="wrapper">
      <article id="main" class="container special">
        <header>
          <p>What is the announcement below missing?</p>
        </header>
        <a href="http://blog.ycombinator.com/watsi-yc-w13-raises-a-1-dollars-dot-3m-philanthropic-seed-round-from-pg-tencent-yc-conway-khosla-draper-richards-kaplan" target="_blank" class="image featured watsi"><img src="images/watsi.png" alt="" /><div class="donate-message"><p class="rs-donate-message">Perfect place for a donate button don't you think?</p></div></a>
        <footer>
          <!-- Ohai hack! Was wondering when you'd show up -->
          <p class="img-footer">SmarterGiving allows donate buttons to exist where stories are told</p>
        </footer>
      </article>
    </div>

    <!-- Main -->
    <div class="wrapper">
      <article id="main" class="container special">
        <header>
          <h2 class="rs-gates-url"><span>Why doesn't</span> <span class="lighter" style="font-size:75%">donate.</span>GatesFoundation<span class="lighter" style="font-size:80%">.org</span> <span>exist?</span></h2>
          <p><strong>Answer:</strong> <a href="http://www.gatesfoundation.org/Who-We-Are/General-Information/Foundation-FAQ" target="_blank">IRS and nonprofit compliance laws</a> haven't kept up with the Internet age</p>
          <!--p style="margin-top:2em;margin-bottom:1em"><strong>Why doesn't that site exist?</strong></p-->
        </header>
        <p class="6u -3u" style="text-align:center;margin-bottom:3em">The Gates Foundation spends half a billion dollars vetting nonprofits each year. SmarterGiving unlocks that knowledge by allowing visitors to the Gates Foundation site to donate directly to any nonprofit mentioned.</p>
        <footer>
          <a href="#problems" class="button scrolly">Continue Reading</a>
        </footer>
      </article>
    </div>

    <!-- Carousel -->
    <section id="problems" class="carousel">
      <div class="reel">
        <p>Donating to nonprofits shouldn't be so hard</p>

        <article class="bad">
          <div class="image featured one">
            <h2>17 Clicks</h2>
          </div>
          <p>It takes 17(!) clicks to donate to a nonprofit listed in a press release</p>
        </article>

        <article class="bad">
          <div class="image featured two">
            <h2>182,000</h2>
          </div>
          <p>Our favorite nonprofit is mentioned 182,000 times according to Google...</p>
        </article>

        <article class="bad">
          <div class="image featured three">
            <h2>3</h2>
          </div>
          <p>...but there only 3 online places an individual can donate to that nonprofit</p>
        </article>

        <article class="bad">
          <div class="image featured four">
            <h2>217,367</h2>
          </div>
          <p>There are lots of donor advised fund accounts (DAFs)...</p>
        </article>

        <article class="bad">
          <div class="image featured five">
            <h2>4</h2>
          </div>
          <p>...but few providers offer seamless online grant recommendations</p>
        </article>

        <!--article>
          <a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
          <header>
            <h3><a href="#">Pulvinar sagittis congue</a></h3>
          </header>
          <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
          <a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
          <header>
            <h3><a href="#">Fermentum sagittis proin</a></h3>
          </header>
          <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
          <a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
          <header>
            <h3><a href="#">Sed quis rhoncus placerat</a></h3>
          </header>
          <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
          <a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
          <header>
            <h3><a href="#">Ultrices urna sit lobortis</a></h3>
          </header>
          <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article>

        <article>
          <a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
          <header>
            <h3><a href="#">Varius magnis sollicitudin</a></h3>
          </header>
          <p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
        </article-->

      </div>
    </section>

    <!-- Features -->
      <div class="wrapper">

        <section id="features" class="container special">
          <header>
            <h2>Built for Grantmakers and Developers alike</h2>
            <p>Facilitate donations to any nonprofit</p>
          </header>
          <div class="row">
            <article class="4u special">
              <div class="image featured irs"><img src="images/irs.png" alt="" /></div>
              <header>
                <h3><a href="#">A nonprofit compliance wrapper</a></h3>
              </header>
              <p>
                Compliance with Commercial Fundraising laws, AML/CFT regulations, IRS pub. 78 checks, maintaining tax-deductibility...we'll handle all of it.
              </p>
            </article>
            <article class="4u special">
              <div class="image featured bitcoin"><img src="images/bitcoin.png" alt="" /></div>
              <header>
                <h3><a href="#">Built on top of powerful APIs</a></h3>
              </header>
              <p>We're built on top of the secure, modern backbone of industry-leading payment provider <a href="https://stripe.com">Stripe</a>.
              </p>
            </article>
            <article class="4u special">
              <div class="image featured options"><img src="images/donatejs.jpg" alt="" /></div>
              <header>
                <h3><a href="#">Simple integration</a></h3>
              </header>
              <p>SmarterGiving is a service for your website that makes it surprisingly easy to add donate buttons for any registered nonprofits.</p>
            </article>
          </div>
        </section>
      </div>

    <div class="wrapper">
      <article id="main" class="container special">
        <header>
          <a href="https://smartergiving.org"><img src="images/logo.png" alt="SmarterGiving Logo" class="sgvg-logo"></a>
          <p>Open experiments in philanthropy</p>
        </header>
      </article>
    </div>

    <!-- Footer -->
      <div id="footer">
        <div class="container">
          <div id="feeds" class="row">

            <!-- Tweets -->
              <section class="4u">
                <header>
                  <h2 class="icon fa-twitter circled"><span class="label">Tweets</span></h2>
                </header>
                <ul class="divided">
                  <li>
                    <article class="tweet">
                      Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
                      <span class="timestamp">5 minutes ago</span>
                    </article>
                  </li>
                  <li>
                    <article class="tweet">
                      Hendrerit rutrum quisque.
                      <span class="timestamp">30 minutes ago</span>
                    </article>
                  </li>
                  <li>
                    <article class="tweet">
                      Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
                      <span class="timestamp">3 hours ago</span>
                    </article>
                  </li>
                  <li>
                    <article class="tweet">
                      Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
                      <span class="timestamp">5 hours ago</span>
                    </article>
                  </li>
                </ul>
              </section>

            <!-- Posts -->
              <section class="4u">
                <header>
                  <h2 class="icon fa-file circled"><span class="label">Posts</span></h2>
                </header>
                <ul class="divided">
                  <li>
                    <article class="post stub">
                      <header>
                        <h3><a href="#">Nisl fermentum integer</a></h3>
                      </header>
                      <span class="timestamp">3 hours ago</span>
                    </article>
                  </li>
                  <li>
                    <article class="post stub">
                      <header>
                        <h3><a href="#">Phasellus portitor lorem</a></h3>
                      </header>
                      <span class="timestamp">6 hours ago</span>
                    </article>
                  </li>
                  <li>
                    <article class="post stub">
                      <header>
                        <h3><a href="#">Magna tempus consequat</a></h3>
                      </header>
                      <span class="timestamp">Yesterday</span>
                    </article>
                  </li>
                  <li>
                    <article class="post stub">
                      <header>
                        <h3><a href="#">Feugiat lorem ipsum</a></h3>
                      </header>
                      <span class="timestamp">2 days ago</span>
                    </article>
                  </li>
                </ul>
              </section>

            <!-- Photos -->
              <section class="4u">
                <header>
                  <h2 class="icon fa-camera circled"><span class="label">Photos</span></h2>
                </header>
                <div class="row 25% no-collapse">
                  <div class="6u">
                    <a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
                  </div>
                  <div class="6u">
                    <a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
                  </div>
                </div>
                <div class="row 25% no-collapse">
                  <div class="6u">
                    <a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
                  </div>
                  <div class="6u">
                    <a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
                  </div>
                </div>
                <div class="row 25% no-collapse">
                  <div class="6u">
                    <a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
                  </div>
                  <div class="6u">
                    <a href="#" class="image fit"><img src="images/pic15.jpg" alt="" /></a>
                  </div>
                </div>
              </section>

          </div>
          <!--hr /-->
          <div class="row">
            <div class="12u">

              <!-- Contact -->
                <section class="contact">
                  <header>
                    <h3>Coming Soon</h3>
                  </header>
                  <p>We might not have much to say publicly for awhile, but when we do we'll say it on Twitter</p>
                  <ul class="icons">
                    <li><a href="https://angel.co/smartergiving" class="icon fa-angellist"><span class="label">AngelList</span></a></li>
                    <li><a href="https://twitter.com/smartergiving" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                  </ul>
                </section>

              <!-- Copyright -->
                <div class="copyright">
                  <ul class="menu">
                    <li>&copy; SmarterGiving. All rights reserved.</li><!--li>Design: <a href="http://html5up.net">HTML5 UP</a></li-->
                  </ul>
                </div>
                <div class="copyright">
                  <ul class="menu">
                    <li>Like our site design? It's an open source HTML5 template graciously provided by <a href="https://twitter.com/n33co">@n33co</a>. Find it at <a href="http://html5up.net">HTML5 UP.</a></li-->
                  </ul>
                </div>

            </div>

          </div>
        </div>
      </div>

  </body>
</html>