<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<h1>
  <amp-fit-text class="price-heading" width="300" height="45" layout="responsive" max-font-size="45">
          Cosy House in Central London
  </amp-fit-text>
</h1>
<div class="price-description">£430,000</div>
<p class="housing-description">London SW1A 1AA</p>

<amp-carousel class="image-gallery" width="512" height="384" layout="responsive" type="slides">
    <amp-img src="/static/samples/img/buckingham_palace_building_1280x960.jpg" layout="fill" alt="Buckingham Palace" attribution="https://pixabay.com"></amp-img>
    <amp-img src="/static/samples/img/buckingham_palace_entrance_1280x853.jpg" layout="fill" alt="Buckingham Palace entrance" attribution="https://pixabay.com"></amp-img>
</amp-carousel>

<div class="contact-section">
    <div> Do you like this property?</div>
    <div class="contact">
        <a href="tel:012 3456789">Call agent</a>
        <a href="mailto:someone@example.com">Email agent</a>
    </div>
</div>

<p class="social-share">
    <amp-social-share type="twitter" width="60" height="44"></amp-social-share>
    <amp-social-share type="facebook" width="60" height="44" data-attribution="254325784911610"> </amp-social-share>
    <amp-social-share type="gplus" width="60" height="44"></amp-social-share>
    <amp-social-share type="email" width="60" height="44"></amp-social-share>
    <amp-social-share type="pinterest" width="66" height="44"></amp-social-share>
</p>

<amp-accordion class="additional-data">
  <section>
    <h2>Description</h2>
    <ul class="description">
      <li>Ideally located near tube station</li>
      <li>Open plan kitchen</li>
      <li>Bicycle storage, visitors parking, communal gardens and roof terraces</li>
    </ul>
  </section>
  <section>
    <h2>View on map</h2>
    <amp-iframe title="Embedded Google map" width="600" height="400" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848&q=London SW1A 1AA">
    </amp-iframe>
  </section>
  <section>
    <h2>Floorplan</h2>
    <amp-img src="/static/samples/img/floorplan_518x340.jpg" width="518" height="340"></amp-img>
  </section>
</amp-accordion>

<h2>Mortgage Calculator</h2>
<form method="GET" action="calculate-mortgage" action-xhr="calculate-mortgage-xhr" target="_top">
  <div>
    <label>
        <input type="number" name="price" maxlength="10" value="2000000" required>
      Price
    </label>
  </div>
  <div>
    <label>
      <input type="number" name="deposit" maxlength="10" value="100000" required>
      Deposit
    </label>
  </div>
  <div>
    <label>
        <input type="number" name="annual_interest" maxlength="10" value="2.5" step="0.01" required>
      Annual interest
    </label>
  </div>
  <div>
    <label>
        <input type="number" name="repayment_period" value="25" required>
      Repayment period (years)
    </label>
  </div>
  <div>
    <input type="submit" value="Calculate">
  </div>
  <div submit-success>
    <template type="amp-mustache">
      Monthly repayment {{monthly_repayment}}
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! You entered some incorrect details {{err}}
    </template>
  </div>
</form>

<h2>Properties sold nearby</h2>
<amp-list width="auto" height="150" layout="fixed-height" src="/static/samples/json/other_properties.json" binding="no">
  <template type="amp-mustache">
    <a href="#" class="ampstart-card related m1">
      <amp-img width="122" height="100" src="https://ampbyexample.com{{src}}" alt="{{alt}}" attribution="{{attribution}}"></amp-img>
            <p>{{desc}}</p>
            <p>{{address}}</p>
            <p class="price-other">{{price}}</p>
    </a>
  </template>
  <div overflow role="button" aria-label="Show more" class="list-overflow">
    Show more
  </div>
</amp-list>

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
        "vars": {
            "account": "UA-73836974-1"
        },
        "triggers": {
            "default pageview": {
                "on": "visible",
                "request": "pageview",
                "vars": {
                    "title": "Housing"
                }
            }
        }
    }
  </script>
</amp-analytics>