index.html

---
layout: default
permalink: "/"
title: Homepage
head_title: ''
description: ''
amp_components:
- amp-carousel
- amp-fit-text
carousel:
- "/assets/uploads/hero-wood-owl.jpg"
- "/assets/uploads/hero-waitingroom.jpg"
- "/assets/uploads/hero-outside.jpg"
- "/assets/uploads/hero-dentist-chair.jpg"

---
{% for _page in site.pages %}
{% if _page.settings %}
{% assign settings = _page %}
{% endif %}
{% endfor %}

<section class="px-0">
  <amp-carousel width="1280" height="720" layout="responsive" type="slides" autoplay loop animate-in="fade-in"
    animate-in-duration=".5s" delay="4000">
    {% for image in page.carousel %}
      <div class="slide">
        <amp-img src="{{image}}" width="400" height="250" layout="responsive" animate-in="fade-in"
          animate-in-duration=".5s" alt="a sample image"></amp-img>
        <div style="width: 80%; position:absolute; top:10%; left: 10%;">
          <amp-fit-text class="text-light text-center font-weight-bold display-1" width="200" height="50"
            layout="responsive" style="text-shadow: 1px 1px 1px black;">
            WELCOME TO THE FAMILY
          </amp-fit-text>
        </div>
      </div>
    {% endfor %}
  </amp-carousel>
</section>


<!-- Logo Section -->
<section class="bg-brand-primary-dark">
  <div class="container py-4">
    <div class="row">
      <div class="col p-4 text-center">
        <div class="d-flex justify-content-center">
          <h2 class="display-4 border border-white p-4 mb-4">WHO WE ARE</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col text-center">
        <amp-img src="/assets/uploads/logo-full.png" width="300" height="300" layout="fixed"
          alt="and another sample image"></amp-img>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-sm-10 col-md-8 p-4 text-center">
        <h3 class="text-center">
          Dental professionals with the mission to create an enjoyable &amp; efficient experience for you.
        </h3>
      </div>
    </div>
  </div>
</section>

<!-- Locations Section -->
<section class="px-0 bg-brand-secondary-dark">
  <div class="container">
    <div class="row">
      <div class="col p-4 text-center">
        <div class="d-flex justify-content-center">
          <h1 class="display-4 border border-white p-4 mb-4">LOCATIONS</h1>
        </div>
      </div>
    </div>
  </div>
  {% include locations.html %}
</section>