<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'home')}">
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>






  <body>

     
            
             <div id ="navbar-2" class="container-custom">
            
              <ul class="nav navbar-nav nav-collapse navbar-right">
                <li > <a href="#myCarousel" class="active">Photos</a> </li>
                <li > <a href="#portion2">About</a> </li>
                <li > <a href="#portion3">Features</a></li>
                <li > <a href="#portion4">Future</a></li>
              </ul>
            </div>
          

    <!-- This is a test for a picture car. -->


  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="../static/resources/images/doctor4.jpg" th:src="@{/resources/images/doctor4.jpg}" alt="Doctor" style="width:100%;">
      </div>

      <div class="item">
        <img src="../static/resources/images/doctor5.jpg" th:src="@{/resources/images/doctor5.jpg}" alt="Doctor" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="../static/resources/images/doctor3.jpg" th:src="@{/resources/images/doctor3.jpg}" alt="Doctor" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>




<div id= "portion2" class="portion two">
  <h2>Our Story</h2>
</div>

<div  class="info">
  <h3>Creation</h3>
  <p>KidClinic is a platform to simplify healthcare, not for insurance companies but for you: the cutomers and the doctors. We want to streamline how records are managed and simplify the process of managing pediatric health. KidClinic expediates the oft tedious process of permissions for managing a minor's health, organizing the records in an intuitive but archivable mainframe.</p>
  <div class="button">
    <a href="#">Example Button</a>
  </div>
</div>

<div class="portion five" id ="portion3">
  <h2>Features</h2>
</div>

<div class="info">
  <h3>Parents</h3>
  <p>The database we utilize allows doctors to safely, securely, search for parents in the system of their practice. Upon search, users are able to see the children, the actual patients, associated with the parent or guardian. This stores all family information in one area, easily compiling family history and a broader view of clinical practice. It is our hope this expediates care for both patients and doctors.

  </p>
  <h3>Doctors</h3>
  <p>KidClinic is a service for parents as well. All registered doctors, verified for quality and certification by us, appear on the doctor listing. Users can search by profession, speciality and history. With tools to filter and search, finding the right doctor for you and your kids has never been easier.

  </p> 
  
  <h3>Reviews</h3>
  <p>Here at KidClinic, we want to ensure quality care and incorporate facets from disparate sources. This includes an interactive review function, where you can directly review doctors and influence their appearance on the search feature. Your insight makes a difference for future care, directly, immediately.You can also see other's reviews and comments to facilitate your decisions on care.

  </p> 
  <div class="button">
    <a href="#">Example Button</a>
  </div>
</div>

<div class="portion four" id="portion4">
  <h2>The Future</h2>
</div>

<div  class="info">
  <h3>Our Vision</h3>
  <p>In the ever expanding and fickle internet era it is not enough to have a product. So we have crafted a vision forward, together, to revolutionize healthcare at your finger tips. This means integrating calendars, live notifications of appointment availability, and even mapping your needs. Integration can be scary and rightfully so. But we provide data for you and your family because frankly the current state of healthcare is unacceptable. This is a step in a multitude of miles to perfecting it.

  </p>
  <div class="button">
    <a href="#">To Top</a>
  </div>
</div>






















  </body>

</html>