Volunteer Age Requirements
- Age 4+ (w/adult): Fall Food Share Food Drive
- Age 7+ (w/adult): Gleaning
- Age 12+ (w/adult): Repack, Clerical, Produce to People, Some Food Drives
- Age 15+: Empty Bowls
- Age 18+: Blues Festival
Get Involved Landing
Get Involved
Help eradicate hunger in southwestern PA lorem ipsum dolor sit amet.
Donate your time. Make a difference.
Learn about the many ways you can help end hunger lorem ipsum dolor sit amet, consectetur adipisicing elit.
View volunteer opportunitiesMore Ways to Get Involved
Help feed the the greater Pittsburgh community
This pattern contains:
templates-get-involved-landing
HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search"><span class="icon-search"></span></a>
<a href="#nav" class="nav-toggle nav-toggle-menu"><span class="icon-menu2"></span><span class="nav-toggle-label">Menu</span></a>
<div class="header-nav-container">
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form> <nav id="nav" class="nav" role="navigation">
<ul class="nav-action-list">
<li><a href="#">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="#">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul class="nav-list">
<li>
<a href="#" class="nav-subnav-link">Programs<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">All Programs</a></li>
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food Program</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">About<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
<li><a href="#">Awards and Press</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">Resources<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="nav-donate">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="page-header">
<h1 class="page-title">Get Involved</h1>
<p class="page-intro">Help eradicate hunger in southwestern PA lorem ipsum dolor sit amet.</p>
</div> <div class="lc">
<div class="hero-main ">
<div class="hero-img">
<a href="#">
<img src="../../images/fpo_hero.png" alt="Hero Image" /> </a>
</div>
<div class="hero-body">
<h2 class="hero-title"><a href="#">Donate your time. Make a difference.</a></h2>
<p class="hero-description">Learn about the many ways you can help end hunger lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<a href="#" class="btn ">View volunteer opportunities</a> </div>
</div><!--end .hero-main-->
<hr />
<h2>More Ways to Get Involved</h2>
<div class="g g-3up">
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Organize a Food Drive</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Make a Donation</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Donate Food</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Get Informed</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Stay up to date</h2>
<p class="b-excerpt">Join our newsletter Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
</div><!--end .g-3up-->
</div>
</div><!--End role=main-->
<div class="donate">
<div class="lc">
<h2 class="section-title">Help feed the the greater Pittsburgh community</h2>
<form method="post" action="#" class="donate-form">
<fieldset class="donate-step donate-range-container" id="donate-step-1">
<legend><span class="donate-slider-amount blank"></span> <span class="donate-slider-message">Slide to choose amount to donate:</span></legend>
<div class="field-container">
<label for="donate-range" class="field-instruction is-vishidden">Slide to choose amount to donate:</label>
<input type="number" data-type="range" class="donate-range ui-slider-input" id="donate-range" value="5" min="1" max="100" />
</div>
<div class="field-container checkbox-container">
<input type="checkbox" id="donate-monthly" />
<label for="donate-monthly">Yes, I would like to donate this amount monthly</label>
</div>
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-2">
<legend class="donate-step-legend"><span class="form-step">2</span> Enter your information:</legend>
<div class="g g-2up">
<div class="field-container gi">
<label for="donate-name">Name</label>
<input type="text" id="donate-name" placeholder="First Last" autocomplete="off" required data-parsley-error-message="Please enter your full name" />
</div>
<div class="field-container gi">
<label for="donate-email">E-mail</label>
<input type="email" id="donate-email" placeholder="your@email.com" required data-parsley-error-message="Please enter a valid e-mail address" />
</div>
<div class="field-container gi">
<label for="donate-address">Address</label>
<input type="text" id="donate-address" placeholder="123 Main St, Apt 2" autocomplete="off" required data-parsley-error-message="Please enter your street address" />
</div>
<div class="field-container gi">
<label for="donate-city">City, State</label>
<input type="text" id="donate-city" placeholder="Pittsburgh, PA" autocomplete="off" required data-parsley-error-message="Please enter your city and state, separated by a comma" pattern="\,+" HTML5
data-parsley-pattern="\,+" />
</div>
</div><!--end .g-2up-->
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-3">
<legend class="donate-step-legend"><span class="form-step">3</span> Credit card info:</legend>
<div class="credit-card-group">
<input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
<input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration">
<input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv">
<input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip">
</div>
</fieldset><!--end .donate-step-->
<button class="donate-submit btn">Donate</button>
</form><!--end .donate-form-->
</div><!-- end .lc-->
</div><!-- end .donate-slider-->
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-btn-bar-container">
<div class="footer-btn-bar">
<a href="#">Get Help<span class="icon-arrow-right5"></span></a>
<a href="#">Give Help<span class="icon-arrow-right5"></span></a>
</div>
</div>
<div class="lc">
<nav role="navigation" class="nav-footer">
<div class="g g-4up">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Programs</a></h3>
<ul class="acc-panel">
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">About</a></h3>
<ul class="acc-panel">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Resources</a></h3>
<ul class="acc-panel">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Upcoming Events</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Corpus Christi Parish Fish Fry</a></h4>
<p class="b-timestamp">March 5 - April 18, 2014</p>
</div>
<a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">View all events</a>
<hr />
</div>
<h3 class="nav-footer-item acc-handle"><a href="#">Latest from the Blog</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Brad Paisley Concert Food Drive</a></h4>
<p class="b-timestamp">March 23, 2014</p>
</div>
<a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">View all news</a>
</div>
</div>
</div>
</nav>
<hr />
<div class="g g-2up footer-contact">
<div class="gi">
<div class="g g-2up footer-contact-area">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Email Us</a></h3>
<div class="acc-panel">
<a href="mailto:info@pittsburghfoodbank.org"><span class="icon-mail3"></span>info@pittsburghfoodbank.org</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Email a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Call Us</h3>
<div class="acc-panel">
<a href="tel:+14124603663"><span class="icon-phone"></span>412-460-3663</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Call a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Find Us</a></h3>
<div class="acc-panel">
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Greater Pittsburgh Community Food Bank</div>
</div>
<div class="street-address">1 North Linden Street</div>
<span class="locality">Duquesne</span>,
<abbr title="Pennsylvania" class="region">PA</abbr>
<span class="postal-code">15110</span>
</div>
</div>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-location"></span>Get Directions</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">If you need food</h3>
<div class="acc-panel">
<p>If you need food, please contact Hunger Services Network of the Urban League of Pittsburgh</p>
<a href="tel:+14123250749"><span class="icon-phone"></span>412-325-0749</a>
<a href="http://ulpgh.org/" rel="external"><span class="icon-link"></span>ulpgh.org</a>
</div>
</div><!--end .gi-->
</div><!--end inner .g-2up-->
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Stay Up to Date</h3>
<div class="acc-panel">
<p>Stay informed about our organization, upcoming events, stories of lives we have touched and news that impacts what we do.</p>
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-field" class="is-vishidden">Email address</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Up</button>
</div>
</fieldset>
</form> <ul class="social-list">
<li><a href="http://www.facebook.com/pages/Greater-Pittsburgh-Community-Food-Bank/145889928474" rel="external" target="_blank"><span class="icon-facebook"></span>Like us on Facebook</a></li>
<li><a href="http://www.twitter.com/pghfoodbank" rel="external" target="_blank"><span class="icon-twitter"></span>Follow us on Twitter</a></li>
<li><a href="http://www.youtube.com/pittsburghfoodbank" rel="external" target="_blank"><span class="icon-youtube"></span>Watch our videos on Youtube</a></li>
</ul> </div>
</div><!--end .gi-->
</div><!--end .g-2up-->
<div class="footer-meta">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <p class="copyright">© 2014 All Rights Reserved. <a href="../../patterns/04-pages-10-other-02-privacy-policy/04-pages-10-other-02-privacy-policy.html">View our Privacy Policy</a></p>
</div>
</div>
</footer>
<!-- End Footer --></div>
Get Involved Volunteer
Volunteer
Volunteer your time at GPCFB events Lorem ipsum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, voluptatum, ratione labore laudantium assumenda molestiae ipsa dignissimos accusamus amet omnis distinctio sit inventore minima. Magni, hic nam maiores iste sit
Upcoming Events
-
Event Title
April 24
-
Another Event Title
May 21
-
Here's Another Event Title
June 23
Help feed the the greater Pittsburgh community
This pattern contains:
templates-get-involved-volunteer
HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search"><span class="icon-search"></span></a>
<a href="#nav" class="nav-toggle nav-toggle-menu"><span class="icon-menu2"></span><span class="nav-toggle-label">Menu</span></a>
<div class="header-nav-container">
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form> <nav id="nav" class="nav" role="navigation">
<ul class="nav-action-list">
<li><a href="#">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="#">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul class="nav-list">
<li>
<a href="#" class="nav-subnav-link">Programs<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">All Programs</a></li>
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food Program</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">About<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
<li><a href="#">Awards and Press</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">Resources<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="nav-donate">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="page-header">
<h1 class="page-title">Volunteer</h1>
<p class="page-intro">Volunteer your time at GPCFB events Lorem ipsum.</p>
</div> <div class="l-3col">
<div class="l-main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, voluptatum, ratione labore laudantium assumenda molestiae ipsa dignissimos accusamus amet omnis distinctio sit inventore minima. Magni, hic nam maiores iste sit</p>
<div class="g g-2up">
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Repack</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Produce To People</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Special Events</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Gleaning</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
</div>
<hr />
<div class="text">
<h2>Volunteer Age Requirements</h2>
<ul>
<li><strong>Age 4+ (w/adult):</strong> Fall Food Share Food Drive</li>
<li><strong>Age 7+ (w/adult):</strong> Gleaning</li>
<li><strong>Age 12+ (w/adult):</strong> Repack, Clerical, Produce to People, Some Food Drives </li>
<li><strong>Age 15+:</strong> Empty Bowls</li>
<li><strong>Age 18+:</strong> Blues Festival</li>
</ul>
</div>
<div class="well">
<h2 class="well-title">Volunteer </h2>
<p class="well-desc">Description of the volunteer call to action</p>
<a href="#" class="text-btn">Volunteer now</a>
</div>
</div><!--end .l-main-->
<div class="l-sidebar">
<nav class="vertical-nav section-nav">
<h3 class="section-nav-title"><a href="#">Get Involved</a></h3>
<ul class="section-nav-list">
<li>
<a href="#" class=" ">Volunteer</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Advocacy</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Kids</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Food Drives</a>
<ul class="section-subnav">
</ul>
</li>
</ul>
</nav>
</div><!--end .l-sidebar-->
<div class="l-sidebar2">
<section class="section sidebar-section event-section">
<h3 class="sidebar-section-title">Upcoming Events</h3>
<ul class="sidebar-block-list post-list">
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Event Title</a></h4>
<p class="b-excerpt byline">April 24</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Another Event Title</a></h4>
<p class="b-excerpt byline">May 21</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Here's Another Event Title</a></h4>
<p class="b-excerpt byline">June 23</p>
</li>
</ul>
<a href="#" class="text-btn">View all events</a> </section>
</div><!--end .l-sidebar2-->
</div><!--end .l-3col-->
</div><!--End role=main-->
<div class="donate">
<div class="lc">
<h2 class="section-title">Help feed the the greater Pittsburgh community</h2>
<form method="post" action="#" class="donate-form">
<fieldset class="donate-step donate-range-container" id="donate-step-1">
<legend><span class="donate-slider-amount blank"></span> <span class="donate-slider-message">Slide to choose amount to donate:</span></legend>
<div class="field-container">
<label for="donate-range" class="field-instruction is-vishidden">Slide to choose amount to donate:</label>
<input type="number" data-type="range" class="donate-range ui-slider-input" id="donate-range" value="5" min="1" max="100" />
</div>
<div class="field-container checkbox-container">
<input type="checkbox" id="donate-monthly" />
<label for="donate-monthly">Yes, I would like to donate this amount monthly</label>
</div>
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-2">
<legend class="donate-step-legend"><span class="form-step">2</span> Enter your information:</legend>
<div class="g g-2up">
<div class="field-container gi">
<label for="donate-name">Name</label>
<input type="text" id="donate-name" placeholder="First Last" autocomplete="off" required data-parsley-error-message="Please enter your full name" />
</div>
<div class="field-container gi">
<label for="donate-email">E-mail</label>
<input type="email" id="donate-email" placeholder="your@email.com" required data-parsley-error-message="Please enter a valid e-mail address" />
</div>
<div class="field-container gi">
<label for="donate-address">Address</label>
<input type="text" id="donate-address" placeholder="123 Main St, Apt 2" autocomplete="off" required data-parsley-error-message="Please enter your street address" />
</div>
<div class="field-container gi">
<label for="donate-city">City, State</label>
<input type="text" id="donate-city" placeholder="Pittsburgh, PA" autocomplete="off" required data-parsley-error-message="Please enter your city and state, separated by a comma" pattern="\,+" HTML5
data-parsley-pattern="\,+" />
</div>
</div><!--end .g-2up-->
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-3">
<legend class="donate-step-legend"><span class="form-step">3</span> Credit card info:</legend>
<div class="credit-card-group">
<input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
<input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration">
<input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv">
<input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip">
</div>
</fieldset><!--end .donate-step-->
<button class="donate-submit btn">Donate</button>
</form><!--end .donate-form-->
</div><!-- end .lc-->
</div><!-- end .donate-slider-->
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-btn-bar-container">
<div class="footer-btn-bar">
<a href="#">Get Help<span class="icon-arrow-right5"></span></a>
<a href="#">Give Help<span class="icon-arrow-right5"></span></a>
</div>
</div>
<div class="lc">
<nav role="navigation" class="nav-footer">
<div class="g g-4up">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Programs</a></h3>
<ul class="acc-panel">
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">About</a></h3>
<ul class="acc-panel">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Resources</a></h3>
<ul class="acc-panel">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Upcoming Events</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Corpus Christi Parish Fish Fry</a></h4>
<p class="b-timestamp">March 5 - April 18, 2014</p>
</div>
<a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">View all events</a>
<hr />
</div>
<h3 class="nav-footer-item acc-handle"><a href="#">Latest from the Blog</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Brad Paisley Concert Food Drive</a></h4>
<p class="b-timestamp">March 23, 2014</p>
</div>
<a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">View all news</a>
</div>
</div>
</div>
</nav>
<hr />
<div class="g g-2up footer-contact">
<div class="gi">
<div class="g g-2up footer-contact-area">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Email Us</a></h3>
<div class="acc-panel">
<a href="mailto:info@pittsburghfoodbank.org"><span class="icon-mail3"></span>info@pittsburghfoodbank.org</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Email a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Call Us</h3>
<div class="acc-panel">
<a href="tel:+14124603663"><span class="icon-phone"></span>412-460-3663</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Call a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Find Us</a></h3>
<div class="acc-panel">
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Greater Pittsburgh Community Food Bank</div>
</div>
<div class="street-address">1 North Linden Street</div>
<span class="locality">Duquesne</span>,
<abbr title="Pennsylvania" class="region">PA</abbr>
<span class="postal-code">15110</span>
</div>
</div>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-location"></span>Get Directions</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">If you need food</h3>
<div class="acc-panel">
<p>If you need food, please contact Hunger Services Network of the Urban League of Pittsburgh</p>
<a href="tel:+14123250749"><span class="icon-phone"></span>412-325-0749</a>
<a href="http://ulpgh.org/" rel="external"><span class="icon-link"></span>ulpgh.org</a>
</div>
</div><!--end .gi-->
</div><!--end inner .g-2up-->
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Stay Up to Date</h3>
<div class="acc-panel">
<p>Stay informed about our organization, upcoming events, stories of lives we have touched and news that impacts what we do.</p>
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-field" class="is-vishidden">Email address</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Up</button>
</div>
</fieldset>
</form> <ul class="social-list">
<li><a href="http://www.facebook.com/pages/Greater-Pittsburgh-Community-Food-Bank/145889928474" rel="external" target="_blank"><span class="icon-facebook"></span>Like us on Facebook</a></li>
<li><a href="http://www.twitter.com/pghfoodbank" rel="external" target="_blank"><span class="icon-twitter"></span>Follow us on Twitter</a></li>
<li><a href="http://www.youtube.com/pittsburghfoodbank" rel="external" target="_blank"><span class="icon-youtube"></span>Watch our videos on Youtube</a></li>
</ul> </div>
</div><!--end .gi-->
</div><!--end .g-2up-->
<div class="footer-meta">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <p class="copyright">© 2014 All Rights Reserved. <a href="../../patterns/04-pages-10-other-02-privacy-policy/04-pages-10-other-02-privacy-policy.html">View our Privacy Policy</a></p>
</div>
</div>
</footer>
<!-- End Footer --></div>
Get Involved Repack
Repack
Repack at the GPCFB Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, voluptatum, ratione labore laudantium assumenda molestiae ipsa dignissimos accusamus amet omnis distinctio sit inventore minima. Magni, hic nam maiores iste sit
Volunteer Age Requirements
- Age 4+ (w/adult): Fall Food Share Food Drive
- Age 7+ (w/adult): Gleaning
- Age 12+ (w/adult): Repack, Clerical, Produce to People, Some Food Drives
- Age 15+: Empty Bowls
- Age 18+: Blues Festival
Upcoming Events
-
Event Title
April 24
-
Another Event Title
May 21
-
Here's Another Event Title
June 23
Help feed the the greater Pittsburgh community
This pattern contains:
templates-get-involved-volunteer
HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search"><span class="icon-search"></span></a>
<a href="#nav" class="nav-toggle nav-toggle-menu"><span class="icon-menu2"></span><span class="nav-toggle-label">Menu</span></a>
<div class="header-nav-container">
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form> <nav id="nav" class="nav" role="navigation">
<ul class="nav-action-list">
<li><a href="#">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="#">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul class="nav-list">
<li>
<a href="#" class="nav-subnav-link">Programs<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">All Programs</a></li>
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food Program</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">About<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
<li><a href="#">Awards and Press</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">Resources<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="nav-donate">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="page-header">
<h1 class="page-title">Repack</h1>
<p class="page-intro">Repack at the GPCFB Lorem ipsum dolor.</p>
</div> <div class="l-3col">
<div class="l-main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, voluptatum, ratione labore laudantium assumenda molestiae ipsa dignissimos accusamus amet omnis distinctio sit inventore minima. Magni, hic nam maiores iste sit</p>
<div class="g g-2up">
</div>
<hr />
<div class="text">
<h2>Volunteer Age Requirements</h2>
<ul>
<li><strong>Age 4+ (w/adult):</strong> Fall Food Share Food Drive</li>
<li><strong>Age 7+ (w/adult):</strong> Gleaning</li>
<li><strong>Age 12+ (w/adult):</strong> Repack, Clerical, Produce to People, Some Food Drives </li>
<li><strong>Age 15+:</strong> Empty Bowls</li>
<li><strong>Age 18+:</strong> Blues Festival</li>
</ul>
</div>
<div class="well">
<h2 class="well-title">Volunteer for Repack</h2>
<p class="well-desc">Description of the volunteer call to action</p>
<a href="#" class="text-btn">Volunteer now</a>
</div>
</div><!--end .l-main-->
<div class="l-sidebar">
<nav class="vertical-nav section-nav">
<h3 class="section-nav-title"><a href="#">Get Involved</a></h3>
<ul class="section-nav-list">
<li>
<a href="#" class=" ">Volunteer</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Advocacy</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Kids</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Food Drives</a>
<ul class="section-subnav">
</ul>
</li>
</ul>
</nav>
</div><!--end .l-sidebar-->
<div class="l-sidebar2">
<section class="section sidebar-section event-section">
<h3 class="sidebar-section-title">Upcoming Events</h3>
<ul class="sidebar-block-list post-list">
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Event Title</a></h4>
<p class="b-excerpt byline">April 24</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Another Event Title</a></h4>
<p class="b-excerpt byline">May 21</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Here's Another Event Title</a></h4>
<p class="b-excerpt byline">June 23</p>
</li>
</ul>
<a href="#" class="text-btn">View all events</a> </section>
</div><!--end .l-sidebar2-->
</div><!--end .l-3col-->
</div><!--End role=main-->
<div class="donate">
<div class="lc">
<h2 class="section-title">Help feed the the greater Pittsburgh community</h2>
<form method="post" action="#" class="donate-form">
<fieldset class="donate-step donate-range-container" id="donate-step-1">
<legend><span class="donate-slider-amount blank"></span> <span class="donate-slider-message">Slide to choose amount to donate:</span></legend>
<div class="field-container">
<label for="donate-range" class="field-instruction is-vishidden">Slide to choose amount to donate:</label>
<input type="number" data-type="range" class="donate-range ui-slider-input" id="donate-range" value="5" min="1" max="100" />
</div>
<div class="field-container checkbox-container">
<input type="checkbox" id="donate-monthly" />
<label for="donate-monthly">Yes, I would like to donate this amount monthly</label>
</div>
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-2">
<legend class="donate-step-legend"><span class="form-step">2</span> Enter your information:</legend>
<div class="g g-2up">
<div class="field-container gi">
<label for="donate-name">Name</label>
<input type="text" id="donate-name" placeholder="First Last" autocomplete="off" required data-parsley-error-message="Please enter your full name" />
</div>
<div class="field-container gi">
<label for="donate-email">E-mail</label>
<input type="email" id="donate-email" placeholder="your@email.com" required data-parsley-error-message="Please enter a valid e-mail address" />
</div>
<div class="field-container gi">
<label for="donate-address">Address</label>
<input type="text" id="donate-address" placeholder="123 Main St, Apt 2" autocomplete="off" required data-parsley-error-message="Please enter your street address" />
</div>
<div class="field-container gi">
<label for="donate-city">City, State</label>
<input type="text" id="donate-city" placeholder="Pittsburgh, PA" autocomplete="off" required data-parsley-error-message="Please enter your city and state, separated by a comma" pattern="\,+" HTML5
data-parsley-pattern="\,+" />
</div>
</div><!--end .g-2up-->
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-3">
<legend class="donate-step-legend"><span class="form-step">3</span> Credit card info:</legend>
<div class="credit-card-group">
<input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
<input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration">
<input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv">
<input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip">
</div>
</fieldset><!--end .donate-step-->
<button class="donate-submit btn">Donate</button>
</form><!--end .donate-form-->
</div><!-- end .lc-->
</div><!-- end .donate-slider-->
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-btn-bar-container">
<div class="footer-btn-bar">
<a href="#">Get Help<span class="icon-arrow-right5"></span></a>
<a href="#">Give Help<span class="icon-arrow-right5"></span></a>
</div>
</div>
<div class="lc">
<nav role="navigation" class="nav-footer">
<div class="g g-4up">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Programs</a></h3>
<ul class="acc-panel">
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">About</a></h3>
<ul class="acc-panel">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Resources</a></h3>
<ul class="acc-panel">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Upcoming Events</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Corpus Christi Parish Fish Fry</a></h4>
<p class="b-timestamp">March 5 - April 18, 2014</p>
</div>
<a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">View all events</a>
<hr />
</div>
<h3 class="nav-footer-item acc-handle"><a href="#">Latest from the Blog</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Brad Paisley Concert Food Drive</a></h4>
<p class="b-timestamp">March 23, 2014</p>
</div>
<a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">View all news</a>
</div>
</div>
</div>
</nav>
<hr />
<div class="g g-2up footer-contact">
<div class="gi">
<div class="g g-2up footer-contact-area">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Email Us</a></h3>
<div class="acc-panel">
<a href="mailto:info@pittsburghfoodbank.org"><span class="icon-mail3"></span>info@pittsburghfoodbank.org</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Email a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Call Us</h3>
<div class="acc-panel">
<a href="tel:+14124603663"><span class="icon-phone"></span>412-460-3663</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Call a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Find Us</a></h3>
<div class="acc-panel">
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Greater Pittsburgh Community Food Bank</div>
</div>
<div class="street-address">1 North Linden Street</div>
<span class="locality">Duquesne</span>,
<abbr title="Pennsylvania" class="region">PA</abbr>
<span class="postal-code">15110</span>
</div>
</div>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-location"></span>Get Directions</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">If you need food</h3>
<div class="acc-panel">
<p>If you need food, please contact Hunger Services Network of the Urban League of Pittsburgh</p>
<a href="tel:+14123250749"><span class="icon-phone"></span>412-325-0749</a>
<a href="http://ulpgh.org/" rel="external"><span class="icon-link"></span>ulpgh.org</a>
</div>
</div><!--end .gi-->
</div><!--end inner .g-2up-->
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Stay Up to Date</h3>
<div class="acc-panel">
<p>Stay informed about our organization, upcoming events, stories of lives we have touched and news that impacts what we do.</p>
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-field" class="is-vishidden">Email address</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Up</button>
</div>
</fieldset>
</form> <ul class="social-list">
<li><a href="http://www.facebook.com/pages/Greater-Pittsburgh-Community-Food-Bank/145889928474" rel="external" target="_blank"><span class="icon-facebook"></span>Like us on Facebook</a></li>
<li><a href="http://www.twitter.com/pghfoodbank" rel="external" target="_blank"><span class="icon-twitter"></span>Follow us on Twitter</a></li>
<li><a href="http://www.youtube.com/pittsburghfoodbank" rel="external" target="_blank"><span class="icon-youtube"></span>Watch our videos on Youtube</a></li>
</ul> </div>
</div><!--end .gi-->
</div><!--end .g-2up-->
<div class="footer-meta">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <p class="copyright">© 2014 All Rights Reserved. <a href="../../patterns/04-pages-10-other-02-privacy-policy/04-pages-10-other-02-privacy-policy.html">View our Privacy Policy</a></p>
</div>
</div>
</footer>
<!-- End Footer --></div>
Get Involved Advocacy
Advocacy
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, dolores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, culpa, pariatur nostrum eveniet impedit blanditiis itaque ipsa modi molestias optio similique maiores voluptatibus veniam voluptate nemo officia tenetur! Et, dolores?
Policy Priorities
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, iste, sapiente modi consequatur inventore deserunt molestiae sit praesentium perferendis quo. Fugiat explicabo dolor quod optio ea! Ad numquam id voluptatibus.
- Cumque, a debitis velit aliquam iusto sapiente quo repellat iure enim nulla. Incidunt, esse, temporibus, deserunt earum fugiat modi quis dicta sunt nostrum assumenda tenetur nihil fuga expedita cumque praesentium.
- Itaque, architecto, dolores, facilis possimus rem aspernatur molestiae maxime repellendus nisi repudiandae distinctio similique officiis odit numquam voluptate provident dolorum necessitatibus praesentium pariatur molestias ea expedita at sint sapiente beatae.
Resources
Advocacy news
-
This Is the Post Title
January 12
-
This Is Also a Post Title
January 30
-
Yes It's Another Post Title
February 12
Help feed the the greater Pittsburgh community
This pattern contains:
templates-get-involved-advocacy
HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search"><span class="icon-search"></span></a>
<a href="#nav" class="nav-toggle nav-toggle-menu"><span class="icon-menu2"></span><span class="nav-toggle-label">Menu</span></a>
<div class="header-nav-container">
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form> <nav id="nav" class="nav" role="navigation">
<ul class="nav-action-list">
<li><a href="#">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="#">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul class="nav-list">
<li>
<a href="#" class="nav-subnav-link">Programs<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">All Programs</a></li>
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food Program</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">About<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
<li><a href="#">Awards and Press</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">Resources<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="nav-donate">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="page-header">
<h1 class="page-title">Advocacy</h1>
<p class="page-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, dolores.</p>
</div> <div class="l-3col">
<div class="l-main">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, culpa, pariatur nostrum eveniet impedit blanditiis itaque ipsa modi molestias optio similique maiores voluptatibus veniam voluptate nemo officia tenetur! Et, dolores?</p>
<h2>Policy Priorities</h2>
<ul>
<li><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit. Rem, iste, sapiente modi consequatur inventore deserunt molestiae sit praesentium perferendis quo. Fugiat explicabo dolor quod optio ea! Ad numquam id voluptatibus.</li>
<li><strong>Cumque, a debitis velit aliquam</strong> iusto sapiente quo repellat iure enim nulla. Incidunt, esse, temporibus, deserunt earum fugiat modi quis dicta sunt nostrum assumenda tenetur nihil fuga expedita cumque praesentium.</li>
<li><strong>Itaque, architecto, dolores</strong>, facilis possimus rem aspernatur molestiae maxime repellendus nisi repudiandae distinctio similique officiis odit numquam voluptate provident dolorum necessitatibus praesentium pariatur molestias ea expedita at sint sapiente beatae.</li>
</ul>
</div>
<hr />
<h2>Resources</h2>
<div class="well">
<h2 class="well-title">Become an Advocate</h2>
<p class="well-desc">Description of the advocacy call to action</p>
<a href="#" class="text-btn">Advocacy CTA</a>
</div>
</div><!--end .l-main-->
<div class="l-sidebar">
<nav class="vertical-nav section-nav">
<h3 class="section-nav-title"><a href="#">Get Involved</a></h3>
<ul class="section-nav-list">
<li>
<a href="#" class=" ">Volunteer</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Advocacy</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Kids</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Food Drives</a>
<ul class="section-subnav">
</ul>
</li>
</ul>
</nav>
</div><!--end .l-sidebar-->
<div class="l-sidebar2">
<section class="section sidebar-section related-posts">
<h3 class="sidebar-section-title">Advocacy news</h3>
<ul class="sidebar-block-list post-list">
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">This Is the Post Title</a></h4>
<p class="b-excerpt byline">January 12</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">This Is Also a Post Title</a></h4>
<p class="b-excerpt byline">January 30</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Yes It's Another Post Title</a></h4>
<p class="b-excerpt byline">February 12</p>
</li>
</ul>
<a href="#" class="text-btn">Call to action</a> </section>
</div><!--end .l-sidebar2-->
</div><!--end .l-3col-->
</div><!--End role=main-->
<div class="donate">
<div class="lc">
<h2 class="section-title">Help feed the the greater Pittsburgh community</h2>
<form method="post" action="#" class="donate-form">
<fieldset class="donate-step donate-range-container" id="donate-step-1">
<legend><span class="donate-slider-amount blank"></span> <span class="donate-slider-message">Slide to choose amount to donate:</span></legend>
<div class="field-container">
<label for="donate-range" class="field-instruction is-vishidden">Slide to choose amount to donate:</label>
<input type="number" data-type="range" class="donate-range ui-slider-input" id="donate-range" value="5" min="1" max="100" />
</div>
<div class="field-container checkbox-container">
<input type="checkbox" id="donate-monthly" />
<label for="donate-monthly">Yes, I would like to donate this amount monthly</label>
</div>
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-2">
<legend class="donate-step-legend"><span class="form-step">2</span> Enter your information:</legend>
<div class="g g-2up">
<div class="field-container gi">
<label for="donate-name">Name</label>
<input type="text" id="donate-name" placeholder="First Last" autocomplete="off" required data-parsley-error-message="Please enter your full name" />
</div>
<div class="field-container gi">
<label for="donate-email">E-mail</label>
<input type="email" id="donate-email" placeholder="your@email.com" required data-parsley-error-message="Please enter a valid e-mail address" />
</div>
<div class="field-container gi">
<label for="donate-address">Address</label>
<input type="text" id="donate-address" placeholder="123 Main St, Apt 2" autocomplete="off" required data-parsley-error-message="Please enter your street address" />
</div>
<div class="field-container gi">
<label for="donate-city">City, State</label>
<input type="text" id="donate-city" placeholder="Pittsburgh, PA" autocomplete="off" required data-parsley-error-message="Please enter your city and state, separated by a comma" pattern="\,+" HTML5
data-parsley-pattern="\,+" />
</div>
</div><!--end .g-2up-->
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-3">
<legend class="donate-step-legend"><span class="form-step">3</span> Credit card info:</legend>
<div class="credit-card-group">
<input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
<input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration">
<input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv">
<input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip">
</div>
</fieldset><!--end .donate-step-->
<button class="donate-submit btn">Donate</button>
</form><!--end .donate-form-->
</div><!-- end .lc-->
</div><!-- end .donate-slider-->
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-btn-bar-container">
<div class="footer-btn-bar">
<a href="#">Get Help<span class="icon-arrow-right5"></span></a>
<a href="#">Give Help<span class="icon-arrow-right5"></span></a>
</div>
</div>
<div class="lc">
<nav role="navigation" class="nav-footer">
<div class="g g-4up">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Programs</a></h3>
<ul class="acc-panel">
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">About</a></h3>
<ul class="acc-panel">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Resources</a></h3>
<ul class="acc-panel">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Upcoming Events</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Corpus Christi Parish Fish Fry</a></h4>
<p class="b-timestamp">March 5 - April 18, 2014</p>
</div>
<a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">View all events</a>
<hr />
</div>
<h3 class="nav-footer-item acc-handle"><a href="#">Latest from the Blog</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Brad Paisley Concert Food Drive</a></h4>
<p class="b-timestamp">March 23, 2014</p>
</div>
<a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">View all news</a>
</div>
</div>
</div>
</nav>
<hr />
<div class="g g-2up footer-contact">
<div class="gi">
<div class="g g-2up footer-contact-area">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Email Us</a></h3>
<div class="acc-panel">
<a href="mailto:info@pittsburghfoodbank.org"><span class="icon-mail3"></span>info@pittsburghfoodbank.org</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Email a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Call Us</h3>
<div class="acc-panel">
<a href="tel:+14124603663"><span class="icon-phone"></span>412-460-3663</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Call a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Find Us</a></h3>
<div class="acc-panel">
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Greater Pittsburgh Community Food Bank</div>
</div>
<div class="street-address">1 North Linden Street</div>
<span class="locality">Duquesne</span>,
<abbr title="Pennsylvania" class="region">PA</abbr>
<span class="postal-code">15110</span>
</div>
</div>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-location"></span>Get Directions</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">If you need food</h3>
<div class="acc-panel">
<p>If you need food, please contact Hunger Services Network of the Urban League of Pittsburgh</p>
<a href="tel:+14123250749"><span class="icon-phone"></span>412-325-0749</a>
<a href="http://ulpgh.org/" rel="external"><span class="icon-link"></span>ulpgh.org</a>
</div>
</div><!--end .gi-->
</div><!--end inner .g-2up-->
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Stay Up to Date</h3>
<div class="acc-panel">
<p>Stay informed about our organization, upcoming events, stories of lives we have touched and news that impacts what we do.</p>
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-field" class="is-vishidden">Email address</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Up</button>
</div>
</fieldset>
</form> <ul class="social-list">
<li><a href="http://www.facebook.com/pages/Greater-Pittsburgh-Community-Food-Bank/145889928474" rel="external" target="_blank"><span class="icon-facebook"></span>Like us on Facebook</a></li>
<li><a href="http://www.twitter.com/pghfoodbank" rel="external" target="_blank"><span class="icon-twitter"></span>Follow us on Twitter</a></li>
<li><a href="http://www.youtube.com/pittsburghfoodbank" rel="external" target="_blank"><span class="icon-youtube"></span>Watch our videos on Youtube</a></li>
</ul> </div>
</div><!--end .gi-->
</div><!--end .g-2up-->
<div class="footer-meta">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <p class="copyright">© 2014 All Rights Reserved. <a href="../../patterns/04-pages-10-other-02-privacy-policy/04-pages-10-other-02-privacy-policy.html">View our Privacy Policy</a></p>
</div>
</div>
</footer>
<!-- End Footer --></div>
Get Involved Kids
Kids
Lots of kids right here in our area do not get enough to eat Lorem ipsum dolor sit.
Upcoming Events
-
Event Title
April 24
-
Another Event Title
May 21
-
Here's Another Event Title
June 23
Help feed the the greater Pittsburgh community
This pattern contains:
templates-get-involved-kids
HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search"><span class="icon-search"></span></a>
<a href="#nav" class="nav-toggle nav-toggle-menu"><span class="icon-menu2"></span><span class="nav-toggle-label">Menu</span></a>
<div class="header-nav-container">
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form> <nav id="nav" class="nav" role="navigation">
<ul class="nav-action-list">
<li><a href="#">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="#">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul class="nav-list">
<li>
<a href="#" class="nav-subnav-link">Programs<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">All Programs</a></li>
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food Program</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">About<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
<li><a href="#">Awards and Press</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">Resources<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="nav-donate">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="page-header">
<h1 class="page-title">Kids</h1>
<p class="page-intro"> Lots of kids right here in our area do not get enough to eat Lorem ipsum dolor sit.</p>
</div> <div class="l-3col">
<div class="l-main">
<div class="g g-2up">
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Kids Campaign to End Hunger</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Organize a Food Drive</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Volunteer</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Pennies for Peanut Butter</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Fundraisers</h2>
<p class="b-excerpt">Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
<div class="gi">
<div class="block block-thumb">
<a href="#" class="b-inner">
<div class="b-img">
<img src="../../images/fpo_thumb.png" alt="Thumb" /> </div>
<div class="b-text">
<h2 class="b-title">Teens Take Action</h2>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, voluptate.</p>
</div>
</a>
</div> </div>
</div>
<div class="well">
<h2 class="well-title">Get Involved</h2>
<p class="well-desc">Description of the kids' get involved call to action</p>
<a href="#" class="text-btn">Get Involved CTA</a>
</div>
</div><!--end .l-main-->
<div class="l-sidebar">
<nav class="vertical-nav section-nav">
<h3 class="section-nav-title"><a href="#">Get Involved</a></h3>
<ul class="section-nav-list">
<li>
<a href="#" class=" ">Volunteer</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Advocacy</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Kids</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Food Drives</a>
<ul class="section-subnav">
</ul>
</li>
</ul>
</nav>
</div><!--end .l-sidebar-->
<div class="l-sidebar2">
<section class="section sidebar-section event-section">
<h3 class="sidebar-section-title">Upcoming Events</h3>
<ul class="sidebar-block-list post-list">
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Event Title</a></h4>
<p class="b-excerpt byline">April 24</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Another Event Title</a></h4>
<p class="b-excerpt byline">May 21</p>
</li>
<li class="block-headline-byline">
<h4 class="b-title"><a href="#">Here's Another Event Title</a></h4>
<p class="b-excerpt byline">June 23</p>
</li>
</ul>
<a href="#" class="text-btn">View all events</a> </section>
</div><!--end .l-sidebar2-->
</div><!--end .l-3col-->
</div><!--End role=main-->
<div class="donate">
<div class="lc">
<h2 class="section-title">Help feed the the greater Pittsburgh community</h2>
<form method="post" action="#" class="donate-form">
<fieldset class="donate-step donate-range-container" id="donate-step-1">
<legend><span class="donate-slider-amount blank"></span> <span class="donate-slider-message">Slide to choose amount to donate:</span></legend>
<div class="field-container">
<label for="donate-range" class="field-instruction is-vishidden">Slide to choose amount to donate:</label>
<input type="number" data-type="range" class="donate-range ui-slider-input" id="donate-range" value="5" min="1" max="100" />
</div>
<div class="field-container checkbox-container">
<input type="checkbox" id="donate-monthly" />
<label for="donate-monthly">Yes, I would like to donate this amount monthly</label>
</div>
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-2">
<legend class="donate-step-legend"><span class="form-step">2</span> Enter your information:</legend>
<div class="g g-2up">
<div class="field-container gi">
<label for="donate-name">Name</label>
<input type="text" id="donate-name" placeholder="First Last" autocomplete="off" required data-parsley-error-message="Please enter your full name" />
</div>
<div class="field-container gi">
<label for="donate-email">E-mail</label>
<input type="email" id="donate-email" placeholder="your@email.com" required data-parsley-error-message="Please enter a valid e-mail address" />
</div>
<div class="field-container gi">
<label for="donate-address">Address</label>
<input type="text" id="donate-address" placeholder="123 Main St, Apt 2" autocomplete="off" required data-parsley-error-message="Please enter your street address" />
</div>
<div class="field-container gi">
<label for="donate-city">City, State</label>
<input type="text" id="donate-city" placeholder="Pittsburgh, PA" autocomplete="off" required data-parsley-error-message="Please enter your city and state, separated by a comma" pattern="\,+" HTML5
data-parsley-pattern="\,+" />
</div>
</div><!--end .g-2up-->
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-3">
<legend class="donate-step-legend"><span class="form-step">3</span> Credit card info:</legend>
<div class="credit-card-group">
<input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
<input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration">
<input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv">
<input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip">
</div>
</fieldset><!--end .donate-step-->
<button class="donate-submit btn">Donate</button>
</form><!--end .donate-form-->
</div><!-- end .lc-->
</div><!-- end .donate-slider-->
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-btn-bar-container">
<div class="footer-btn-bar">
<a href="#">Get Help<span class="icon-arrow-right5"></span></a>
<a href="#">Give Help<span class="icon-arrow-right5"></span></a>
</div>
</div>
<div class="lc">
<nav role="navigation" class="nav-footer">
<div class="g g-4up">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Programs</a></h3>
<ul class="acc-panel">
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">About</a></h3>
<ul class="acc-panel">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Resources</a></h3>
<ul class="acc-panel">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Upcoming Events</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Corpus Christi Parish Fish Fry</a></h4>
<p class="b-timestamp">March 5 - April 18, 2014</p>
</div>
<a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">View all events</a>
<hr />
</div>
<h3 class="nav-footer-item acc-handle"><a href="#">Latest from the Blog</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Brad Paisley Concert Food Drive</a></h4>
<p class="b-timestamp">March 23, 2014</p>
</div>
<a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">View all news</a>
</div>
</div>
</div>
</nav>
<hr />
<div class="g g-2up footer-contact">
<div class="gi">
<div class="g g-2up footer-contact-area">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Email Us</a></h3>
<div class="acc-panel">
<a href="mailto:info@pittsburghfoodbank.org"><span class="icon-mail3"></span>info@pittsburghfoodbank.org</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Email a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Call Us</h3>
<div class="acc-panel">
<a href="tel:+14124603663"><span class="icon-phone"></span>412-460-3663</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Call a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Find Us</a></h3>
<div class="acc-panel">
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Greater Pittsburgh Community Food Bank</div>
</div>
<div class="street-address">1 North Linden Street</div>
<span class="locality">Duquesne</span>,
<abbr title="Pennsylvania" class="region">PA</abbr>
<span class="postal-code">15110</span>
</div>
</div>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-location"></span>Get Directions</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">If you need food</h3>
<div class="acc-panel">
<p>If you need food, please contact Hunger Services Network of the Urban League of Pittsburgh</p>
<a href="tel:+14123250749"><span class="icon-phone"></span>412-325-0749</a>
<a href="http://ulpgh.org/" rel="external"><span class="icon-link"></span>ulpgh.org</a>
</div>
</div><!--end .gi-->
</div><!--end inner .g-2up-->
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Stay Up to Date</h3>
<div class="acc-panel">
<p>Stay informed about our organization, upcoming events, stories of lives we have touched and news that impacts what we do.</p>
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-field" class="is-vishidden">Email address</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Up</button>
</div>
</fieldset>
</form> <ul class="social-list">
<li><a href="http://www.facebook.com/pages/Greater-Pittsburgh-Community-Food-Bank/145889928474" rel="external" target="_blank"><span class="icon-facebook"></span>Like us on Facebook</a></li>
<li><a href="http://www.twitter.com/pghfoodbank" rel="external" target="_blank"><span class="icon-twitter"></span>Follow us on Twitter</a></li>
<li><a href="http://www.youtube.com/pittsburghfoodbank" rel="external" target="_blank"><span class="icon-youtube"></span>Watch our videos on Youtube</a></li>
</ul> </div>
</div><!--end .gi-->
</div><!--end .g-2up-->
<div class="footer-meta">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <p class="copyright">© 2014 All Rights Reserved. <a href="../../patterns/04-pages-10-other-02-privacy-policy/04-pages-10-other-02-privacy-policy.html">View our Privacy Policy</a></p>
</div>
</div>
</footer>
<!-- End Footer --></div>
Get Involved Kids Join
Join Kids Campaign to End Hunger
Make a difference in your community Lorem ipsum dolor.
Signup form
Benefits
Help feed the the greater Pittsburgh community
This pattern contains:
templates-get-involved-kids-join
HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <a href="#search-form" class="nav-toggle nav-toggle-search"><span class="icon-search"></span></a>
<a href="#nav" class="nav-toggle nav-toggle-menu"><span class="icon-menu2"></span><span class="nav-toggle-label">Menu</span></a>
<div class="header-nav-container">
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form> <nav id="nav" class="nav" role="navigation">
<ul class="nav-action-list">
<li><a href="#">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="#">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul class="nav-list">
<li>
<a href="#" class="nav-subnav-link">Programs<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">All Programs</a></li>
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food Program</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">About<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
<li><a href="#">Awards and Press</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-subnav-link">Resources<span class="icon-arrow-down5"></span></a>
<ul class="nav-subnav">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="nav-donate">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="page-header">
<h1 class="page-title">Join Kids Campaign to End Hunger</h1>
<p class="page-intro">Make a difference in your community Lorem ipsum dolor.</p>
</div> <div class="l-3col">
<div class="l-main">
<div class="fpo">Signup form</div>
</div><!--end .l-main-->
<div class="l-sidebar">
<nav class="vertical-nav section-nav">
<h3 class="section-nav-title"><a href="#">Get Involved</a></h3>
<ul class="section-nav-list">
<li>
<a href="#" class=" ">Volunteer</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Advocacy</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Kids</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Food Drives</a>
<ul class="section-subnav">
</ul>
</li>
</ul>
</nav>
</div><!--end .l-sidebar-->
<div class="l-sidebar2">
<div class="fpo">Benefits</div>
</div><!--end .l-sidebar2-->
</div><!--end .l-3col-->
</div><!--End role=main-->
<div class="donate">
<div class="lc">
<h2 class="section-title">Help feed the the greater Pittsburgh community</h2>
<form method="post" action="#" class="donate-form">
<fieldset class="donate-step donate-range-container" id="donate-step-1">
<legend><span class="donate-slider-amount blank"></span> <span class="donate-slider-message">Slide to choose amount to donate:</span></legend>
<div class="field-container">
<label for="donate-range" class="field-instruction is-vishidden">Slide to choose amount to donate:</label>
<input type="number" data-type="range" class="donate-range ui-slider-input" id="donate-range" value="5" min="1" max="100" />
</div>
<div class="field-container checkbox-container">
<input type="checkbox" id="donate-monthly" />
<label for="donate-monthly">Yes, I would like to donate this amount monthly</label>
</div>
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-2">
<legend class="donate-step-legend"><span class="form-step">2</span> Enter your information:</legend>
<div class="g g-2up">
<div class="field-container gi">
<label for="donate-name">Name</label>
<input type="text" id="donate-name" placeholder="First Last" autocomplete="off" required data-parsley-error-message="Please enter your full name" />
</div>
<div class="field-container gi">
<label for="donate-email">E-mail</label>
<input type="email" id="donate-email" placeholder="your@email.com" required data-parsley-error-message="Please enter a valid e-mail address" />
</div>
<div class="field-container gi">
<label for="donate-address">Address</label>
<input type="text" id="donate-address" placeholder="123 Main St, Apt 2" autocomplete="off" required data-parsley-error-message="Please enter your street address" />
</div>
<div class="field-container gi">
<label for="donate-city">City, State</label>
<input type="text" id="donate-city" placeholder="Pittsburgh, PA" autocomplete="off" required data-parsley-error-message="Please enter your city and state, separated by a comma" pattern="\,+" HTML5
data-parsley-pattern="\,+" />
</div>
</div><!--end .g-2up-->
</fieldset><!--end .donate-step-->
<fieldset class="donate-step" id="donate-step-3">
<legend class="donate-step-legend"><span class="form-step">3</span> Credit card info:</legend>
<div class="credit-card-group">
<input placeholder="1234 5678 9012 3456" pattern="[0-9]*" type="text" class="card-number" id="card-number">
<input placeholder="MM/YY" pattern="[0-9]*" type="text" class="card-expiration">
<input placeholder="CVV" pattern="[0-9]*" type="text" class="card-cvv">
<input placeholder="ZIP" pattern="[0-9]*" type="text" class="card-zip">
</div>
</fieldset><!--end .donate-step-->
<button class="donate-submit btn">Donate</button>
</form><!--end .donate-form-->
</div><!-- end .lc-->
</div><!-- end .donate-slider-->
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="footer-btn-bar-container">
<div class="footer-btn-bar">
<a href="#">Get Help<span class="icon-arrow-right5"></span></a>
<a href="#">Give Help<span class="icon-arrow-right5"></span></a>
</div>
</div>
<div class="lc">
<nav role="navigation" class="nav-footer">
<div class="g g-4up">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Programs</a></h3>
<ul class="acc-panel">
<li><a href="#">Produce to People</a></li>
<li><a href="#">Community Harvest</a></li>
<li><a href="#">SNAP</a></li>
<li><a href="#">Farm Stand Project</a></li>
<li><a href="#">Summer Food</a></li>
<li><a href="#">Commodity Supplemental Food</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Agency Relations</a></li>
<li><a href="#">Educational Programs</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">About</a></h3>
<ul class="acc-panel">
<li><a href="#">About Us</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Board and Management</a></li>
<li><a href="#">Jobs and Internships</a></li>
<li><a href="#">Agencies</a></li>
<li><a href="#">Donors</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Finances</a></li>
<li><a href="#">Fundraising Policy</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="#">Resources</a></h3>
<ul class="acc-panel">
<li><a href="#">Resource Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Hunger</a></li>
<li><a href="#">Hunger Profiles</a></li>
<li><a href="#">Food Sources</a></li>
<li><a href="#">Advocacy Information</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Upcoming Events</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Corpus Christi Parish Fish Fry</a></h4>
<p class="b-timestamp">March 5 - April 18, 2014</p>
</div>
<a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">View all events</a>
<hr />
</div>
<h3 class="nav-footer-item acc-handle"><a href="#">Latest from the Blog</a></h3>
<div class="acc-panel">
<div class="block block-post-small">
<h4 class="b-title"><a href="#">Brad Paisley Concert Food Drive</a></h4>
<p class="b-timestamp">March 23, 2014</p>
</div>
<a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">View all news</a>
</div>
</div>
</div>
</nav>
<hr />
<div class="g g-2up footer-contact">
<div class="gi">
<div class="g g-2up footer-contact-area">
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Email Us</a></h3>
<div class="acc-panel">
<a href="mailto:info@pittsburghfoodbank.org"><span class="icon-mail3"></span>info@pittsburghfoodbank.org</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Email a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Call Us</h3>
<div class="acc-panel">
<a href="tel:+14124603663"><span class="icon-phone"></span>412-460-3663</a>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-user"></span>Call a department</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle"><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Find Us</a></h3>
<div class="acc-panel">
<div class="vcard">
<div class="adr">
<div class="org fn">
<div class="organization-name">Greater Pittsburgh Community Food Bank</div>
</div>
<div class="street-address">1 North Linden Street</div>
<span class="locality">Duquesne</span>,
<abbr title="Pennsylvania" class="region">PA</abbr>
<span class="postal-code">15110</span>
</div>
</div>
<a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html"><span class="icon-location"></span>Get Directions</a>
</div>
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">If you need food</h3>
<div class="acc-panel">
<p>If you need food, please contact Hunger Services Network of the Urban League of Pittsburgh</p>
<a href="tel:+14123250749"><span class="icon-phone"></span>412-325-0749</a>
<a href="http://ulpgh.org/" rel="external"><span class="icon-link"></span>ulpgh.org</a>
</div>
</div><!--end .gi-->
</div><!--end inner .g-2up-->
</div><!--end .gi-->
<div class="gi">
<h3 class="nav-footer-item acc-handle">Stay Up to Date</h3>
<div class="acc-panel">
<p>Stay informed about our organization, upcoming events, stories of lives we have touched and news that impacts what we do.</p>
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-field" class="is-vishidden">Email address</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Up</button>
</div>
</fieldset>
</form> <ul class="social-list">
<li><a href="http://www.facebook.com/pages/Greater-Pittsburgh-Community-Food-Bank/145889928474" rel="external" target="_blank"><span class="icon-facebook"></span>Like us on Facebook</a></li>
<li><a href="http://www.twitter.com/pghfoodbank" rel="external" target="_blank"><span class="icon-twitter"></span>Follow us on Twitter</a></li>
<li><a href="http://www.youtube.com/pittsburghfoodbank" rel="external" target="_blank"><span class="icon-youtube"></span>Watch our videos on Youtube</a></li>
</ul> </div>
</div><!--end .gi-->
</div><!--end .g-2up-->
<div class="footer-meta">
<a href="/" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo-white.svg" class="logo" alt="Greater Pittsburgh Community Food Bank, a member of Feeding America" /></a> <p class="copyright">© 2014 All Rights Reserved. <a href="../../patterns/04-pages-10-other-02-privacy-policy/04-pages-10-other-02-privacy-policy.html">View our Privacy Policy</a></p>
</div>
</div>
</footer>
<!-- End Footer --></div>