Home Menu

<div class="translate-bar bar bg-tuatara">
    <div class="row">
        <div class="translate-bar_notice-column small-12 medium-6 columns">
            <!-- in the web app, this whole section gets hidden if selected on English -->
            <div class="translate-bar_notice">
                <span class="translate-bar_message c-white t-small t-semi">Esta página ha sido traducida por Google Translate.</span>
                <a href="#" class="translate-bar_learn lined c-white t-small">Learn more.</a>
            </div>
        </div>
        <div class="small-12 medium-6 columns">
            <ul class="translate-bar_languages inline-list t-semi right">
                <li><a href="#" class="">English</a></li>
                <li><a href="#" class="">Espanol</a></li>
                <li><a href="#" class="active t-ch">中国</a></li>
                <li><a href="#" class="">Tagalog</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="version-bar bar bg-primary">
    <div class="row">
        <div class="medium-12 columns">
            <p class="text-right t-small c-white no-margin">This site is in <strong class="t-caps">BETA</strong>: We're just getting started. <br class="show-for-small-only"> We'd love to get <a href="#" class="a-white lined">your feedback</a>.</p>
        </div>
    </div>
</div>
<nav class="top-bar" role="navigation">
    <div class="row">
        <ul class="title-area">
            <li class="name">
                <div class="name-logo is-tall is-offset-up t-alt-sans"><a title="DAHLIA San Francisco Housing Portal" href="/pages/home.html">DAHLIA San Francisco Housing Portal</a></div>
            </li>

            <li class="toggle-topbar menu-icon">
                <button href="#" class="button-link t-caps t-bold" aria-label="Open Menu">
        Menu
        <span class="ui-icon ui-static ui-large i-primary ">
          <svg>
            <use xlink:href="#i-menu"></use>
          </svg>
        </span>
      </button>
            </li>
        </ul>
        <section class="top-bar-section has-flex-items">
            <ul class="nav-menu right">
                <li>
                    <a href="/browse/browse-grid--default.html">
          Browse Properties
        </a>
                </li>
                <li>
                    <a href="/pages/favorites-grid.html">
          My Favorites
        </a>
                </li>
                <li>
                    <a href="/pages/get-assistance.html">
          Get Assistance
        </a>
                </li>
                <li>
                    <a href="/pages/get-assistance.html">
          Sign In
        </a>
                </li>
            </ul>
        </section>
    </div>
</nav>

<div class="splash-header bg-image">
    <div class="row">
        <header class="hero-header text-center">
            <h1 class="hero-title c-white">Apply for affordable housing</h1>

            <div class="row">
                <div class="medium-6 medium-centered columns">
                    <div class="small-6 columns">
                        <a class="button secondary expand" href="/browse/browse-grid--default.html">Rent</a>
                    </div>
                    <div class="small-6 columns">
                        <a class="button secondary expand" href="/browse/browse-grid--default.html">Buy</a>
                    </div>
                </div>
            </div>
        </header>
    </div>
</div>

<section class="splash-message">
    <div class="splash-message_panel row">
        <div class="medium-8 columns">
            <p class="t-tiny c-charcoal">Currently this site includes only Below Market Rate rentals, a program that includes units priced to be affordable to lower or middle income households. We encourage you to browse other affordable housing resources.</p>
        </div>
        <div class="medium-4 columns small-only-text-center">
            <a href="/pages/additional-opportunities.html" class="button radius ghost-white no-margin expand">Additional Opportunities</a>
        </div>
    </div>
</section>

<section class="splash-wells row collapse">
    <div class="medium-6 columns">
        <div class="tall-block welcome-block">
            <figure class="block-icon">
                <img src="/toolkit/images/icon-home.png" " alt="icon ">
      </figure>
      <h2 class="t-delta t-serif c-oil no-margin ">Tell us your household size and income and we&#x27;ll highlight properties that might be a fit.</h1>
      <a href="# " class="button ghost-white margin-top ">Estimate Eligibility</a>
    </div>
  </div>

  <div class="medium-6 columns ">
    <div class="tall-block welcome-block ">
      <figure class="block-icon ">
        <img src="/toolkit/images/icon-mail.png "" alt="icon">
            </figure>
            <h2 class="t-delta t-serif c-oil no-margin">Get emailed whenever a new listing is posted.</h1>
                <a href="#" class="button ghost-white margin-top">Sign Up Today</a>
        </div>
    </div>
</section>

<div pageslide="" ps-open="checked" class="ng-isolate-scope ng-pageslide" style="z-index: 1000; position: fixed; width: 300px; height: 100%; overflow: hidden; transition-duration: 0.5s; transition-property: width, height; top: 0px; bottom: 0px; right: 0px;">
    <div style="display: block;" id="demo-right" class="nav-mobile_panel">
        <header class="nav-mobile_header">
            <button href="#" class="nav-mobile_menu-icon button-link">
        <span class="ui-icon ui-static ui-medium i-white ">
          <svg>
            <use xlink:href="#i-right"></use>
          </svg>
        </span>
      </button>
        </header>
        <ul class="nav-mobile">
        </ul>
    </div>
</div>