HTML boilerplate

HTML boilerplate

You’re on the City’s beta digital standards site. It’s a work-in-progress. Use the site’s feedback links to help us make the content better.

Use the markup below to create a one-page application.


Code
Copy code
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Site title</title>
    <link rel="stylesheet" type="text/css" href="/phila-standards.css">

    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.png">
    <meta name="twitter:card" content="summary">
<meta property="og:title" content=""> 
<meta property="og:description" content=""> 
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:site_name" content="Digital Standards | City of Philadelphia">
<meta property="og:image" content="https://beta.phila.gov/media/20160715133810/phila-gov.jpg">


  </head>
  <body lang="en">
  <header class="global-nav pbm pbn-mu mbn-mu">
    
<h1 class="accessible">City of Philadelphia</h1>

<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/">Office of the Mayor</a></li>
        <li><a href="https://beta.phila.gov/departments/">City government directory</a></li>
        <li>
          <div id="google_translate_element" class="no-js"><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 href="https://beta.phila.gov" class="logo" tabindex="1" aria-label="City of Philadelphia">
              <img src="https://standards.phila.gov/img/logo/city-of-philadelphia.svg" data-fallback="https://standards.phila.gov/img/logo/city-of-philadelphia.png" alt="City of Philadelphia">
              </a>
          </div>
          <a href="#page" aria-hidden="false" class="accessible">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 href="" class="no-link" data-link="/services/">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 class="site-search" type="button" data-toggle="search-dropdown" aria-label="Search">
                <i class="fa fa-search fa-2x" aria-hidden="true"></i>
                <span class="show-for-small-only">Search</span>
              </button>
          </div>
        </div>
        <div class="top-bar">
          <div class="title-bar small-5 columns" data-responsive-toggle="mobile-nav" data-swiftype-index="false" data-hide-for="medium">
            <button class="menu-icon" type="button" data-toggle>
              <i class="fa fa-bars fa-3x" aria-hidden="true"></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 data-swiftype-index="false" class="valign-mu">
      <ul id="mobile-nav-drilldown" class="vertical menu pan valign-mu">
        <li>
          <a href="https://beta.phila.gov"><i class="fa fa-home fa-lg"></i> Phila.gov home</a>
        </li>
        <li>
          <a href="https://beta.phila.gov/services" class="valign-cell"><i class="fa fa-list show-for-small-only"></i> Service directory</a>
        </li>
        <li>
          <a href="https://beta.phila.gov/programs-initiatives/" class="valign-cell"><i class="fa fa-info-circle"></i> Programs &amp; initiatives</a>
        </li>
        <li><a href="https://beta.phila.gov/news/" class="valign-cell"><i class="fa fa-microphone"></i> News &amp; events</a>
        </li>
        <li>
          <a href="https://beta.phila.gov/documents/" class="valign-cell"><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 class="fa fa-home" aria-hidden="true"></i><span class="accessible">City of Philadelphia Home</span></a>
      </li>
      
        <li><a href=""></a></li>
          
            <nil>
      <li></li>
      
    </ol>
  </div>
