Skip to content

Instantly share code, notes, and snippets.

@bertday

bertday/browser.html

Last active April 11, 2018 15:05
Show Gist options
  • Save bertday/f8b39b14e0cdc0cebfb6776ce305b244 to your computer and use it in GitHub Desktop.
Save bertday/f8b39b14e0cdc0cebfb6776ce305b244 to your computer and use it in GitHub Desktop.
Download ZIP
Phila Standards - HTML Boilerplate
Raw
browser.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
Site title
</title>
<link href="//unpkg.com/phila-standards@0.12.0/dist/css/phila-standards.min.css" rel="stylesheet" type="text/css">
<link href="//unpkg.com/phila-standards@0.12.0/dist/img/favicon.png" rel="shortcut icon" type="image/x-icon">
<meta content="summary" name="twitter:card">
<meta content="" property="og:title">
<meta content="" property="og:description">
<meta content="website" property="og:type">
<meta content="" property="og:url">
<meta content="Digital Standards | City of Philadelphia" property="og:site_name">
<meta content="https://beta.phila.gov/media/20160715133810/phila-gov.jpg" property="og:image">
</head>
<body lang="en">
<header class="global-nav pbm pbn-mu mbn-mu">
<h1 class="accessible">
City of Philadelphia
</h1>
<div class="alert alert-persistent" data-swiftype-index="false">
<div class="row">
<div class="small-24 columns">
<p class="hide-for-small-only">
We're piloting a new, user-friendly website design. To view the existing City website, visit <a aria-label="back to phila.gov" class="go-back external" href="http://www.phila.gov?opt-out">phila.gov</a>.
</p>
<p class="show-for-small-only">
Back to <a aria-label="back to phila.gov" class="go-back external" href="http://www.phila.gov?opt-out">phila.gov</a>.
</p>
</div>
</div>
</div>
<div class="row columns bg-ben-franklin-blue expanded utility-nav" data-swiftype-index="false">
<div class="row">
<div class="medium-24 columns float-right">
<ul class="medium-horizontal menu show-for-medium float-right">
<li>
<a href="https://beta.phila.gov/departments/mayor/">Mayor's Office</a>
</li>
<li>
<a href="https://beta.phila.gov/departments/">City government directory</a>
</li>
<li>
<div class="no-js" id="google_translate_element">
<span class="show-for-sr">Google Translate</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-24 columns">
<div class="row primary-menu" data-sticky-container="" data-swiftype-index="false">
<div class="columns sticky phn" data-margin-top="0" data-sticky="" data-sticky-on="medium">
<div class="row sticky-header-width">
<div class="small-16 medium-6 columns small-push-4 medium-push-0">
<a aria-label="City of Philadelphia" class="logo" href="https://beta.phila.gov" tabindex="1"><img alt="City of Philadelphia" data-fallback="http://standards.phila.gov/img/logo/city-of-philadelphia.png" src="http://standards.phila.gov/img/logo/city-of-philadelphia.svg"></a>
</div><a aria-hidden="false" class="accessible" href="#page">Skip to main content</a>
<div class="medium-17 columns show-for-medium desktop-nav">
<div class="top-bar-right">
<nav data-swiftype-index="false">
<ul class="horizontal menu pan">
<li class="services-menu-link" data-toggle="services-mega-menu">
<a class="no-link" data-link="/services/" href="">Services</a>
</li>
<li>
<a href="https://beta.phila.gov/programs-initiatives/">Programs &amp; initiatives</a>
</li>
<li>
<a href="https://beta.phila.gov/news/">News &amp; events</a>
</li>
<li>
<a href="https://beta.phila.gov/documents/">Publications &amp; forms</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="search-icon small-5 medium-1 columns phn-m">
<button aria-label="Search" class="site-search" data-toggle="search-dropdown" type="button"><i aria-hidden="true" class="fa fa-search fa-2x"></i> <span class="show-for-small-only">Search</span></button>
</div>
</div>
<div class="top-bar">
<div class="title-bar small-5 columns" data-hide-for="medium" data-responsive-toggle="mobile-nav" data-swiftype-index="false">
<button class="menu-icon" data-toggle="" type="button"><i aria-hidden="true" class="fa fa-bars fa-3x"></i> <span class="title-bar-title">Menu</span></button>
</div>
<div class="primary-menu medium-15 medium-push-2 small-24 columns equal valign-mu" id="mobile-nav">
<div class="top-bar-right valign-mu show-for-small-only">
<nav class="valign-mu" data-swiftype-index="false">
<ul class="vertical menu pan valign-mu" id="mobile-nav-drilldown">
<li>
<a href="https://beta.phila.gov"><i class="fa fa-home fa-lg"></i> Phila.gov home</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/services"><i class="fa fa-list show-for-small-only"></i> Service directory</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/programs-initiatives/"><i class="fa fa-info-circle"></i> Programs &amp; initiatives</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/news/"><i class="fa fa-microphone"></i> News &amp; events</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/documents/"><i class="fa fa-file-text"></i> Publications &amp; forms</a>
</li>
<li class="bg-sidewalk">
<a href="https://beta.phila.gov/mayor/"><i class="fa fa-university"></i> Mayor's Office</a>
</li>
<li class="bg-sidewalk">
<a href="https://beta.phila.gov/departments/"><i class="fa fa-sitemap"></i> City government directory</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div id="page">
<div id="content">
<header>
<div class="hero-content">
<div class="hero-wrap">
<div class="row expanded pbl">
<div class="medium-14 small-centered columns text-overlay">
<h1>
<span class="h3 break-after">City of Philadelphia</span> Digital Standards
</h1>
</div>
</div>
</div>
<div class="row">
<div class="small-24 columns">
<div class="mbm-mu" id="site-nav">
<nav data-swiftype-index="false">
<ul class="secondary-menu vertical medium-horizontal menu dropdown" data-responsive-menu="accordion medium-dropdown"></ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<nav class="row mtm">
<div class="columns">
<ol class="breadcrumbs">
<li>
<a href="https://beta.phila.gov"><i aria-hidden="true" class="fa fa-home"></i><span class="accessible">City of Philadelphia Home</span></a>
</li>
<li>
<a href=""></a>
</li>
<li></li>
</ol>
</div>
</nav>
<main></main>
</div>
</div><a href="#page" id="back-to-top"><i aria-hidden="true" class="fa fa-arrow-up"></i><br>
Top</a>
<footer class="site-footer" data-swiftype-index='false'>
<div class="row">
<div class="small-24 columns">
<div class="feedback phm phn-mu mvs mtm-mu mbxl-mu">
<div class="row" data-toggle="feedback">
<div class="small-24 columns">
<div class="call-to-action phs pvm center">
<a class="no-link" href="#"><i aria-hidden="true" class="fa fa-lightbulb-o fa-x2"></i> <span class="break-before-sm">We're still working on this page's design and content.</span> <span class="break-before-sm">How can we make it better?</span></a>
</div>
</div>
</div>
<div class="feedback-form" data-type="feedback-form" style="display:none;">
<div class="row">
<div class="medium-18 large-14 column small-centered mbm clearfix" data-type="form-wrapper">
<div id="form-container"></div>
</div>
</div>
</div>
<div class="row" data-type="feedback-indicator">
<div class="small-24 columns center">
<div class="arrow-wrapper">
<div class="arrow"></div>
</div>
</div>
</div>
<div class="row expanded" data-toggle="feedback" data-type="feedback-footer" style="display:none;">
<div class="small-24 columns">
<div class="call-to-action center">
<div class="pas">
<a class="no-link" href="#"><i aria-hidden="true" class="fa fa-close"></i> Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="philly311" id="full-footer-start">
<section>
<div class="row">
<div class="columns intro">
<h2 class="mbxs">
Philly311
</h2><span><a aria-label="Philly 311" class="external" href="http://www.phila.gov/311">311</a> provides direct access to City government information, services, and real-time service updates. Multiple languages are available. Call 311 or <a class="external" href="https://twitter.com/philly311">tweet @philly311</a> for a quick response.</span>
</div>
</div>
<div class="row pvn pvl-mu equal-height">
<div class="small-24 medium-8 columns pll prxl pvm ptn-mu pbl-mu sidewalk bdr-right-mu interact-311 clearfix equal">
<section>
<h3 class="h4 dark-gray">
Interact with 311 online
</h3><a class="button icon full-width clearfix" href="http://iframe.publicstuff.com/#?client_id=242">
<div class="valign">
<i class="fa fa-bullhorn valign-cell"></i>
<div class="button-label valign-cell">
Report a problem
</div>
</div></a> <a class="button icon full-width clearfix" href="http://www.phila.gov/311/findananswer/Pages/default.aspx">
<div class="valign">
<i class="fa fa-question valign-cell"></i>
<div class="button-label valign-cell">
Ask a question
</div>
</div></a> <a class="button icon full-width clearfix" href="https://cityofphiladelphia.github.io/service-request-tracker/">
<div class="valign">
<i class="fa fa-check-square-o valign-cell"></i>
<div class="button-label valign-cell">
Track a request
</div>
</div></a>
</section>
</div>
<div class="medium-16 columns trending-requests phl pvm pvn-mu equal">
<section>
<h3 class="h4 dark-gray">
Trending requests
</h3>
<ul class="columns-2-mu">
<li>
<a class="external" href="http://www.phila.gov/OPA/AbatementsExemptions/Pages/Homestead.aspx">Apply for a Homestead Exemption</a>
</li>
<li>
<a class="external" href="http://www.phila.gov/prisons/Facilities/Pages/default.aspx">Correctional facilities</a>
</li>
<li>
<a class="external" href="https://prodpci.etimspayments.com/pbw/include/philadelphia_parking/input.jsp">Pay a parking violation</a>
</li>
<li>
<a class="external" href="https://secure.phila.gov/WRB/WaterBill/Account/GetAccount.aspx">Pay a water bill</a>
</li>
<li>
<a class="external" href="https://ework.phila.gov/revenue/">Pay a Real Estate Tax bill</a>
</li>
<li>
<a href="http://property.phila.gov/">Search for property information</a>
</li>
<li>
<a class="external" href="http://www.philadelphiastreets.com/sanitation/residential/collection-schedules">Trash and recycling schedule</a>
</li>
<li>
<a href="https://beta.phila.gov/services/become-a-water-customer/property-owners/">Turn water service on or off</a>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<div class="fat">
<div class="row pvs ptl-mu phm equal-height">
<section class="medium-8 columns phm pvm pvn-mu equal">
<h2 class="mtn mbm">
Take action in your community
</h2>
<nav class="take-action">
<ul>
<li class="pvxs">
<a class="external" href="http://serve.phila.gov/">SERVE Philadelphia</a>
</li>
<li class="pvxs">
<a href="https://beta.phila.gov/departments/office-of-sustainability/greenworks/greenworks-on-the-ground/">Greenworks on the Ground initiative</a>
</li>
<li class="pvxs">
<a class="external" href="http://citizensplanninginstitute.org/">Citizens Planning Institute</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/311/aboutus/Pages/NeighborhoodLaison.aspx">Neighborhood Liaison program</a>
</li>
<li class="pvxs">
<a class="external" href="http://citizensplanninginstitute.org/citizens-toolkit">Citizen action toolkit</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.philadelphiastreets.com/pmbc/">Clean up your block</a>
</li>
<li class="pvxs">
<a class="external" href="https://phlevents.org/applications/">Apply for an event permit</a>
</li>
<li class="pvxs">
<a class="external" href="http://gsg.phila.gov/map">City, District, Council, &amp; Ward maps</a>
</li>
</ul>
</nav>
</section>
<section class="medium-8 columns phm pll-mu pvm pvn-mu equal">
<h2 class="mtn mbm">
Know your City government
</h2>
<nav class="take-action">
<ul>
<li class="pvxs">
<a class="" href="https://beta.phila.gov/departments/mayor/">Mayor’s Office</a>
</li>
<li class="pvxs">
<a class="external" href="http://phlcouncil.com/">City Council</a>
</li>
<li class="pvxs">
<a class="" href="https://beta.phila.gov/departments/">City government directory</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/openbudget/">City budget</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.amlegal.com/codes/client/philadelphia_pa/">Philadelphia Code &amp; Charter</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/records/index.html">City records</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/ethicsboard/Pages/default.aspx">Honesty in government</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.philadelphiavotes.com/">Voting &amp; elections</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/data/">Open data</a>
</li>
</ul>
</nav>
</section>
<section class="medium-8 columns phm pll-mu pvm pvn-mu equal">
<h2 class="mtn mbm">
Connect with City government
</h2>
<nav class="city-social">
<ul class="inline-list">
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.facebook.com/PhiladelphiaCityGovernment/"><i aria-hidden="true" class="fa fa-facebook fa-3x" title="Facebook"></i> <span class="show-for-sr">Facebook</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://twitter.com/PhiladelphiaGov"><i aria-hidden="true" class="fa fa-twitter fa-3x" title="Twitter"></i> <span class="show-for-sr">Twitter</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.instagram.com/cityofphiladelphia/"><i aria-hidden="true" class="fa fa-instagram fa-3x" title="Instagram"></i> <span class="show-for-sr">Instagram</span></a>
</li>
<li class="pvxs">
<a class="prl" href="http://www.phila.gov/channel64/Pages/default.aspx"><span class="fa fa-stack fa-lg"><i aria-hidden="true" class="fa fa-tv fa-stack-2x" title="TV"></i> <i class="fa fa-stack-1x"><span class="h4">64</span></i> <span class="show-for-sr">TV 64</span></span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.youtube.com/user/PhilaGov"><i aria-hidden="true" class="fa fa-youtube fa-3x" title="Youtube"></i> <span class="show-for-sr">Youtube</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.flickr.com/photos/phillycityrep"><i aria-hidden="true" class="fa fa-flickr fa-3x" title="Flickr"></i> <span class="show-for-sr">Flickr</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://github.com/CityOfPhiladelphia"><i aria-hidden="true" class="fa fa-github fa-3x" title="GitHub"></i> <span class="show-for-sr">GitHub</span></a>
</li>
</ul>
</nav>
</section>
</div>
</div>
<div class="bg-black">
<div class="row classic">
<nav class="columns center">
<ul class="inline-list">
<li>
<a href="https://beta.phila.gov/terms-of-use/">Terms of use</a>
</li>
<li>
<a href="http://www.phila.gov/privacy/pdfs/FinalCityOpenRecords.pdf">Right to know (pdf)</a>
</li>
<li>
<a href="https://beta.phila.gov/privacypolicy/">Privacy Policy</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
<div class="global-nav show-for-medium" data-swiftype-index="false" id="services-list">
<div class="dropdown-pane mega-menu-dropdown" data-close-on-click="true" data-dropdown="" data-hover="true" data-hover-pane="true" data-trap-focus="true" data-v-offset="0" id="services-mega-menu">
<div class="inner-wrapper">
<div class="row expanded mbxs" data-equalize-by-row="true" data-equalizer="" data-services-menu="" id="phila-menu-wrap"></div>
<div class="row expanded collapse bg-ghost-gray mega-menu-footer">
<div class="medium-8 float-right white bg-dark-ben-franklin left-arrow-indent">
<div class="valign">
<a class="phl valign-cell service-directory" href="http://beta.phila.gov/services/">Service directory</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-pane global-nav">
<div class="dropdown-pane site-search-dropdown" data-auto-focus="true" data-close-on-click="true" data-dropdown="" data-hover-pane="true" data-trap-focus="true" data-v-offset="0" id="search-dropdown">
<div class="row columns expanded bg-ghost-gray">
<div class="row arrow">
<div class="medium-16 columns small-centered">
<div class="paxl">
<form action="https://beta.phila.gov/search/" id="search-form" method="get" name="search-form" role="search">
<label class="show-for-sr" for="search-field">Search form</label>
<div class="search">
<input class="search-field" id="search-field" name="stq" placeholder="Search" title="Search" type="text" value=""> <input class="search-submit" type="submit" value="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script src="//unpkg.com/phila-standards@0.12.0/dist/js/phila-standards.min.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
</body>
</html>
Raw
node.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
Site title
</title>
<link href="//unpkg.com/phila-standards@0.12.0/dist/img/favicon.png" rel="shortcut icon" type="image/x-icon">
<meta content="summary" name="twitter:card">
<meta content="" property="og:title">
<meta content="" property="og:description">
<meta content="website" property="og:type">
<meta content="" property="og:url">
<meta content="Digital Standards | City of Philadelphia" property="og:site_name">
<meta content="https://beta.phila.gov/media/20160715133810/phila-gov.jpg" property="og:image">
</head>
<body lang="en">
<header class="global-nav pbm pbn-mu mbn-mu">
<h1 class="accessible">
City of Philadelphia
</h1>
<div class="alert alert-persistent" data-swiftype-index="false">
<div class="row">
<div class="small-24 columns">
<p class="hide-for-small-only">
We're piloting a new, user-friendly website design. To view the existing City website, visit <a aria-label="back to phila.gov" class="go-back external" href="http://www.phila.gov?opt-out">phila.gov</a>.
</p>
<p class="show-for-small-only">
Back to <a aria-label="back to phila.gov" class="go-back external" href="http://www.phila.gov?opt-out">phila.gov</a>.
</p>
</div>
</div>
</div>
<div class="row columns bg-ben-franklin-blue expanded utility-nav" data-swiftype-index="false">
<div class="row">
<div class="medium-24 columns float-right">
<ul class="medium-horizontal menu show-for-medium float-right">
<li>
<a href="https://beta.phila.gov/departments/mayor/">Mayor's Office</a>
</li>
<li>
<a href="https://beta.phila.gov/departments/">City government directory</a>
</li>
<li>
<div class="no-js" id="google_translate_element">
<span class="show-for-sr">Google Translate</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-24 columns">
<div class="row primary-menu" data-sticky-container="" data-swiftype-index="false">
<div class="columns sticky phn" data-margin-top="0" data-sticky="" data-sticky-on="medium">
<div class="row sticky-header-width">
<div class="small-16 medium-6 columns small-push-4 medium-push-0">
<a aria-label="City of Philadelphia" class="logo" href="https://beta.phila.gov" tabindex="1"><img alt="City of Philadelphia" data-fallback="http://standards.phila.gov/img/logo/city-of-philadelphia.png" src="http://standards.phila.gov/img/logo/city-of-philadelphia.svg"></a>
</div><a aria-hidden="false" class="accessible" href="#page">Skip to main content</a>
<div class="medium-17 columns show-for-medium desktop-nav">
<div class="top-bar-right">
<nav data-swiftype-index="false">
<ul class="horizontal menu pan">
<li class="services-menu-link" data-toggle="services-mega-menu">
<a class="no-link" data-link="/services/" href="">Services</a>
</li>
<li>
<a href="https://beta.phila.gov/programs-initiatives/">Programs &amp; initiatives</a>
</li>
<li>
<a href="https://beta.phila.gov/news/">News &amp; events</a>
</li>
<li>
<a href="https://beta.phila.gov/documents/">Publications &amp; forms</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="search-icon small-5 medium-1 columns phn-m">
<button aria-label="Search" class="site-search" data-toggle="search-dropdown" type="button"><i aria-hidden="true" class="fa fa-search fa-2x"></i> <span class="show-for-small-only">Search</span></button>
</div>
</div>
<div class="top-bar">
<div class="title-bar small-5 columns" data-hide-for="medium" data-responsive-toggle="mobile-nav" data-swiftype-index="false">
<button class="menu-icon" data-toggle="" type="button"><i aria-hidden="true" class="fa fa-bars fa-3x"></i> <span class="title-bar-title">Menu</span></button>
</div>
<div class="primary-menu medium-15 medium-push-2 small-24 columns equal valign-mu" id="mobile-nav">
<div class="top-bar-right valign-mu show-for-small-only">
<nav class="valign-mu" data-swiftype-index="false">
<ul class="vertical menu pan valign-mu" id="mobile-nav-drilldown">
<li>
<a href="https://beta.phila.gov"><i class="fa fa-home fa-lg"></i> Phila.gov home</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/services"><i class="fa fa-list show-for-small-only"></i> Service directory</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/programs-initiatives/"><i class="fa fa-info-circle"></i> Programs &amp; initiatives</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/news/"><i class="fa fa-microphone"></i> News &amp; events</a>
</li>
<li>
<a class="valign-cell" href="https://beta.phila.gov/documents/"><i class="fa fa-file-text"></i> Publications &amp; forms</a>
</li>
<li class="bg-sidewalk">
<a href="https://beta.phila.gov/mayor/"><i class="fa fa-university"></i> Mayor's Office</a>
</li>
<li class="bg-sidewalk">
<a href="https://beta.phila.gov/departments/"><i class="fa fa-sitemap"></i> City government directory</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div id="page">
<div id="content">
<header>
<div class="hero-content">
<div class="hero-wrap">
<div class="row expanded pbl">
<div class="medium-14 small-centered columns text-overlay">
<h1>
<span class="h3 break-after">City of Philadelphia</span> Digital Standards
</h1>
</div>
</div>
</div>
<div class="row">
<div class="small-24 columns">
<div class="mbm-mu" id="site-nav">
<nav data-swiftype-index="false">
<ul class="secondary-menu vertical medium-horizontal menu dropdown" data-responsive-menu="accordion medium-dropdown"></ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<nav class="row mtm">
<div class="columns">
<ol class="breadcrumbs">
<li>
<a href="https://beta.phila.gov"><i aria-hidden="true" class="fa fa-home"></i><span class="accessible">City of Philadelphia Home</span></a>
</li>
<li>
<a href=""></a>
</li>
<li></li>
</ol>
</div>
</nav>
<main></main>
</div>
</div><a href="#page" id="back-to-top"><i aria-hidden="true" class="fa fa-arrow-up"></i><br>
Top</a>
<footer class="site-footer" data-swiftype-index='false'>
<div class="row">
<div class="small-24 columns">
<div class="feedback phm phn-mu mvs mtm-mu mbxl-mu">
<div class="row" data-toggle="feedback">
<div class="small-24 columns">
<div class="call-to-action phs pvm center">
<a class="no-link" href="#"><i aria-hidden="true" class="fa fa-lightbulb-o fa-x2"></i> <span class="break-before-sm">We're still working on this page's design and content.</span> <span class="break-before-sm">How can we make it better?</span></a>
</div>
</div>
</div>
<div class="feedback-form" data-type="feedback-form" style="display:none;">
<div class="row">
<div class="medium-18 large-14 column small-centered mbm clearfix" data-type="form-wrapper">
<div id="form-container"></div>
</div>
</div>
</div>
<div class="row" data-type="feedback-indicator">
<div class="small-24 columns center">
<div class="arrow-wrapper">
<div class="arrow"></div>
</div>
</div>
</div>
<div class="row expanded" data-toggle="feedback" data-type="feedback-footer" style="display:none;">
<div class="small-24 columns">
<div class="call-to-action center">
<div class="pas">
<a class="no-link" href="#"><i aria-hidden="true" class="fa fa-close"></i> Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="philly311" id="full-footer-start">
<section>
<div class="row">
<div class="columns intro">
<h2 class="mbxs">
Philly311
</h2><span><a aria-label="Philly 311" class="external" href="http://www.phila.gov/311">311</a> provides direct access to City government information, services, and real-time service updates. Multiple languages are available. Call 311 or <a class="external" href="https://twitter.com/philly311">tweet @philly311</a> for a quick response.</span>
</div>
</div>
<div class="row pvn pvl-mu equal-height">
<div class="small-24 medium-8 columns pll prxl pvm ptn-mu pbl-mu sidewalk bdr-right-mu interact-311 clearfix equal">
<section>
<h3 class="h4 dark-gray">
Interact with 311 online
</h3><a class="button icon full-width clearfix" href="http://iframe.publicstuff.com/#?client_id=242">
<div class="valign">
<i class="fa fa-bullhorn valign-cell"></i>
<div class="button-label valign-cell">
Report a problem
</div>
</div></a> <a class="button icon full-width clearfix" href="http://www.phila.gov/311/findananswer/Pages/default.aspx">
<div class="valign">
<i class="fa fa-question valign-cell"></i>
<div class="button-label valign-cell">
Ask a question
</div>
</div></a> <a class="button icon full-width clearfix" href="https://cityofphiladelphia.github.io/service-request-tracker/">
<div class="valign">
<i class="fa fa-check-square-o valign-cell"></i>
<div class="button-label valign-cell">
Track a request
</div>
</div></a>
</section>
</div>
<div class="medium-16 columns trending-requests phl pvm pvn-mu equal">
<section>
<h3 class="h4 dark-gray">
Trending requests
</h3>
<ul class="columns-2-mu">
<li>
<a class="external" href="http://www.phila.gov/OPA/AbatementsExemptions/Pages/Homestead.aspx">Apply for a Homestead Exemption</a>
</li>
<li>
<a class="external" href="http://www.phila.gov/prisons/Facilities/Pages/default.aspx">Correctional facilities</a>
</li>
<li>
<a class="external" href="https://prodpci.etimspayments.com/pbw/include/philadelphia_parking/input.jsp">Pay a parking violation</a>
</li>
<li>
<a class="external" href="https://secure.phila.gov/WRB/WaterBill/Account/GetAccount.aspx">Pay a water bill</a>
</li>
<li>
<a class="external" href="https://ework.phila.gov/revenue/">Pay a Real Estate Tax bill</a>
</li>
<li>
<a href="http://property.phila.gov/">Search for property information</a>
</li>
<li>
<a class="external" href="http://www.philadelphiastreets.com/sanitation/residential/collection-schedules">Trash and recycling schedule</a>
</li>
<li>
<a href="https://beta.phila.gov/services/become-a-water-customer/property-owners/">Turn water service on or off</a>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
<div class="fat">
<div class="row pvs ptl-mu phm equal-height">
<section class="medium-8 columns phm pvm pvn-mu equal">
<h2 class="mtn mbm">
Take action in your community
</h2>
<nav class="take-action">
<ul>
<li class="pvxs">
<a class="external" href="http://serve.phila.gov/">SERVE Philadelphia</a>
</li>
<li class="pvxs">
<a href="https://beta.phila.gov/departments/office-of-sustainability/greenworks/greenworks-on-the-ground/">Greenworks on the Ground initiative</a>
</li>
<li class="pvxs">
<a class="external" href="http://citizensplanninginstitute.org/">Citizens Planning Institute</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/311/aboutus/Pages/NeighborhoodLaison.aspx">Neighborhood Liaison program</a>
</li>
<li class="pvxs">
<a class="external" href="http://citizensplanninginstitute.org/citizens-toolkit">Citizen action toolkit</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.philadelphiastreets.com/pmbc/">Clean up your block</a>
</li>
<li class="pvxs">
<a class="external" href="https://phlevents.org/applications/">Apply for an event permit</a>
</li>
<li class="pvxs">
<a class="external" href="http://gsg.phila.gov/map">City, District, Council, &amp; Ward maps</a>
</li>
</ul>
</nav>
</section>
<section class="medium-8 columns phm pll-mu pvm pvn-mu equal">
<h2 class="mtn mbm">
Know your City government
</h2>
<nav class="take-action">
<ul>
<li class="pvxs">
<a class="" href="https://beta.phila.gov/departments/mayor/">Mayor’s Office</a>
</li>
<li class="pvxs">
<a class="external" href="http://phlcouncil.com/">City Council</a>
</li>
<li class="pvxs">
<a class="" href="https://beta.phila.gov/departments/">City government directory</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/openbudget/">City budget</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.amlegal.com/codes/client/philadelphia_pa/">Philadelphia Code &amp; Charter</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/records/index.html">City records</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/ethicsboard/Pages/default.aspx">Honesty in government</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.philadelphiavotes.com/">Voting &amp; elections</a>
</li>
<li class="pvxs">
<a class="external" href="http://www.phila.gov/data/">Open data</a>
</li>
</ul>
</nav>
</section>
<section class="medium-8 columns phm pll-mu pvm pvn-mu equal">
<h2 class="mtn mbm">
Connect with City government
</h2>
<nav class="city-social">
<ul class="inline-list">
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.facebook.com/PhiladelphiaCityGovernment/"><i aria-hidden="true" class="fa fa-facebook fa-3x" title="Facebook"></i> <span class="show-for-sr">Facebook</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://twitter.com/PhiladelphiaGov"><i aria-hidden="true" class="fa fa-twitter fa-3x" title="Twitter"></i> <span class="show-for-sr">Twitter</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.instagram.com/cityofphiladelphia/"><i aria-hidden="true" class="fa fa-instagram fa-3x" title="Instagram"></i> <span class="show-for-sr">Instagram</span></a>
</li>
<li class="pvxs">
<a class="prl" href="http://www.phila.gov/channel64/Pages/default.aspx"><span class="fa fa-stack fa-lg"><i aria-hidden="true" class="fa fa-tv fa-stack-2x" title="TV"></i> <i class="fa fa-stack-1x"><span class="h4">64</span></i> <span class="show-for-sr">TV 64</span></span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.youtube.com/user/PhilaGov"><i aria-hidden="true" class="fa fa-youtube fa-3x" title="Youtube"></i> <span class="show-for-sr">Youtube</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://www.flickr.com/photos/phillycityrep"><i aria-hidden="true" class="fa fa-flickr fa-3x" title="Flickr"></i> <span class="show-for-sr">Flickr</span></a>
</li>
<li class="pbm">
<a class="prl" data-analytics="social" href="https://github.com/CityOfPhiladelphia"><i aria-hidden="true" class="fa fa-github fa-3x" title="GitHub"></i> <span class="show-for-sr">GitHub</span></a>
</li>
</ul>
</nav>
</section>
</div>
</div>
<div class="bg-black">
<div class="row classic">
<nav class="columns center">
<ul class="inline-list">
<li>
<a href="https://beta.phila.gov/terms-of-use/">Terms of use</a>
</li>
<li>
<a href="http://www.phila.gov/privacy/pdfs/FinalCityOpenRecords.pdf">Right to know (pdf)</a>
</li>
<li>
<a href="https://beta.phila.gov/privacypolicy/">Privacy Policy</a>
</li>
</ul>
</nav>
</div>
</div>
</footer>
<div class="global-nav show-for-medium" data-swiftype-index="false" id="services-list">
<div class="dropdown-pane mega-menu-dropdown" data-close-on-click="true" data-dropdown="" data-hover="true" data-hover-pane="true" data-trap-focus="true" data-v-offset="0" id="services-mega-menu">
<div class="inner-wrapper">
<div class="row expanded mbxs" data-equalize-by-row="true" data-equalizer="" data-services-menu="" id="phila-menu-wrap"></div>
<div class="row expanded collapse bg-ghost-gray mega-menu-footer">
<div class="medium-8 float-right white bg-dark-ben-franklin left-arrow-indent">
<div class="valign">
<a class="phl valign-cell service-directory" href="http://beta.phila.gov/services/">Service directory</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-pane global-nav">
<div class="dropdown-pane site-search-dropdown" data-auto-focus="true" data-close-on-click="true" data-dropdown="" data-hover-pane="true" data-trap-focus="true" data-v-offset="0" id="search-dropdown">
<div class="row columns expanded bg-ghost-gray">
<div class="row arrow">
<div class="medium-16 columns small-centered">
<div class="paxl">
<form action="https://beta.phila.gov/search/" id="search-form" method="get" name="search-form" role="search">
<label class="show-for-sr" for="search-field">Search form</label>
<div class="search">
<input class="search-field" id="search-field" name="stq" placeholder="Search" title="Search" type="text" value=""> <input class="search-submit" type="submit" value="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- REVIEW can these scripts go into the app bundle? -->
<script>
$(document).foundation();
</script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
</body>
</html>
@bertday
Copy link
Author

bertday commented Apr 11, 2018

To use the Node version (with Webpack):

yarn add phila-standards jquery

And add to your JavaScript:

import 'phila-standards/dist/css/phila-standards.min.css';
import 'phila-standards';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment