<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/skeleton :: head">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="../static/css/bootstrap.min.css" rel="stylesheet" />
<link href="../static/css/mosh.css" rel="stylesheet" />
</head>
<body>
  <div th:replace="fragments/skeleton :: navigation">
    <div class="container">
      <nav>Navigation</nav>
    </div>
  </div>

  <div class="container marketing">

    <!-- START THE FEATURETTES -->

    <div class="row featurette">
      <div class="col-md-7">
        <h2 th:inline="text">
          [[#{features.headline1}]] <span class="text-muted">[[#{features.subheadline1}]]</span>
        </h2>
        <p class="lead">Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
          labore et dolore magna aliquyam erat, sed diam voluptua. At
          vero eos et accusam et justo duo dolores et ea rebum.</p>
        <p th:inline="text">
          [[#{general.sampleImage}]]: Aameerule. <span
            class="text-emphasized">Product Shoot.</span> CC BY 2.0
        </p>
      </div>
      <div class="col-md-5">
        <img class="img-responsive center-block"
          src="../static/images/aameerule-product_shoot-cc_by_2_0.jpg"
          th:src="@{/images/aameerule-product_shoot-cc_by_2_0.jpg}"
          alt="Generic placeholder image" />
      </div>
    </div>

    <hr />

    <div class="row featurette">
      <div class="col-md-7 col-md-push-5">
        <h2 th:inline="text">
          [[#{features.headline2}]] <span class="text-muted">[[#{features.subheadline2}]]</span>
        </h2>
        <p class="lead">Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
          amet, consetetur sadipscing elitr, sed diam nonumy eirmod
          tempor invidunt ut labore et dolore magna aliquyam erat, sed
          diam voluptua.</p>
        <p th:inline="text">
          [[#{general.sampleImage}]]: Jeremy Keith. <span
            class="text-emphasized">Fruit Pancakes And Tantek.</span> CC
          BY 2.0
        </p>
      </div>
      <div class="col-md-5 col-md-pull-7">
        <img class="img-responsive center-block"
          src="../static/images/jeremy_keith-fruit_pancakes_and_tantek-cc_by_2_0.jpg"
          th:src="@{/images/jeremy_keith-fruit_pancakes_and_tantek-cc_by_2_0.jpg}"
          alt="Generic placeholder image" />
      </div>
    </div>

    <hr />

    <div class="row featurette">
      <div class="col-md-7">
        <h2 th:inline="text">
          [[#{features.headline3}]] <span class="text-muted">[[#{features.subheadline3}]]</span>
        </h2>
        <p class="lead">At vero eos et accusam et justo duo dolores
          et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.</p>
        <p th:inline="text">
          [[#{general.sampleImage}]]: Greg Schechter. <span
            class="text-emphasized">Popsicle Fruit.</span> CC BY 2.0
        </p>
      </div>
      <div class="col-md-5">
        <img class="img-responsive center-block"
          src="../static/images/greg_schechter-popsicle_fruit-cc_by_2_0.jpg"
          th:src="@{/images/greg_schechter-popsicle_fruit-cc_by_2_0.jpg}"
          alt="Generic placeholder image" />
      </div>
    </div>

    <hr />

    <!-- /END THE FEATURETTES -->

    <div class="row">
      <div class="col-lg-4">
        <img class="img-circle"
          src="../static/images/kate_fisher-kiwi-cc_by_2_0-thumb.jpg"
          th:src="@{/images/kate_fisher-kiwi-cc_by_2_0-thumb.jpg}"
          alt="Generic placeholder image" width="140" height="140" />
        <h2 th:text="#{products.kiwis}">Kiwi</h2>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna
          mollis euismod. Nullam id dolor id nibh ultricies vehicula ut
          id elit. Morbi leo risus, porta ac consectetur ac, vestibulum
          at eros. Praesent commodo cursus magna.</p>
        <p th:inline="text">
          [[#{general.sampleImage}]]: Kate Fisher. <span
            class="text-emphasized">Kiwi.</span> CC BY 2.0
        </p>
        <p>
          <a class="btn btn-default" href="#" th:href="@{/products/__#{products.kiwis.prettyUrlFragment}__.html}"
            role="button" th:text="#{products.goto}">Go to product</a>
        </p>
      </div>
      <div class="col-lg-4">
        <img class="img-circle"
          src="../static/images/jennifer_c-blueberries-cc_by_2_0-thumb.jpg"
          th:src="@{/images/jennifer_c-blueberries-cc_by_2_0-thumb.jpg}"
          alt="Generic placeholder image" width="140" height="140" />
        <h2 th:text="#{products.blueberries}">Blueberries</h2>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor
          ligula, eget lacinia odio sem nec elit. Cras mattis
          consectetur purus sit amet fermentum. Fusce dapibus, tellus ac
          cursus commodo, tortor mauris condimentum nibh.</p>
        <p th:inline="text">
          [[#{general.sampleImage}]]: Jennifer C. <span
            class="text-emphasized">Blueberries.</span> CC BY 2.0
        </p>
        <p>
          <a class="btn btn-default" href="#" th:href="@{/products/__#{products.blueberries.prettyUrlFragment}__.html}"
            role="button" th:text="#{products.goto}">Go to product</a>
        </p>
      </div>
      <div class="col-lg-4">
        <img class="img-circle"
          src="../static/images/luke_jones-cherries-cc_by_2_0-thumb.jpg"
          th:src="@{/images/luke_jones-cherries-cc_by_2_0-thumb.jpg}"
          alt="Generic placeholder image" width="140" height="140" />
        <h2 th:text="#{products.cherries}">Cherries</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Vestibulum id ligula porta felis
          euismod semper. Fusce dapibus, tellus ac cursus commodo,
          tortor mauris condimentum nibh, ut fermentum massa justo sit
          amet risus.</p>
        <p th:inline="text">
          [[#{general.sampleImage}]]: Luke Jones. <span
            class="text-emphasized">Cherries.</span> CC BY 2.0
        </p>
        <p>
          <a class="btn btn-default" href="#" th:href="@{/products/__#{products.cherries.prettyUrlFragment}__.html}"
            role="button" th:text="#{products.goto}">Go to product</a>
        </p>
      </div>
    </div>

    <hr />

    <footer th:replace="fragments/skeleton :: footer">
      <p>&copy; 2017</p>
    </footer>

  </div>

  <script src="../static/js/jquery-3.1.1.min.js"
    th:src="@{/js/jquery-3.1.1.min.js}"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="../static/js/bootstrap.min.js"
    th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html>