</nav>

  <main>

    

    </main>

    
    
      </div>
    </div>
    <a href="#page" id="back-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Top</a>

    
    <footer data-swiftype-index='false' class="site-footer">
      <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 href="#" class="no-link"><i class="fa fa-lightbulb-o fa-x2" aria-hidden="true"></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 href="#" class="no-link"><i class="fa fa-close" aria-hidden="true"></i> Close</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="full-footer-start" class="philly311">
        <section>
          <div class="row">
            <div class="columns intro">
              <h2 class="mbxs">Philly311</h2>
              <span><a href="http://www.phila.gov/311" class="external" aria-label="Philly 311">311</a> provides direct access to City government information, services, and real-time service updates. Multiple languages are available. Call 311 or <a href="https://twitter.com/philly311" class="external">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 href="http://iframe.publicstuff.com/#?client_id=242" class="button icon full-width clearfix">
                  <div class="valign">
                    <div class="button-label valign-cell">Report a problem</div>
                  </div>
                </a>
                <a href="http://www.phila.gov/311/findananswer/Pages/default.aspx" class="button icon full-width clearfix">
                  <div class="valign">
                    <div class="button-label valign-cell">Ask a question</div>
                  </div>
                </a>
                <a href="https://cityofphiladelphia.github.io/service-request-tracker/" class="button icon full-width clearfix">
                  <div class="valign">
                    <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 href="https://beta.phila.gov/services/property-lots-housing/get-the-homestead-exemption/">Apply for a Homestead Exemption</a>
                    </li>
                    <li>
                      <a href="http://www.phila.gov/prisons/Facilities/Pages/default.aspx">Correctional facilities</a>
                    </li>
                    <li>
                      <a href="https://prodpci.etimspayments.com/pbw/include/philadelphia_parking/input.jsp">Pay a parking violation</a>
                    </li>
                    <li>
                      <a href="https://secure.phila.gov/WRB/WaterBill/Account/GetAccount.aspx">Pay a water bill</a>
                    </li>
                    <li>
                      <a href="https://beta.phila.gov/services/payments-assistance-taxes/make-a-payment/pay-your-real-estate-tax/">Pay a Real Estate Tax bill</a>
                    </li>
                    <li>
                      <a href="http://property.phila.gov/">Search for property information</a>
                    </li>
                    <li>
                      <a href="http://www.philadelphiastreets.com/sanitation/residential/collection-schedules" class="external">Trash and recycling schedule</a>
                    </li>
                    <li>
                      <a href="https://beta.phila.gov/services/water-gas-utilities/water-sewer-services/become-a-water-customer/">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">Elected officials</h2>
              <nav class="take-action">
                <ul>
                  <li class="pvxs"><a href="https://beta.phila.gov/departments/mayor/">Mayor</a></li>
                  <li class="pvxs"><a href="http://phlcouncil.com/" class="external">City Council</a></li>
                  <li class="pvxs"><a href="http://www.courts.phila.gov/">Courts</a></li>
                  <li class="pvxs"><a href="http://www.phila.gov/districtattorney/pages/default.aspx">District Attorney</a></li>
                  <li class="pvxs"><a href="http://www.philadelphiacontroller.org/" class="external">City Controller</a></li>
                  <li class="pvxs"><a href="http://www.officeofphiladelphiasheriff.com/" class="external">Sheriff</a></li>
                  <li class="pvxs"><a href="https://www.philadelphiavotes.com/" class="external">City Commissioners</a></li>
                  <li class="pvxs"><a href="http://secureprod.phila.gov/wills/">Register of Wills</a></li>
                </ul>
              </nav>
          </section>
          <section class="medium-8 columns phm pll-mu pvm pvn-mu equal">
            <h2 class="mtn mbm">Open government</h2>
            <nav class="take-action">
              <ul>
                <li class="pvxs"><a href="https://www.phila.gov/openbudget/" class="">City Budget</a></li>
                <li class="pvxs"><a href="http://www.amlegal.com/codes/client/philadelphia_pa/" class="external">Philadelphia Code &amp; Charter</a></li>
                <li class="pvxs"><a href="http://www.phila.gov/records/index.html">City records</a></li>
                <li class="pvxs"><a href="http://regulations.phila-records.com/">City agency regulations</a></li>
                <li class="pvxs"><a href="http://www.phila.gov/executiveorders/pages/default.aspx">Executive orders</a></li>
                <li class="pvxs"><a href="http://www.phila.gov/integrityworks/pages/default.aspx">Honesty in government</a></li>
                <li class="pvxs"><a href="https://www.philadelphiavotes.com/" class="external">Voting & elections</a></li>
                <li class="pvxs"><a href="https:// beta.phila.gov;/programs/open-data-program/">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 href="https://www.facebook.com/cityofphiladelphia" class="prl" data-analytics="social">
                    <i class="fa fa-facebook fa-3x" title="Facebook" aria-hidden="true"></i>
                    <span class="show-for-sr">Facebook</span>
                  </a>
                </li>
                <li class="pbm">
                  <a href="https://twitter.com/PhiladelphiaGov" class="prl"  data-analytics="social">
                    <i class="fa fa-twitter fa-3x" title="Twitter" aria-hidden="true"></i>
                    <span class="show-for-sr">Twitter</span>
                  </a>
                </li>
                <li class="pbm">
                  <a href="https://www.instagram.com/cityofphiladelphia/" class="prl" data-analytics="social">
                    <i class="fa fa-instagram fa-3x" title="Instagram" aria-hidden="true"></i>
                    <span class="show-for-sr">Instagram</span>
                  </a>
                </li>
                <li class="pvxs">
                  <a href="http://www.phila.gov/channel64/Pages/default.aspx" class="prl">
                    <span class="fa fa-stack fa-lg">
                      <i class="fa fa-tv fa-stack-2x" title="TV" aria-hidden="true"></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 href="https://www.youtube.com/user/PhilaGov" class="prl" data-analytics="social">
                    <i class="fa fa-youtube fa-3x" title="Youtube" aria-hidden="true"></i>
                    <span class="show-for-sr">Youtube</span>
                  </a>
                </li>
                <li class="pbm">
                  <a href="https://www.flickr.com/photos/phillycityrep" class="prl" data-analytics="social">
                    <i class="fa fa-flickr fa-3x" title="Flickr" aria-hidden="true"></i>
                    <span class="show-for-sr">Flickr</span>
                  </a>
                </li>
                <li class="pbm">
                  <a href="https://github.com/CityOfPhiladelphia" class="prl"  data-analytics="social">
                    <i class="fa fa-github fa-3x" title="GitHub" aria-hidden="true"></i>
                    <span class="show-for-sr">GitHub</span>
                  </a>
                </li>
              </ul>
            </nav>
            <nav>
              <ul>
                <li class="pvxs"><a href="https://beta.phila.gov/departments/">City government directory</a></li>
                <li class="pvxs"><a href="https://beta.phila.gov/services/">Service directory</a></li>
                <li class="pvxs"><a href="https://beta.phila.gov/programs/">Programs & initiatives </a></li>
                <li class="pvxs"><a href="https://beta.phila.gov/documents/">Publications & forms </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 id="services-list" class="global-nav show-for-medium" data-swiftype-index="false">
  <div id="services-mega-menu" class="dropdown-pane mega-menu-dropdown" data-dropdown data-v-offset="0" data-hover-pane="true" data-trap-focus="true" data-hover="true" data-close-on-click="true">
    <div class="inner-wrapper">
      <div id="phila-menu-wrap" class="row expanded mbxs" data-equalizer data-equalize-by-row="true" data-services-menu>
      </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 href="http://beta.phila.gov/services/" class="phl valign-cell service-directory">Service directory</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


    <div class="search-pane global-nav">
  <div class="dropdown-pane site-search-dropdown" data-dropdown data-v-offset="0" data-hover-pane="true" data-trap-focus="true" data-close-on-click="true" data-auto-focus="true" 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 role="search" method="get" id="search-form" action="https://beta.phila.gov/search/">
              <label for="search-field" class="show-for-sr">Search form</label>
              <div class="search">
                <input type="text" class="search-field" placeholder="Search" value="" name="stq" title="Search" id="search-field">
                <input type="submit" class="search-submit" value="submit">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    <script src="/js/standards.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 type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    
    
    
      <script src="/js/scripts.js"></script>
    


</body>
</html>

Top