juplo.de Git - website/blob - dist/templates/fragments.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
   3   <head>
   4     <title>Fragments</title>
   5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   6     <link rel="stylesheet" type="text/css" href="../css/base.css"/>
   7     <link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen"/>
   8     <link rel="stylesheet" type="text/css" href="../css/print.css" media="print"/>
   9   </head>
  10   <body>
  11     <h1>Explanation fo the german word "Impressum"</h1>
  12     <hr />
  13     <aside class="m" th:fragment="about">
  14       <h1>What the f*#!@ is an <em>Impressum</em> ?!?</h1>
  15       The german law enforces the so called <em>Impressum</em> to enable
  16       customers to easily find out all juristically relevant informations
  17       about the company, that rules a site.
  18       <h1>Find out more...</h1>
  19       If you just want to learn more about juplo you should better
  20       <a href="../about.html" th:href="@{/about.html}" title="Learn more about juplo now">visit our about-pages</a>.
  21     </aside>
  22     <hr />
  23     <h1>Work-in-progress-hint</h1>
  24     <hr />
  25     <article class="main" layout:fragment="wip(title)">
  26       <header><h1 th:text="${title}">PAGE-TITLE</h1></header>
  27       <div class="wip" th:fragment="wip">
  28         <img class="w" src="/img/comming-soon.png" alt="Comming soon..."/>
  29         <p th:include="templates/layout :: maincontent" th:remove="tag">
  30           PAGE-CONTENT
  31         </p>
  32       </div>
  33     </article>
  34     <hr />
  35     <h1>Marginalspalte</h1>
  36     <hr />
  37     <div th:fragment="marginalcontent" th:remove="tag">
  38       <aside class="m">
  39         <h1>Other nasty but marginal stuff</h1>
  40         <p>
  41           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  42           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
  43           ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  44           aliquip ex ea commodo consequat. Duis aute irure dolor in
  45           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  46           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
  47           culpa qui officia deserunt mollit anim id est laborum.
  48         </p>
  49       </aside>
  50       <aside class="m">
  51         <h1>More nasty stuff</h1>
  52         <p>
  53           This one is really short!
  54         </p>
  55       </aside>
  56     </div>
  57     <hr />
  58   </body>
  59 </html>