AMP-body.html

<!-- Start Fullpage Hero -->
  <figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="404" height="720" layout="responsive" src="/img/elephants_narrow.png" media="(max-width: 415px)"></amp-img>
    <amp-img height="720" layout="fixed-height" src="/img/elephants_wide.jpg" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
          <span class="ampstart-fullpage-hero-heading-text">
            The Year's Best Animal Photos
          </span>
        </h1>
          <span class="ampstart-image-credit h4">
            By <a href="#" role="author" class="text-decoration-none">J.T. Lee</a>,<br> January 18th, 2017
          </span>
    </header>
    <footer class="absolute left-0 right-0 bottom-0">
      <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content"><span class="ampstart-readmore-text px1">Read more</span></a>
    </footer>
    </figcaption>
  </figure>

  <!-- End Fullpage Hero -->
  <main id="content" role="main" class="">
    <article class="photo-article">
      <span class="ampstart-subtitle block px3 pt2 mb2">PHOTO GALLERY</span>
      <p class="mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
      <p class="ampstart-initialcap mb4 mx3">Donec porta orci eu tortor finibus, id facilisis metus aliquam. Pellentesque lobortis viverra odio ut eleifend. Integer elementum finibus magna, consequat fermentum dui ultrices sit amet.</p>
      <p class="mb4 px3">Sed leo sapien, molestie sit amet lorem eu, suscipit imperdiet tortor. Mauris maximus magna quam, non sodales metus auctor nec. Aenean tristique massa enim, non dictum mauris eleifend tristique. Proin fermentum nulla a nulla bibendum ultricies. Nulla pulvinar, risus vel tristique aliquet, elit quam tincidunt nisi, non blandit leo nulla eu ipsum. Sed porta, felis vitae elementum pellentesque, mauris felis rhoncus quam, ac suscipit eros justo ac justo. Proin et elit vitae sem interdum posuere et vitae nibh. Ut sed orci aliquam, pulvinar felis ac, pretium massa. Nullam porta ipsum non euismod mollis. Quisque scelerisque nisi quis pharetra blandit.</p>
      <p class="mb4 px3">Vestibulum eu varius dolor. Praesent sagittis magna sem, non bibendum quam aliquam et. Sed et tristique mi. Quisque porta lorem et nulla lacinia gravida. Nullam semper lobortis sem, interdum tempus tellus. Proin accumsan imperdiet leo at vulputate. Nulla euismod placerat finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p class="mb4 px3">Aenean ante erat, egestas a justo eu, sollicitudin convallis nulla. Fusce ex est, ornare in odio eu, venenatis dapibus purus. Etiam sit amet orci quam. Proin lobortis lobortis tellus, non elementum nunc consequat ac. Suspendisse eu purus sit amet dolor elementum mattis ut in odio.</p>
      <!-- Start Image with Caption -->
      <figure class="ampstart-image-with-caption m0 relative mb4">
        <amp-img src="/img/gorilla.png" width="756" height="520" layout="responsive" class=""></amp-img>
        <figcaption class="h5 mt1 px3">
          Description of the photograph.
            <span class="ampstart-image-credit block bold">
              Taken by
                <a href="#" role="author">D.F. Roy</a>
            </span>
        </figcaption>
      </figure>
      <!-- End Image with Caption -->
      <!-- Start carousel -->
      <amp-carousel width="756" height="638" layout="responsive" type="slides" class="mb4">

          <!-- Start Image with Caption -->
          <figure class="ampstart-image-with-caption m0 relative mb4">
            <amp-img src="/img/zebras.jpg" width="756" height="520" layout="responsive" class=""></amp-img>
            <figcaption class="h5 mt1 px3">
              Zebras grazing.
                <span class="ampstart-image-credit block bold">
                  Taken by
                    <a href="#" role="author">Anna Q.</a>
                </span>
            </figcaption>
          </figure>
          <!-- End Image with Caption -->

          <!-- Start Image with Caption -->
          <figure class="ampstart-image-with-caption m0 relative mb4">
            <amp-img src="/img/sheep.jpg" width="756" height="520" layout="responsive" class=""></amp-img>
            <figcaption class="h5 mt1 px3">
              Sheep in a field.
                <span class="ampstart-image-credit block bold">
                  Taken by
                    <a href="#" role="author">L. Fischer</a>
                </span>
            </figcaption>
          </figure>
          <!-- End Image with Caption -->

          <!-- Start Image with Caption -->
          <figure class="ampstart-image-with-caption m0 relative mb4">
            <amp-img src="/img/camels.jpg" width="756" height="520" layout="responsive" class=""></amp-img>
            <figcaption class="h5 mt1 px3">
              Camels on a beach.
                <span class="ampstart-image-credit block bold">
                  Taken by
                    <a href="#" role="author">Mali D.</a>
                </span>
            </figcaption>
          </figure>
          <!-- End Image with Caption -->
      </amp-carousel>
      <!-- End carousel -->
      <p class="mb4 px3">Vestibulum eu varius dolor. Praesent sagittis magna sem, non bibendum quam aliquam et. Sed et tristique mi. Quisque porta lorem et nulla lacinia gravida. Nullam semper lobortis sem, interdum tempus tellus. Proin accumsan imperdiet leo at vulputate. Nulla euismod placerat finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <!-- ugly narrow section? -->
      <p class="mb4 px3">Mauris aliquet eleifend lacinia. Maecenas non finibus ante, et maximus urna. In non enim a lectus molestie tincidunt. Curabitur eu tortor odio. Aliquam bibendum elit risus, vitae rutrum ex placerat eget.</p>
      <amp-instagram data-shortcode="BRJd8UIjTXN" width="379" height="249" layout="responsive" class="p0 mb4 px3"></amp-instagram>
      <p class="mb4 px3">Integer fringilla eu lacus sit amet tristique. Nulla sagittis fermentum porta. Aenean convallis nulla eu nulla lobortis, sit amet sagittis mauris tincidunt. Praesent sed efficitur odio. Quisque et sollicitudin nisi. Fusce sed auctor ligula. Suspendisse potenti. Nam hendrerit sollicitudin enim, non aliquet lacus congue et.</p>
      <p class="mb4 px3"> Etiam egestas velit ut purus dictum, vel placerat turpis convallis. Nullam metus urna, posuere ut elit eu, imperdiet consequat metus. Phasellus blandit at lorem ut mollis. Donec vel ligula at erat mattis aliquet eget quis nibh.</p>
      <!-- Start Socialbox -->
      <div class="ampstart-social-box mb4">
          <amp-social-share type="twitter"></amp-social-share>
          <amp-social-share type="facebook" data-param-text="Hello world" data-param-href="https://example.com/?ref=URL" data-param-app_id="145634995501895"></amp-social-share>
          <amp-social-share type="gplus"></amp-social-share>

          <amp-social-share type="pinterest"></amp-social-share>
          <amp-social-share type="email" data-param-subject="Hello World" data-param-body="What's up?"></amp-social-share>
      </div>
    <!-- End Socialbox -->
    </article>
  </main>
  <!-- Start Footer -->
  <footer class="ampstart-footer flex flex-column items-center px3">
    <ul class="ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4">
        <li class="mr2">
            <a href="#" target="_blank" class="inline-block" aria-label="Link to AMP HTML Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.2" viewbox="0 0 53 49"><title>Twitter</title><path d="M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6" class="ampstart-icon ampstart-icon-twitter"></path></svg>
            </a>
        </li>
        <li class="mr2">
            <a href="#" target="_blank" class="inline-block" aria-label="Link to AMP HTML Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.6" viewbox="0 0 56 55"><title>Facebook</title><path d="M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43" class="ampstart-icon ampstart-icon-fb"></path></svg>
            </a>
        </li>
        <li class="mr2">
            <a href="#" target="_blank" class="inline-block" aria-label="Link to AMP HTML pin trest"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="28.5" viewbox="0 0 43 51"><title>pinterest</title><path d="M-13.6-5c0-1.6.2-3 .8-4.4.5-1.4 1.2-2.6 2.2-3.6.9-1 2-1.9 3.2-2.6 1.2-.8 2.5-1.3 3.9-1.7 1.5-.4 2.9-.5 4.4-.5 2.2 0 4.3.4 6.2 1.4 1.9.9 3.5 2.3 4.7 4.1 1.2 1.9 1.8 3.9 1.8 6.2 0 1.4-.1 2.7-.4 4C13-.8 12.5.5 12 1.7c-.6 1.2-1.3 2.3-2.2 3.2C9 5.8 8 6.6 6.7 7.1c-1.2.6-2.5.9-4 .9-1 0-1.9-.3-2.9-.7-.9-.5-1.6-1.1-2-1.9-.1.5-.3 1.4-.6 2.4-.3 1.1-.4 1.7-.5 2-.1.3-.2.9-.4 1.6-.3.7-.4 1.2-.6 1.5-.1.3-.4.7-.7 1.3-.3.6-.6 1.2-1 1.7-.3.5-.7 1.1-1.3 1.8l-.3.1-.2-.2c-.2-2.2-.3-3.6-.3-4 0-1.3.2-2.8.5-4.4.3-1.7.8-3.7 1.4-6.2.6-2.5 1-3.9 1.1-4.4-.5-.9-.7-2.1-.7-3.6 0-1.2.4-2.3 1.1-3.3.8-1.1 1.7-1.6 2.8-1.6.9 0 1.6.3 2.1.9.4.6.7 1.3.7 2.2 0 .9-.3 2.3-1 4.1C-.7-.9-1 .4-1 1.3c0 .9.3 1.6 1 2.2.6.6 1.4.9 2.3.9.8 0 1.5-.2 2.2-.5.6-.4 1.2-.9 1.6-1.5.5-.6.9-1.3 1.2-2 .4-.8.6-1.5.8-2.4.2-.8.4-1.6.5-2.4.1-.7.1-1.4.1-2.1 0-2.5-.8-4.4-2.3-5.8-1.6-1.4-3.6-2.1-6.1-2.1-2.8 0-5.2 1-7.1 2.8-1.9 1.9-2.9 4.2-2.9 7.1 0 .6.1 1.2.3 1.8.2.6.4 1.1.6 1.4.2.3.4.7.5 1 .2.3.3.5.3.6 0 .4-.1.9-.3 1.6-.2.6-.5 1-.8 1 0 0-.1-.1-.4-.1-.7-.2-1.3-.6-1.9-1.2-.5-.6-1-1.3-1.3-2-.3-.8-.5-1.6-.7-2.4-.2-.7-.2-1.5-.2-2.2z" transform="translate(21.734 23.748)" class="ampstart-icon ampstart-icon-pinterest"></path></svg></a>
        </li>
        <li class="mr2">
            <a href="#" target="_blank" class="inline-block" aria-label="Link to AMP HTML E-mail"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="18.4" viewbox="0 0 56 43"><title>email</title><path d="M10.5 6.4C9.1 6.4 8 7.5 8 8.9v21.3c0 1.3 1.1 2.5 2.5 2.5h34.9c1.4 0 2.5-1.2 2.5-2.5V8.9c0-1.4-1.1-2.5-2.5-2.5H10.5zm2.1 2.5h30.7L27.9 22.3 12.6 8.9zm-2.1 1.4l16.6 14.6c.5.4 1.2.4 1.7 0l16.6-14.6v19.9H10.5V10.3z" class="ampstart-icon ampstart-icon-email"></path></svg></a>
        </li>
    </ul>
    <nav class="ampstart-footer-nav">
        <ul class="list-reset flex flex-wrap mb3">
            <li class="px1"><a class="text-decoration-none ampstart-label" href="#">About</a></li>
            <li class="px1"><a class="text-decoration-none ampstart-label" href="#">Contact</a></li>
            <li class="px1"><a class="text-decoration-none ampstart-label" href="#">Terms</a></li>
        </ul>
    </nav>
    <small>© AMP Site, 2017</small>
  </footer>
  <!-- End Footer -->