HTML
<div class="page" id="page">
<!-- Begin .header -->
<header class="header" role="banner">
<div class="lc">
<a href="../../patterns/04-pages-00-home-00-homepage/04-pages-00-home-00-homepage.html" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo.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="../../patterns/04-pages-01-get-help-00-get-help/04-pages-01-get-help-00-get-help.html">Get Help<span class="icon-arrow-right5"></span></a></li>
<li><a href="../../patterns/04-pages-06-get-involved-00-get-involved-landing/04-pages-06-get-involved-00-get-involved-landing.html">Give Help<span class="icon-arrow-right5"></span></a></li>
</ul>
<ul id="menu-main-menu" class="menu">
<li class="menu-item menu-item-object-page menu-item-has-children">
<a href="#">Programs</a>
<ul class="sub-menu">
<li><a href="../../patterns/04-pages-02-programs-00-program-landing/04-pages-02-programs-00-program-landing.html">All Programs</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Produce to People</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Community Harvest</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">SNAP</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Farm Stand Project</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Summer Food</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Commodity Supplemental Food Program</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Nutrition</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Agency Relations</a></li>
<li><a href="../../patterns/04-pages-02-programs-01-program-detail/04-pages-02-programs-01-program-detail.html">Educational Programs</a></li>
</ul>
</li>
<li class="menu-item menu-item-object-page menu-item-has-children">
<a href="#">About</a>
<ul class="sub-menu">
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">About Us</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Operations</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Board and Management</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Jobs and Internships</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Agencies</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Donors</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Sponsors</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Finances</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Fundraising Policy</a></li>
<li><a href="../../patterns/04-pages-03-about-00-about-landing/04-pages-03-about-00-about-landing.html">Awards and Press</a></li>
</ul>
</li>
<li class="menu-item menu-item-object-page menu-item-has-children">
<a href="#">Resources</a>
<ul class="sub-menu">
<li><a href="../../patterns/04-pages-07-resources-00-resources-landing/04-pages-07-resources-00-resources-landing.html">Resource Center</a></li>
<li><a href="../../patterns/04-pages-07-resources-01-resources-faq/04-pages-07-resources-01-resources-faq.html">FAQ</a></li>
<li><a href="../../patterns/04-pages-07-resources-02-resources-detail/04-pages-07-resources-02-resources-detail.html">About Hunger</a></li>
<li><a href="../../patterns/04-pages-07-resources-02-resources-detail/04-pages-07-resources-02-resources-detail.html">Hunger Profiles</a></li>
<li><a href="../../patterns/04-pages-07-resources-02-resources-detail/04-pages-07-resources-02-resources-detail.html">Food Sources</a></li>
<li><a href="../../patterns/04-pages-07-resources-02-resources-detail/04-pages-07-resources-02-resources-detail.html">Advocacy Information</a></li>
<li><a href="../../patterns/04-pages-07-resources-02-resources-detail/04-pages-07-resources-02-resources-detail.html">Links</a></li>
</ul>
</li>
<li><a href="../../patterns/04-pages-08-blog-00-blog-landing/04-pages-08-blog-00-blog-landing.html">News</a></li>
<li><a href="../../patterns/04-pages-04-events-00-events-landing/04-pages-04-events-00-events-landing.html">Events</a></li>
<li><a href="../../patterns/04-pages-09-contact-00-contact/04-pages-09-contact-00-contact.html">Contact</a></li>
<li class="menu-item-174"><a href="../../patterns/04-pages-05-donate-00-donate/04-pages-05-donate-00-donate.html">Donate</a></li>
</ul>
</nav><!--end .nav-->
</div>
</div>
</header>
<!-- End .header --> <div role="main">
<div class="banner banner-pattern tiles"></div>
<div class="l-3col">
<div class="l-main">
<div class="page-header">
<h1 class="page-title">Blog</h1>
<p class="page-intro">Latest news, upcoming events, stories, and more Lorem ipsum dolor sit.</p>
</div> <ul class="post-list">
<li><div class="block block-post">
<div class="b-body">
<p class="b-timestamp"><a href="#">April 18, 2014</a></p>
<h3 class="b-title"><a href="#">This is the latest blog post title</a></h3>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, amet, velit eum deserunt voluptatibus praesentium ea labore rem rerum similique.</p>
</div>
</div></li>
<li><div class="block block-post">
<div class="b-body">
<p class="b-timestamp"><a href="#">April 18, 2014</a></p>
<h3 class="b-title"><a href="#">This is another blog post title</a></h3>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, amet, velit eum deserunt voluptatibus praesentium ea labore rem rerum similique.</p>
</div>
</div></li>
<li><div class="block block-post">
<div class="b-body">
<p class="b-timestamp"><a href="#">April 18, 2014</a></p>
<h3 class="b-title"><a href="#">This could be a campaign update</a></h3>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, amet, velit eum deserunt voluptatibus praesentium ea labore rem rerum similique.</p>
</div>
</div></li>
<li><div class="block block-post">
<div class="b-body">
<p class="b-timestamp"><a href="#">April 18, 2014</a></p>
<h3 class="b-title"><a href="#">Photos from a recent event</a></h3>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, amet, velit eum deserunt voluptatibus praesentium ea labore rem rerum similique.</p>
</div>
</div></li>
<li><div class="block block-post">
<div class="b-body">
<p class="b-timestamp"><a href="#">April 18, 2014</a></p>
<h3 class="b-title"><a href="#">Agency update: Lorem ipsum dolor sit amet, consectetur.</a></h3>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, amet, velit eum deserunt voluptatibus praesentium ea labore rem rerum similique.</p>
</div>
</div></li>
<li><div class="block block-post">
<div class="b-body">
<p class="b-timestamp"><a href="#">April 18, 2014</a></p>
<h3 class="b-title"><a href="#">Important SNAP information Lorem ipsum dolor sit amet</a></h3>
<p class="b-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, amet, velit eum deserunt voluptatibus praesentium ea labore rem rerum similique.</p>
</div>
</div></li>
<div class="pagination">
<a href="#" class="btn pagination-prev">Previous</a>
<a href="#" class="btn pagination-next">Next</a>
</div> <div class="well">
<h2 class="well-title">Keep up with the latest news</h2>
<p class="well-desc">Stay up-to-date on upcoming events, program news, etc lorem ipsum dolor sit amet, consectetur adipisicing.</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>
</ul>
</div><!--end .l-main-->
<div class="l-sidebar">
<nav class="vertical-nav section-nav">
<h3 class="section-nav-title"><a href="#">Categories</a></h3>
<ul class="section-nav-list">
<li>
<a href="#" class=" ">Advocacy Updates</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Events</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Stories</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">News</a>
<ul class="section-subnav">
</ul>
</li>
<li>
<a href="#" class=" ">Programs</a>
<ul class="section-subnav">
</ul>
</li>
</ul>
</nav>
</div><!--end .l-sidebar-->
<div class="l-sidebar2">
<section class="section sidebar-section">
<h3 class="sidebar-section-title">About GPCFB</h3>
<p class="sidebar-section-excerpt">The Greater Pittsburgh Community Food Bank is dedicated to ending hunger in Soutwstern PA and beyond.
<a href="#" class="text-btn">Learn more</a> </section>
<section class="section sidebar-section sidebar-section-events">
<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="../../patterns/04-pages-00-home-00-homepage/04-pages-00-home-00-homepage.html" rel="home" class="logo-link" tabindex="1"><img src="../../images/logo.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>
