<h2 class="nav menu">Section-Menu</h2>
<ul id="menu" class="cf">
<li class="m blog"><a href="blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
- <li class="m projects"><a href="projects" th:href="@{/projects.html}" class="m">Projects</a></li>
+ <li class="m projects"><a href="potemkin.html" th:href="@{/potemkin.html}" class="m">Projects</a></li>
<li class="m about"><a href="about.html" th:href="@{/about.html}" class="m">About</a></li>
</ul>
</nav>
<h1>hibernate4-maven-plugin</h1>
<p>
<strong>Lorem ipsum</strong> dolor
- <a href="projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
+ <a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- <a href="projects/html-experimente.html" th:href="@{/projects/html-experimente.html}">exercitation</a>
+ <a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Projects', uri='/potemkin.html'"
+ >
+ <head>
+ <title>Projects - Potemkinsche Dörfer!</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ <script src="js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <h1>Projects - Potemkinsche Dörfer!</h1>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Fix SWF - Getting Started', uri='/potemkin/fix-swf/getting-started.html'"
+ >
+ <head>
+ <title>Fix SWF - Getting Started</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <h1>Getting Started - DUMMY</h1>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Fix SWF - Overview', uri='/potemkin/fix-swf/overview.html'"
+ >
+ <head>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>Fix SWF - Overview</title>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <h1>Overview - DUMMY</h1>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="uri='/potemkin/html-experimente.html'"
+ >
+ <head>
+ <title>HTML-Experimente</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
+ <ul>
+ <li><a href="html-experimente/formulare.html" th:href="@{/potemkin/html-experimente/formulare.html}">Formulare</a></li>
+ <li><a href="html-experimente/symbole.html" th:href="@{/potemkin/html-experimente/symbole.html}">Symbol-Font</a></li>
+ <li><a href="../templates/404.html" th:href="@{/404.html}">404-Template</a></li>
+ <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/potemkin/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
+ <li><a href="../templates/error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
+ <li><a href="html-experimente/error.html" th:href="@{/potemkin/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
+ </ul>
+ <h2>Layout-Grenzfälle</h2>
+ <ul>
+ <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
+ <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
+ <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
+ <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
+ <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
+ <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
+ <li><a href="html-experimente/breadcrumb.html" th:href="@{/potemkin/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
+ </ul>
+ <h2>Layout-Variationen</h2>
+ <ul>
+ <li><a href="html-experimente/kein-layout.html" th:href="@{/potemkin/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
+ <li><a href="html-experimente/basis-layout.html" th:href="@{/potemkin/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
+ <li><a href="html-experimente/druck-layout.html" th:href="@{/potemkin/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
+ <li><a href="html-experimente/tiny.html" th:href="@{/potemkin/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
+ <li><a href="html-experimente/phone.html" th:href="@{/potemkin/html-experimente/phone.html}">Layout für Smartphones</a></li>
+ <li><a href="html-experimente/tablet.html" th:href="@{/potemkin/html-experimente/tablet.html}">Layout für Tablets</a></li>
+ </ul>
+ <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+ <ul>
+ <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/potemkin/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+ <li><a href="html-experimente/seitenkopf.html" th:href="@{/potemkin/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
+ </ul>
+ <h2>Anderer Krams...</h2>
+ <ul>
+ <li><a href="html-experimente/testlab.html" th:href="@{/potemkin/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
+ </ul>
+ </article>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Nur das Basis-Layout', uri='/potemkin/html-experimente/basis-layout.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Basis-Layout</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/base.less" th:href="@{/css/base.min.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Seite mit sehr langem Breadcrumb', uri='/potemkin/html-experimente/breadcrumb.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Langer Breadcrumb</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <ol layout:fragment="breadcrumb">
+ <li class="b"><a class="b" href="../../index.html" th:href="@{/index.html}">Home</a></li>
+ <li class="b"><a class="b" href="../../potemkin.html" th:href="@{/potemkin.html}">Projects</a></li>
+ <li class="b"><a class="b" href="../html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+ <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
+ </ol>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Die für den Ausdruck angepasste Ansicht', uri='/potemkin/html-experimente/druck-layout.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Druck-Layout</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/print.css" th:href="@{/css/print.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ >
+ <head>
+ <title>This Page Will Raise An Error</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
+ </head>
+ <body>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="contentclass='onecolumn', uri='/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <nav layout:fragment="navigation">
+ <hr class="n"/>
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+ <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+ <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+ </ul>
+ </nav>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
+ <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+ </article>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="contentclass='onecolumn', uri='/potemkin/html-experimente/fast-leer-einspaltig.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Fast leere einspaltige Seite</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <nav layout:fragment="navigation">
+ <hr class="n"/>
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+ <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+ <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+ </ul>
+ </nav>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Fast leere einspaltige Seite</h1></header>
+ <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+ </article>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="contentclass='nomenu', uri='/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <nav layout:fragment="navigation">
+ <hr class="n"/>
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+ <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+ <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+ </ul>
+ </nav>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="contentclass='nomenu', uri='/potemkin/html-experimente/fast-leer-kein-menü.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Fast leere Seite ohne Menü</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <nav layout:fragment="navigation">
+ <hr class="n"/>
+ <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+ <h1 class="nav">Navigation</h1>
+ <h2 class="nav menu">Section-Menu</h2>
+ <ul id="menu" class="cf">
+ <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
+ <li class="m projects"><a href="../../potemkin.html" th:href="@{/potemkin.html}" class="m selected">Projects</a></li>
+ <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
+ </ul>
+ </nav>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Fast leere Seite ohne Menü</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with=", uri='/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with=", uri='/potemkin/html-experimente/fast-leer-mit-menü.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Fast leere Seite mit Menü</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Fast leere Seite mit Menü</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="uri='/potemkin/html-experimente/formulare.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Formulare</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Formulare</h1></header>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Anzeigetext</h2>
+ <div class="f textarea">
+ <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+ <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+ </div>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Textformatierung</h2>
+ <fieldset class="f radiobutton cf">
+ <legend class="f info">
+ Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
+ Online erscheint die Anzeige als normaler Fließtext.
+ </legend>
+ <hr class="f" />
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_02">Text zentriert</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_04">Text fett</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_05">Text fett und rot</label>
+ </div>
+ </div>
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Einspaltige Radiobuttons...</h2>
+ <fieldset class="f radiobutton">
+ <div class="f">
+ <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_b02">Option X</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+ </div>
+ </fieldset>
+ <hr class="f" />
+ <div class="f submit">
+ <input class="f" type="submit" value="> zur Übersicht" />
+ <input class="f left" type="submit" value="< zurück" />
+ <input class="f" type="submit" value="> weiter" />
+ </div>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Bild</h2>
+ <fieldset class="f checkbox">
+ <legend class="f">
+ Du kannst Deiner Anzeige ein Bild hinzufügen.
+ Das Bild erscheint nur online.
+ Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+ </legend>
+ <hr class="f" />
+ <div class="f">
+ <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
+ <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ <div class="f">
+ <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
+ <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+ </div>
+ </fieldset>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Alleinstehende Checkbox</h2>
+ <div class="f checkbox">
+ <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
+ <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Kundendaten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
+ <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_02" class="f">Vorname</label>
+ <input class="f" id="text_tbox_02" type="text" value="Max" />
+ </div>
+ <div class="f select required">
+ <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
+ <select class="f" id="text_tbox_03">
+ <option>Dortmund</option>
+ <option>Bochum</option>
+ <option>Essen</option>
+ <option>Mönchengladbach</option>
+ <option>Oberhausen</option>
+ <option>Castrop-Rauxel</option>
+ <option>Düsseldorf</option>
+ </select>
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
+ <input class="f error" id="text_tbox_04" type="text" value="" />
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
+ <input class="f" id="text_tbox_05" type="text" value="" />
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_06" class="f">Telefon</label>
+ <input class="f" id="text_tbox_06" type="text" value="" />
+ </div>
+ <hr class="f" />
+ <div class="f submit">
+ <input class="f" type="submit" value="> weiter" />
+ </div>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Anzeige regionalisieren</h2>
+ <p class="f">
+ Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+ diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+ bestimmten Städten suchen.
+ Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+ diesen Interessenten aber auch nicht gefunden.
+ </p>
+ <hr class="f" />
+ <div class="f text">
+ <label class="f" for="city">Stadt</label>
+ <input id="city" type="text" class="f" />
+ <p class="f info">
+ Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+ </p>
+ </div>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+ <div class="f text required">
+ <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
+ <input class="f" id="text_tbox_05" type="password" value="t" />
+ </div>
+ </form>
+ <form class="form" action="#" method="get">
+ <h2 class="f">Lade das Bild hoch</h2>
+ <p class="f info">
+ Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+ Das Bild darf nicht größer als 8 MByte sein.
+ </p>
+ <div class="f file required">
+ <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
+ <input class="f" id="file_tbox_01" type="file" />
+ </div>
+ <hr class="f" />
+ <div class="f submit">
+ <input class="f" type="submit" value="> Doch kein Bild" />
+ <input class="f" type="submit" value="> Bild hochladen" />
+ </div>
+ </form>
+ <div class="form">
+ <h2 class="f">Antworten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+ <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
+ </div>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+ <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
+ </div>
+ <div class="f text required">
+ <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+ <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
+ </div>
+ <div class="f textarea required">
+ <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+ <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
+ </div>
+ <div class="f checkbox">
+ <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
+ <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+ </div>
+ <div class="f checkbox">
+ <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
+ <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+ </div>
+ </div>
+ <div class="form cf">
+ <div class="col2 left">
+ <h2 class="f">Weiter mit Anmeldung</h2>
+ <div class="f text">
+ <label class="f" for="username">Benutzername</label>
+ <input class="f" name="username" id="username" type="text" tabindex="6" />
+ </div>
+ <div class="f text">
+ <label class="f" for="password">Passwort</label>
+ <input class="f" name="password" id="password" type="password" tabindex="7" />
+ </div>
+ </div>
+ <div class="col2 right">
+ <h2 class="f">Weiter ohne Anmeldung</h2>
+ <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+ <div class="f captcha cf">
+ <span class="f">Was steht da?</span>
+ <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
+ </div>
+ <div class="f text">
+ <label class="f" for="captcha">Lösung</label>
+ <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
+ </div>
+ </div>
+ </div>
+ </article>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Alle Stylings deaktiviert', uri='/potemkin/html-experimente/kein-layout.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Kein Layout</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Layout für Smartphones', uri='/potemkin/html-experimente/phone.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Layout PHONE</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/potemkin/html-experimente/seitenaufteilung.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Basis-Layout & Seitenaufteilung</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenaufteilung.css" th:href="@{/css/seitenaufteilung.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/potemkin/html-experimente/seitenkopf.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Basis-Layout & Seitenkopf</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenkopf.css" th:href="@{/css/seitenkopf.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="uri='/potemkin/html-experimente/symbole.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Symbol-Font</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <article class="main" layout:fragment="maincontent">
+ <header><h1>Symbol-Font</h1></header>
+ <h2>100%</h2>
+ <div class="symbols">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>200%</h2>
+ <div class="symbols" style="font-size: 200%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>300%</h2>
+ <div class="symbols" style="font-size: 300%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>400%</h2>
+ <div class="symbols" style="font-size: 400%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ <h2>500%</h2>
+ <div class="symbols" style="font-size: 500%; line-height: 1.5em">
+ <span class="e600"></span>
+ <span class="e601"></span>
+ <span class="e602"></span>
+ <span class="e603"></span>
+ <span class="e604"></span>
+ <span class="e605"></span>
+ <span class="e606"></span>
+ <span class="e607"></span>
+ <span class="e608"></span>
+ <span class="e609"></span>
+ <span class="e60a"></span>
+ <span class="e60b"></span>
+ <span class="e60c"></span>
+ <span class="e60d"></span>
+ <span class="e60e"></span>
+ <span class="e60f"></span>
+ <span class="e610"></span>
+ <span class="e611"></span>
+ <span class="e612"></span>
+ <span class="e613"></span>
+ <span class="e614"></span>
+ <span class="e615"></span>
+ <span class="e616"></span>
+ <span class="e617"></span>
+ <span class="e618"></span>
+ <span class="e619"></span>
+ <span class="e61a"></span>
+ <span class="e61b"></span>
+ <span class="e61c"></span>
+ <span class="e61d"></span>
+ <span class="e61e"></span>
+ <span class="e61f"></span>
+ <span class="e620"></span>
+ <span class="e621"></span>
+ <span class="e622"></span>
+ <span class="e623"></span>
+ <span class="e624"></span>
+ <span class="e625"></span>
+ <span class="e626"></span>
+ <span class="e627"></span>
+ <span class="e628"></span>
+ <span class="e629"></span>
+ <span class="e62a"></span>
+ <span class="e62b"></span>
+ <span class="e62c"></span>
+ <span class="e62d"></span>
+ <span class="e62e"></span>
+ <span class="e62f"></span>
+ <span class="e630"></span>
+ <span class="e631"></span>
+ <span class="e632"></span>
+ <span class="e633"></span>
+ <span class="e634"></span>
+ <span class="e635"></span>
+ <span class="e636"></span>
+ <span class="e637"></span>
+ <span class="e638"></span>
+ <span class="e639"></span>
+ <span class="e63a"></span>
+ <span class="e63b"></span>
+ <span class="e63c"></span>
+ <span class="e63d"></span>
+ <span class="e63e"></span>
+ <span class="e63f"></span>
+ <span class="e640"></span>
+ <span class="e641"></span>
+ <span class="e642"></span>
+ <span class="e643"></span>
+ <span class="e644"></span>
+ <span class="e645"></span>
+ <span class="e646"></span>
+ <span class="e647"></span>
+ <span class="e648"></span>
+ <span class="e649"></span>
+ <span class="e64a"></span>
+ <span class="e64b"></span>
+ </div>
+ </article>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Layout für Tablets', uri='/potemkin/html-experimente/tablet.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Layout TABLET</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/testlab"
+ th:with="title='Media-Query-Test: BEISPIEL', uri='/potemkin/html-experimente/testlab.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body>
+ <div layout:fragment="content" th:remove="tag">
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Anzeigetext</h2>
+ <div class="f textarea">
+ <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+ <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+ </div>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Textformatierung</h2>
+ <fieldset class="f radiobutton cf">
+ <legend class="f info">
+ Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
+ Online erscheint die Anzeige als normaler Fließtext.
+ </legend>
+ <hr class="f" />
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_02">Text zentriert</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_04">Text fett</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_05">Text fett und rot</label>
+ </div>
+ </div>
+ <div class="col2">
+ <div class="f">
+ <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Einspaltige Radiobuttons...</h2>
+ <fieldset class="f radiobutton">
+ <div class="f">
+ <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_b02">Option X</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
+ <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+ </div>
+ </fieldset>
+ <hr class="f" />
+ <div class="f submit">
+ <input class="f" type="submit" value="> zur Übersicht" />
+ <input class="f left" type="submit" value="< zurück" />
+ <input class="f" type="submit" value="> weiter" />
+ </div>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Bild</h2>
+ <fieldset class="f checkbox">
+ <legend class="f">
+ Du kannst Deiner Anzeige ein Bild hinzufügen.
+ Das Bild erscheint nur online.
+ Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+ </legend>
+ <hr class="f" />
+ <div class="f">
+ <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
+ <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ <div class="f">
+ <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
+ <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+ </div>
+ </fieldset>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Alleinstehende Checkbox</h2>
+ <div class="f checkbox">
+ <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
+ <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Kundendaten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
+ <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_02" class="f">Vorname</label>
+ <input class="f" id="text_tbox_02" type="text" value="Max" />
+ </div>
+ <div class="f select required">
+ <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
+ <select class="f" id="text_tbox_03">
+ <option>Dortmund</option>
+ <option>Bochum</option>
+ <option>Essen</option>
+ <option>Mönchengladbach</option>
+ <option>Oberhausen</option>
+ <option>Castrop-Rauxel</option>
+ <option>Düsseldorf</option>
+ </select>
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
+ <input class="f error" id="text_tbox_04" type="text" value="" />
+ <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
+ <input class="f" id="text_tbox_05" type="text" value="" />
+ </div>
+ <div class="f text required">
+ <label for="text_tbox_06" class="f">Telefon</label>
+ <input class="f" id="text_tbox_06" type="text" value="" />
+ </div>
+ <hr class="f" />
+ <div class="f submit">
+ <input class="f" type="submit" value="> weiter" />
+ </div>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Anzeige regionalisieren</h2>
+ <p class="f">
+ Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+ diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+ bestimmten Städten suchen.
+ Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+ diesen Interessenten aber auch nicht gefunden.
+ </p>
+ <hr class="f" />
+ <div class="f text">
+ <label class="f" for="city">Stadt</label>
+ <input id="city" type="text" class="f" />
+ <p class="f info">
+ Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+ </p>
+ </div>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+ <div class="f text required">
+ <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
+ <input class="f" id="text_tbox_05" type="password" value="t" />
+ </div>
+ </form>
+ <form class="testlab form" action="#" method="get">
+ <h2 class="f">Lade das Bild hoch</h2>
+ <p class="f info">
+ Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+ Das Bild darf nicht größer als 8 MByte sein.
+ </p>
+ <div class="f file required">
+ <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
+ <input class="f" id="file_tbox_01" type="file" />
+ </div>
+ <hr class="f" />
+ <div class="f submit">
+ <input class="f" type="submit" value="> Doch kein Bild" />
+ <input class="f" type="submit" value="> Bild hochladen" />
+ </div>
+ </form>
+ <div class="testlab form">
+ <h2 class="f">Antworten</h2>
+ <p class="f required">
+ <strong class="r">Pflichtfelder</strong> sind mit einem
+ <strong class="r symbol">*</strong> markiert.
+ </p>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+ <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
+ </div>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+ <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
+ </div>
+ <div class="f text required">
+ <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+ <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
+ </div>
+ <div class="f textarea required">
+ <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+ <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
+ </div>
+ <div class="f checkbox">
+ <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
+ <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+ </div>
+ <div class="f checkbox">
+ <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
+ <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+ </div>
+ </div>
+ <div class="testlab form cf">
+ <div class="col2 left">
+ <h2 class="f">Weiter mit Anmeldung</h2>
+ <div class="f text">
+ <label class="f" for="username">Benutzername</label>
+ <input class="f" name="username" id="username" type="text" tabindex="6" />
+ </div>
+ <div class="f text">
+ <label class="f" for="password">Passwort</label>
+ <input class="f" name="password" id="password" type="password" tabindex="7" />
+ </div>
+ </div>
+ <div class="col2 right">
+ <h2 class="f">Weiter ohne Anmeldung</h2>
+ <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+ <div class="f captcha cf">
+ <span class="f">Was steht da?</span>
+ <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
+ </div>
+ <div class="f text">
+ <label class="f" for="captcha">Lösung</label>
+ <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="title='Layout für sehr kleine Bildschirmgrößen', uri='/potemkin/html-experimente/tiny.html'"
+ >
+ <head layout:fragment="head">
+ <title>HTML-Experimente - Layout TINY</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
+ <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.css}"/>
+ <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
+ </head>
+ <body>
+ <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
+ </body>
+</html>
--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ layout:decorator="templates/layout"
+ th:with="uri='/potemkin/typo.html'"
+ >
+ <head>
+ <title>Typography</title>
+ <!--/*-->
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
+ <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
+ <script src="../js/less-1.7.0.min.js"></script>
+ <!--*/-->
+ </head>
+ <body onload="prettyPrint()">
+ <article layout:fragment="maincontent">
+ <header><h1>Typography</h1></header>
+ <p>
+ Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit,
+ sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud
+ <a href="#dort">exercitation</a> ullamco laboris nisi ut aliquip
+ <em>ex ea</em> commodo consequat. Duis aute irure dolor in reprehenderit
+ in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ <strong>Excepteur sint <em>occaecat</em> cupidatat non proident</strong>,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h2>Ein Link <a href="#link">im Titel</a></h2>
+ <p>Ein Link <a href="#link">im Text</a>.</p>
+ <h2>Normal / Italic / Bold / Bold+Italic</h2>
+ <ul>
+ <li>normal</li>
+ <li><em>italic</em></li>
+ <li><strong>bold</strong></li>
+ <li><strong><em>bold italic</em></strong></li>
+ </ul>
+ <p>
+ ÄäÖöÜüß@€¢
+ <strong>ÄäÖöÜüß@€¢</strong>
+ <em>ÄäÖöÜüß@€¢</em>
+ <strong><em>ÄäÖöÜüß@€¢</em></strong>
+ </p>
+ <h1>H1: Heading</h1>
+ <h2>H2: Heading</h2>
+ <h3>H3: Heading</h3>
+ <h4>H4: Heading</h4>
+ <h1>H1: Heading</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h2>H2: Heading</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h3>H3: Heading</h3>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h4>H4: Heading</h4>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ <h1>Preformatted code</h1>
+ <p>
+ <em>Juplo Branding</em> uses
+ <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" title="Visit prettify's README">google-code-prettify</a> for automatic
+ syntax highlighting.
+ </p>
+ <pre class="prettyprint linenums"><code class="language-xml"><plugin>
+ <groupId>ro.isdc.wro4j</groupId>
+ <artifactId>wro4j-maven-plugin</artifactId>
+ <version>${wro4j.version}</version>
+ <configuration>
+ <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
+ <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/css/</cssDestinationFolder>
+ </configuration>
+ <executions>
+ <execution>
+ <phase>package</phase>
+ <goals>
+ <goal>run</goal>
+ </goals>
+ </execution>
+ </executions>
+</plugin>
+</code></pre>
+ </article>
+ </body>
+</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Fix SWF - Getting Started', uri='/projects/fix-swf/getting-started.html'"
- >
- <head>
- <title>Fix SWF - Getting Started</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <h1>Getting Started - DUMMY</h1>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Fix SWF - Overview', uri='/projects/fix-swf/overview.html'"
- >
- <head>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Fix SWF - Overview</title>
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <h1>Overview - DUMMY</h1>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="uri='/projects/html-experimente.html'"
- >
- <head>
- <title>HTML-Experimente</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
- <script src="../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <article class="main" layout:fragment="maincontent">
- <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
- <ul>
- <li><a href="html-experimente/formulare.html" th:href="@{/projects/html-experimente/formulare.html}">Formulare</a></li>
- <li><a href="html-experimente/symbole.html" th:href="@{/projects/html-experimente/symbole.html}">Symbol-Font</a></li>
- <li><a href="../templates/404.html" th:href="@{/404.html}">404-Template</a></li>
- <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/projects/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
- <li><a href="../templates/error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
- <li><a href="html-experimente/error.html" th:href="@{/projects/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
- </ul>
- <h2>Layout-Grenzfälle</h2>
- <ul>
- <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
- <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
- <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
- <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
- <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
- <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
- <li><a href="html-experimente/breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
- </ul>
- <h2>Layout-Variationen</h2>
- <ul>
- <li><a href="html-experimente/kein-layout.html" th:href="@{/projects/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
- <li><a href="html-experimente/basis-layout.html" th:href="@{/projects/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
- <li><a href="html-experimente/druck-layout.html" th:href="@{/projects/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
- <li><a href="html-experimente/tiny.html" th:href="@{/projects/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
- <li><a href="html-experimente/phone.html" th:href="@{/projects/html-experimente/phone.html}">Layout für Smartphones</a></li>
- <li><a href="html-experimente/tablet.html" th:href="@{/projects/html-experimente/tablet.html}">Layout für Tablets</a></li>
- </ul>
- <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
- <ul>
- <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/projects/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
- <li><a href="html-experimente/seitenkopf.html" th:href="@{/projects/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
- </ul>
- <h2>Anderer Krams...</h2>
- <ul>
- <li><a href="html-experimente/testlab.html" th:href="@{/projects/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
- </ul>
- </article>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Nur das Basis-Layout', uri='/projects/html-experimente/basis-layout.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Basis-Layout</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/base.less" th:href="@{/css/base.min.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Seite mit sehr langem Breadcrumb', uri='/projects/html-experimente/breadcrumb.html'"
- >
- <head>
- <title>HTML-Experimente - Langer Breadcrumb</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <ol layout:fragment="breadcrumb">
- <li class="b"><a class="b" href="../../index.html" th:href="@{/index.html}">Home</a></li>
- <li class="b"><a class="b" href="../../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="b"><a class="b" href="../html-experimente.html" th:href="@{/projects/html-experimente.html}">HTML-Experimente</a></li>
- <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
- </ol>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Die für den Ausdruck angepasste Ansicht', uri='/projects/html-experimente/druck-layout.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Druck-Layout</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/print.css" th:href="@{/css/print.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- >
- <head>
- <title>This Page Will Raise An Error</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
- </head>
- <body>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="contentclass='onecolumn', uri='/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html'"
- >
- <head>
- <title>HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <nav layout:fragment="navigation">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
- <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
- <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
- </ul>
- </nav>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
- <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
- </article>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="contentclass='onecolumn', uri='/projects/html-experimente/fast-leer-einspaltig.html'"
- >
- <head>
- <title>HTML-Experimente - Fast leere einspaltige Seite</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <nav layout:fragment="navigation">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
- <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
- <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
- </ul>
- </nav>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Fast leere einspaltige Seite</h1></header>
- <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
- </article>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="contentclass='nomenu', uri='/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html'"
- >
- <head>
- <title>HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <nav layout:fragment="navigation">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
- <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
- <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
- </ul>
- </nav>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="contentclass='nomenu', uri='/projects/html-experimente/fast-leer-kein-menü.html'"
- >
- <head>
- <title>HTML-Experimente - Fast leere Seite ohne Menü</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <nav layout:fragment="navigation">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- <li class="m blog"><a href="../../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
- <li class="m projects"><a href="../../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
- <li class="m about"><a href="../../about.html" th:href="@{/about.html}" class="m">About</a></li>
- </ul>
- </nav>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Fast leere Seite ohne Menü</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with=", uri='/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html'"
- >
- <head>
- <title>HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with=", uri='/projects/html-experimente/fast-leer-mit-menü.html'"
- >
- <head>
- <title>HTML-Experimente - Fast leere Seite mit Menü</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Fast leere Seite mit Menü</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="uri='/projects/html-experimente/formulare.html'"
- >
- <head>
- <title>HTML-Experimente - Formulare</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Formulare</h1></header>
- <form class="form" action="#" method="get">
- <h2 class="f">Anzeigetext</h2>
- <div class="f textarea">
- <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
- <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
- </div>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Textformatierung</h2>
- <fieldset class="f radiobutton cf">
- <legend class="f info">
- Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
- Online erscheint die Anzeige als normaler Fließtext.
- </legend>
- <hr class="f" />
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_01">normaler Fließtext</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_02">Text zentriert</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_04">Text fett</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_05">Text fett und rot</label>
- </div>
- </div>
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
- </div>
- </div>
- </fieldset>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Einspaltige Radiobuttons...</h2>
- <fieldset class="f radiobutton">
- <div class="f">
- <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_b02">Option X</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
- </div>
- </fieldset>
- <hr class="f" />
- <div class="f submit">
- <input class="f" type="submit" value="> zur Übersicht" />
- <input class="f left" type="submit" value="< zurück" />
- <input class="f" type="submit" value="> weiter" />
- </div>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Bild</h2>
- <fieldset class="f checkbox">
- <legend class="f">
- Du kannst Deiner Anzeige ein Bild hinzufügen.
- Das Bild erscheint nur online.
- Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
- </legend>
- <hr class="f" />
- <div class="f">
- <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
- <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- <div class="f">
- <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
- <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
- </div>
- </fieldset>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Alleinstehende Checkbox</h2>
- <div class="f checkbox">
- <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
- <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Kundendaten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
- <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
- </div>
- <div class="f text required">
- <label for="text_tbox_02" class="f">Vorname</label>
- <input class="f" id="text_tbox_02" type="text" value="Max" />
- </div>
- <div class="f select required">
- <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
- <select class="f" id="text_tbox_03">
- <option>Dortmund</option>
- <option>Bochum</option>
- <option>Essen</option>
- <option>Mönchengladbach</option>
- <option>Oberhausen</option>
- <option>Castrop-Rauxel</option>
- <option>Düsseldorf</option>
- </select>
- </div>
- <div class="f text required">
- <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
- <input class="f error" id="text_tbox_04" type="text" value="" />
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
- </div>
- <div class="f text required">
- <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
- <input class="f" id="text_tbox_05" type="text" value="" />
- </div>
- <div class="f text required">
- <label for="text_tbox_06" class="f">Telefon</label>
- <input class="f" id="text_tbox_06" type="text" value="" />
- </div>
- <hr class="f" />
- <div class="f submit">
- <input class="f" type="submit" value="> weiter" />
- </div>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Anzeige regionalisieren</h2>
- <p class="f">
- Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
- diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
- bestimmten Städten suchen.
- Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
- diesen Interessenten aber auch nicht gefunden.
- </p>
- <hr class="f" />
- <div class="f text">
- <label class="f" for="city">Stadt</label>
- <input id="city" type="text" class="f" />
- <p class="f info">
- Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
- </p>
- </div>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
- <div class="f text required">
- <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
- <input class="f" id="text_tbox_05" type="password" value="t" />
- </div>
- </form>
- <form class="form" action="#" method="get">
- <h2 class="f">Lade das Bild hoch</h2>
- <p class="f info">
- Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
- Das Bild darf nicht größer als 8 MByte sein.
- </p>
- <div class="f file required">
- <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
- <input class="f" id="file_tbox_01" type="file" />
- </div>
- <hr class="f" />
- <div class="f submit">
- <input class="f" type="submit" value="> Doch kein Bild" />
- <input class="f" type="submit" value="> Bild hochladen" />
- </div>
- </form>
- <div class="form">
- <h2 class="f">Antworten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
- <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
- </div>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
- <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
- </div>
- <div class="f text required">
- <label class="f" for="subject"><span class="required">*</span> Betreff</label>
- <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
- </div>
- <div class="f textarea required">
- <label class="f" for="text"><span class="required">*</span> Nachricht</label>
- <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
- </div>
- <div class="f checkbox">
- <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
- <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
- </div>
- <div class="f checkbox">
- <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
- <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
- </div>
- </div>
- <div class="form cf">
- <div class="col2 left">
- <h2 class="f">Weiter mit Anmeldung</h2>
- <div class="f text">
- <label class="f" for="username">Benutzername</label>
- <input class="f" name="username" id="username" type="text" tabindex="6" />
- </div>
- <div class="f text">
- <label class="f" for="password">Passwort</label>
- <input class="f" name="password" id="password" type="password" tabindex="7" />
- </div>
- </div>
- <div class="col2 right">
- <h2 class="f">Weiter ohne Anmeldung</h2>
- <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
- <div class="f captcha cf">
- <span class="f">Was steht da?</span>
- <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
- </div>
- <div class="f text">
- <label class="f" for="captcha">Lösung</label>
- <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
- </div>
- </div>
- </div>
- </article>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Alle Stylings deaktiviert', uri='/projects/html-experimente/kein-layout.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Kein Layout</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Layout für Smartphones', uri='/projects/html-experimente/phone.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Layout PHONE</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/phone.css" th:href="@{/css/phone.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/projects/html-experimente/seitenaufteilung.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Basis-Layout & Seitenaufteilung</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenaufteilung.css" th:href="@{/css/seitenaufteilung.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Nur das Basis-Layout und die Seitenaufteiltung', uri='/projects/html-experimente/seitenkopf.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Basis-Layout & Seitenkopf</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/seitenkopf.css" th:href="@{/css/seitenkopf.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="uri='/projects/html-experimente/symbole.html'"
- >
- <head>
- <title>HTML-Experimente - Symbol-Font</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Symbol-Font</h1></header>
- <h2>100%</h2>
- <div class="symbols">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>200%</h2>
- <div class="symbols" style="font-size: 200%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>300%</h2>
- <div class="symbols" style="font-size: 300%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>400%</h2>
- <div class="symbols" style="font-size: 400%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- <h2>500%</h2>
- <div class="symbols" style="font-size: 500%; line-height: 1.5em">
- <span class="e600"></span>
- <span class="e601"></span>
- <span class="e602"></span>
- <span class="e603"></span>
- <span class="e604"></span>
- <span class="e605"></span>
- <span class="e606"></span>
- <span class="e607"></span>
- <span class="e608"></span>
- <span class="e609"></span>
- <span class="e60a"></span>
- <span class="e60b"></span>
- <span class="e60c"></span>
- <span class="e60d"></span>
- <span class="e60e"></span>
- <span class="e60f"></span>
- <span class="e610"></span>
- <span class="e611"></span>
- <span class="e612"></span>
- <span class="e613"></span>
- <span class="e614"></span>
- <span class="e615"></span>
- <span class="e616"></span>
- <span class="e617"></span>
- <span class="e618"></span>
- <span class="e619"></span>
- <span class="e61a"></span>
- <span class="e61b"></span>
- <span class="e61c"></span>
- <span class="e61d"></span>
- <span class="e61e"></span>
- <span class="e61f"></span>
- <span class="e620"></span>
- <span class="e621"></span>
- <span class="e622"></span>
- <span class="e623"></span>
- <span class="e624"></span>
- <span class="e625"></span>
- <span class="e626"></span>
- <span class="e627"></span>
- <span class="e628"></span>
- <span class="e629"></span>
- <span class="e62a"></span>
- <span class="e62b"></span>
- <span class="e62c"></span>
- <span class="e62d"></span>
- <span class="e62e"></span>
- <span class="e62f"></span>
- <span class="e630"></span>
- <span class="e631"></span>
- <span class="e632"></span>
- <span class="e633"></span>
- <span class="e634"></span>
- <span class="e635"></span>
- <span class="e636"></span>
- <span class="e637"></span>
- <span class="e638"></span>
- <span class="e639"></span>
- <span class="e63a"></span>
- <span class="e63b"></span>
- <span class="e63c"></span>
- <span class="e63d"></span>
- <span class="e63e"></span>
- <span class="e63f"></span>
- <span class="e640"></span>
- <span class="e641"></span>
- <span class="e642"></span>
- <span class="e643"></span>
- <span class="e644"></span>
- <span class="e645"></span>
- <span class="e646"></span>
- <span class="e647"></span>
- <span class="e648"></span>
- <span class="e649"></span>
- <span class="e64a"></span>
- <span class="e64b"></span>
- </div>
- </article>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Layout für Tablets', uri='/projects/html-experimente/tablet.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Layout TABLET</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tablet.css" th:href="@{/css/tablet.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/testlab"
- th:with="title='Media-Query-Test: BEISPIEL', uri='/projects/html-experimente/testlab.html'"
- >
- <head>
- <title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
- <script src="../../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body>
- <div layout:fragment="content" th:remove="tag">
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Anzeigetext</h2>
- <div class="f textarea">
- <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
- <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
- </div>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Textformatierung</h2>
- <fieldset class="f radiobutton cf">
- <legend class="f info">
- Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
- Online erscheint die Anzeige als normaler Fließtext.
- </legend>
- <hr class="f" />
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_01">normaler Fließtext</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_02">Text zentriert</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_04">Text fett</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_05">Text fett und rot</label>
- </div>
- </div>
- <div class="col2">
- <div class="f">
- <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
- </div>
- </div>
- </fieldset>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Einspaltige Radiobuttons...</h2>
- <fieldset class="f radiobutton">
- <div class="f">
- <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_b02">Option X</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
- <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
- </div>
- </fieldset>
- <hr class="f" />
- <div class="f submit">
- <input class="f" type="submit" value="> zur Übersicht" />
- <input class="f left" type="submit" value="< zurück" />
- <input class="f" type="submit" value="> weiter" />
- </div>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Bild</h2>
- <fieldset class="f checkbox">
- <legend class="f">
- Du kannst Deiner Anzeige ein Bild hinzufügen.
- Das Bild erscheint nur online.
- Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
- </legend>
- <hr class="f" />
- <div class="f">
- <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
- <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- <div class="f">
- <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
- <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
- </div>
- </fieldset>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Alleinstehende Checkbox</h2>
- <div class="f checkbox">
- <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
- <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Kundendaten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
- <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
- </div>
- <div class="f text required">
- <label for="text_tbox_02" class="f">Vorname</label>
- <input class="f" id="text_tbox_02" type="text" value="Max" />
- </div>
- <div class="f select required">
- <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
- <select class="f" id="text_tbox_03">
- <option>Dortmund</option>
- <option>Bochum</option>
- <option>Essen</option>
- <option>Mönchengladbach</option>
- <option>Oberhausen</option>
- <option>Castrop-Rauxel</option>
- <option>Düsseldorf</option>
- </select>
- </div>
- <div class="f text required">
- <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
- <input class="f error" id="text_tbox_04" type="text" value="" />
- <span class="f error"><span class="e">< </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
- </div>
- <div class="f text required">
- <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
- <input class="f" id="text_tbox_05" type="text" value="" />
- </div>
- <div class="f text required">
- <label for="text_tbox_06" class="f">Telefon</label>
- <input class="f" id="text_tbox_06" type="text" value="" />
- </div>
- <hr class="f" />
- <div class="f submit">
- <input class="f" type="submit" value="> weiter" />
- </div>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Anzeige regionalisieren</h2>
- <p class="f">
- Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
- diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
- bestimmten Städten suchen.
- Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
- diesen Interessenten aber auch nicht gefunden.
- </p>
- <hr class="f" />
- <div class="f text">
- <label class="f" for="city">Stadt</label>
- <input id="city" type="text" class="f" />
- <p class="f info">
- Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
- </p>
- </div>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
- <div class="f text required">
- <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
- <input class="f" id="text_tbox_05" type="password" value="t" />
- </div>
- </form>
- <form class="testlab form" action="#" method="get">
- <h2 class="f">Lade das Bild hoch</h2>
- <p class="f info">
- Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
- Das Bild darf nicht größer als 8 MByte sein.
- </p>
- <div class="f file required">
- <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
- <input class="f" id="file_tbox_01" type="file" />
- </div>
- <hr class="f" />
- <div class="f submit">
- <input class="f" type="submit" value="> Doch kein Bild" />
- <input class="f" type="submit" value="> Bild hochladen" />
- </div>
- </form>
- <div class="testlab form">
- <h2 class="f">Antworten</h2>
- <p class="f required">
- <strong class="r">Pflichtfelder</strong> sind mit einem
- <strong class="r symbol">*</strong> markiert.
- </p>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
- <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
- </div>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
- <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
- </div>
- <div class="f text required">
- <label class="f" for="subject"><span class="required">*</span> Betreff</label>
- <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
- </div>
- <div class="f textarea required">
- <label class="f" for="text"><span class="required">*</span> Nachricht</label>
- <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
- </div>
- <div class="f checkbox">
- <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
- <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
- </div>
- <div class="f checkbox">
- <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
- <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
- </div>
- </div>
- <div class="testlab form cf">
- <div class="col2 left">
- <h2 class="f">Weiter mit Anmeldung</h2>
- <div class="f text">
- <label class="f" for="username">Benutzername</label>
- <input class="f" name="username" id="username" type="text" tabindex="6" />
- </div>
- <div class="f text">
- <label class="f" for="password">Passwort</label>
- <input class="f" name="password" id="password" type="password" tabindex="7" />
- </div>
- </div>
- <div class="col2 right">
- <h2 class="f">Weiter ohne Anmeldung</h2>
- <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
- <div class="f captcha cf">
- <span class="f">Was steht da?</span>
- <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
- </div>
- <div class="f text">
- <label class="f" for="captcha">Lösung</label>
- <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
- </div>
- </div>
- </div>
- </div>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- xmlns:th="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="title='Layout für sehr kleine Bildschirmgrößen', uri='/projects/html-experimente/tiny.html'"
- >
- <head layout:fragment="head">
- <title>HTML-Experimente - Layout TINY</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" th:remove="all"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/base.css" th:href="@{/css/base.css}"/>
- <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../css/tiny.css" th:href="@{/css/tiny.css}"/>
- <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
- </head>
- <body>
- <aside layout:fragment="marginalcontent" th:replace="templates/fragments :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html
- xmlns="http://www.w3.org/1999/xhtml"
- xmlns:layout="http://www.thymeleaf.org"
- layout:decorator="templates/layout"
- th:with="uri='/projects/typo.html'"
- >
- <head>
- <title>Typography</title>
- <!--/*-->
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <link rel="stylesheet/less" type="text/css" href="../less/base.less"/>
- <link rel="stylesheet/less" type="text/css" href="../less/screen.less" media="screen"/>
- <link rel="stylesheet/less" type="text/css" href="../less/print.less" media="print"/>
- <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
- <script src="../js/less-1.7.0.min.js"></script>
- <!--*/-->
- </head>
- <body onload="prettyPrint()">
- <article layout:fragment="maincontent">
- <header><h1>Typography</h1></header>
- <p>
- Lorem ipsum dolor <a href="#da">sit amet</a>, consectetur adipisicing elit,
- sed do eiusmod <strong>tempor incididunt</strong> ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud
- <a href="#dort">exercitation</a> ullamco laboris nisi ut aliquip
- <em>ex ea</em> commodo consequat. Duis aute irure dolor in reprehenderit
- in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- <strong>Excepteur sint <em>occaecat</em> cupidatat non proident</strong>,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h2>Ein Link <a href="#link">im Titel</a></h2>
- <p>Ein Link <a href="#link">im Text</a>.</p>
- <h2>Normal / Italic / Bold / Bold+Italic</h2>
- <ul>
- <li>normal</li>
- <li><em>italic</em></li>
- <li><strong>bold</strong></li>
- <li><strong><em>bold italic</em></strong></li>
- </ul>
- <p>
- ÄäÖöÜüß@€¢
- <strong>ÄäÖöÜüß@€¢</strong>
- <em>ÄäÖöÜüß@€¢</em>
- <strong><em>ÄäÖöÜüß@€¢</em></strong>
- </p>
- <h1>H1: Heading</h1>
- <h2>H2: Heading</h2>
- <h3>H3: Heading</h3>
- <h4>H4: Heading</h4>
- <h1>H1: Heading</h1>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h2>H2: Heading</h2>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h3>H3: Heading</h3>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h4>H4: Heading</h4>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
- culpa qui officia deserunt mollit anim id est laborum.
- </p>
- <h1>Preformatted code</h1>
- <p>
- <em>Juplo Branding</em> uses
- <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" title="Visit prettify's README">google-code-prettify</a> for automatic
- syntax highlighting.
- </p>
- <pre class="prettyprint linenums"><code class="language-xml"><plugin>
- <groupId>ro.isdc.wro4j</groupId>
- <artifactId>wro4j-maven-plugin</artifactId>
- <version>${wro4j.version}</version>
- <configuration>
- <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
- <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/css/</cssDestinationFolder>
- </configuration>
- <executions>
- <execution>
- <phase>package</phase>
- <goals>
- <goal>run</goal>
- </goals>
- </execution>
- </executions>
-</plugin>
-</code></pre>
- </article>
- </body>
-</html>
<div th:fragment="maincontent">
<p>
<strong>Lorem ipsum</strong> dolor
- <a href="../projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
+ <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- <a href="#" th:href="@{/projects/html-experimente.html}">exercitation</a>
+ <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
class="s sub"
th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
>
- <a href="../projects/fix-swf.html"
+ <a href="../potemkin/fix-swf.html"
th:href="@{${entry.key}}"
class="s selected"
th:class="${selected} ? 's selected' : 's'"
<strong class="s">Overview</strong>
</li>
<!--/*-->
- <li class="s"><a href="../projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+ <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
<li class="s"><a href="#" class="s">FAQ</a></li>
<li class="s"><a href="#" class="s">Documentation</a></li>
<!--*/-->
<!--/*-->
<li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
<li class="s off"><a href="#" class="s">jquery.openx</a></li>
- <li class="s sub off"><a href="../projects/html-experimente.html" th:href="@{/projects/html-experimente.html}" class="s">HTML-Experimente</a></li>
+ <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
<li class="s sub off"><a href="#" class="s">accelerator</a></li>
- <li class="s off"><a href="../projects/typo.html" th:href="@{/projects/typo.html}" class="s">Typography</a></li>
+ <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
<!--*/-->
</ul>
<hr class="n"/>
{ "uri": "/blog.html", "name": "Blog" }
]
},
+ "/projects.html": {
+ "name": "Projects",
+ "childs": {
+ "/simple-mapper/index.html": "Simple Mapper 4 JSON",
+ "/maven-thymeleaf-skin/index.html": "Apache-Maven Thymeleaf-Skin"
+ },
+ "crumbs": [
+ { "uri": "/projects.html", "name": "Projects" }
+ ]
+ },
"/blog/article.html": {
"name": "An Article",
"crumbs": [
{ "uri": "/blog/comments.html", "name": "Comments" }
]
},
- "/projects.html": {
+ "/potemkin.html": {
"name": "Projects",
"childs": {
"#hibernate4-maven-plugin": "Hibernate 4 Maven Plugin",
- "/projects/fix-swf/overview.html": "Fix SWF",
+ "/potemkin/fix-swf/overview.html": "Fix SWF",
"#jquery.openx": "jQuery OpenX",
- "/projects/html-experimente.html": "HTML-Experimente",
+ "/potemkin/html-experimente.html": "HTML-Experimente",
"#accelerator": "accelerator",
- "/simple-mapper/index.html": "Simple Mapper 4 JSON",
- "/maven-thymeleaf-skin/index.html": "Apache-Maven Thymeleaf-Skin",
- "/projects/typo.html": "Typography"
+ "/potemkin/typo.html": "Typography"
},
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" }
]
},
"#hibernate4-maven-plugin": {
"name": "Overview",
"childs": {}
},
- "/projects/fix-swf/overview.html": {
+ "/potemkin/fix-swf/overview.html": {
"name": "Overview",
"childs": {
- "/projects/fix-swf/overview.html": "Overview",
- "/projects/fix-swf/getting-started.html": "Getting Started",
+ "/potemkin/fix-swf/overview.html": "Overview",
+ "/potemkin/fix-swf/getting-started.html": "Getting Started",
"#faq": "FAQ",
"#documentation": "Documentation"
},
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/fix-swf/overview.html", "name": "Fix SWF" },
- { "uri": "/projects/fix-swf/overview.html", "name": "Overview" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/fix-swf/overview.html", "name": "Fix SWF" },
+ { "uri": "/potemkin/fix-swf/overview.html", "name": "Overview" }
]
},
"#faq": { "name": "FAQ" },
{ "uri": "/maven-thymeleaf-skin/index.html", "name": "Apache-Maven Thymeleaf-Skin" }
]
},
- "/projects/typo.html": {
+ "/potemkin/typo.html": {
"name": "Typography",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/typo.html", "name": "Typography" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/typo.html", "name": "Typography" }
]
},
- "/projects/html-experimente.html": {
+ "/potemkin/html-experimente.html": {
"name": "HTML-Experimente",
"childs": {
- "/projects/html-experimente/formulare.html": "Formulare",
- "/projects/html-experimente/symbole.html": "Symbol-Font",
+ "/potemkin/html-experimente/formulare.html": "Formulare",
+ "/potemkin/html-experimente/symbole.html": "Symbol-Font",
"/templates/404.html": "404-Template",
- "/projects/html-experimente/gibts-ja-gar-nicht.html": "404-Fehlerseite",
+ "/potemkin/html-experimente/gibts-ja-gar-nicht.html": "404-Fehlerseite",
"/templates/error.html": "5xx-Template",
- "/projects/html-experimente/error.html": "5xx-Fehlerseite",
- "/projects/html-experimente/fast-leer-mit-menü.html": "Leer, mit Menü, ohne Marginal",
- "/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": "Leer, mit Menü, mit Marginal",
- "/projects/html-experimente/fast-leer-kein-menü.html": "Leer, ohne Menü, ohne Marginal",
- "/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": "Leer, ohne Menü, mit Marginal",
- "/projects/html-experimente/fast-leer-einspaltig.html": "Leer, einspaltig",
- "/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": "Leer, einspaltig, mit Marginal",
- "/projects/html-experimente/breadcrumb.html": "Langer Breadcrumb",
- "/projects/html-experimente/kein-layout.html": "Alle Stylings deaktiviert",
- "/projects/html-experimente/basis-layout.html": "Nur das Basis-Layout",
- "/projects/html-experimente/druck-layout.html": "Druck-Layout",
- "/projects/html-experimente/tiny.html": "Layout TINY",
- "/projects/html-experimente/phone.html": "Layout PHONE",
- "/projects/html-experimente/tablet.html": "Layout TABLET",
- "/projects/html-experimente/seitenaufteilung.html": "Basis-Layout & Seitenaufteilung",
- "/projects/html-experimente/seitenkopf.html": "Basis-Layout & Seitenkopf",
- "/projects/html-experimente/testlab.html": "Media-Query-Test (Beispiel)"
+ "/potemkin/html-experimente/error.html": "5xx-Fehlerseite",
+ "/potemkin/html-experimente/fast-leer-mit-menü.html": "Leer, mit Menü, ohne Marginal",
+ "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": "Leer, mit Menü, mit Marginal",
+ "/potemkin/html-experimente/fast-leer-kein-menü.html": "Leer, ohne Menü, ohne Marginal",
+ "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": "Leer, ohne Menü, mit Marginal",
+ "/potemkin/html-experimente/fast-leer-einspaltig.html": "Leer, einspaltig",
+ "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": "Leer, einspaltig, mit Marginal",
+ "/potemkin/html-experimente/breadcrumb.html": "Langer Breadcrumb",
+ "/potemkin/html-experimente/kein-layout.html": "Alle Stylings deaktiviert",
+ "/potemkin/html-experimente/basis-layout.html": "Nur das Basis-Layout",
+ "/potemkin/html-experimente/druck-layout.html": "Druck-Layout",
+ "/potemkin/html-experimente/tiny.html": "Layout TINY",
+ "/potemkin/html-experimente/phone.html": "Layout PHONE",
+ "/potemkin/html-experimente/tablet.html": "Layout TABLET",
+ "/potemkin/html-experimente/seitenaufteilung.html": "Basis-Layout & Seitenaufteilung",
+ "/potemkin/html-experimente/seitenkopf.html": "Basis-Layout & Seitenkopf",
+ "/potemkin/html-experimente/testlab.html": "Media-Query-Test (Beispiel)"
},
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" }
]
},
- "/projects/fix-swf/getting-started.html": {
+ "/potemkin/fix-swf/getting-started.html": {
"name": "Getting Started",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/fix-swf/overview.html", "name": "Fix SWF" },
- { "uri": "/projects/fix-swf/getting-started.html", "name": "Getting Started" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/fix-swf/overview.html", "name": "Fix SWF" },
+ { "uri": "/potemkin/fix-swf/getting-started.html", "name": "Getting Started" }
]
},
- "/projects/html-experimente/formulare.html": {
+ "/potemkin/html-experimente/formulare.html": {
"name": "Formulare",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/formulare.html", "name": "Formulare" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/formulare.html", "name": "Formulare" }
]
},
- "/projects/html-experimente/symbole.html": {
+ "/potemkin/html-experimente/symbole.html": {
"name": "Symbol-Font",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/symbole.html", "name": "Symbol-Font" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/symbole.html", "name": "Symbol-Font" }
]
},
"/templates/404.html": {
"name": "404-Template",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
{ "uri": "/templates/404.html", "name": "404-Template" }
]
},
- "/projects/html-experimente/gibts-ja-gar-nicht.html": {
+ "/potemkin/html-experimente/gibts-ja-gar-nicht.html": {
"name": "404-Fehlerseite",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/gibts-ja-gar-nicht.html", "name": "404-Fehlerseite" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/gibts-ja-gar-nicht.html", "name": "404-Fehlerseite" }
]
},
"/templates/error.html": {
"name": "5xx-Template",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
{ "uri": "/templates/error.html", "name": "5xx-Template" }
]
},
- "/projects/html-experimente/error.html": {
+ "/potemkin/html-experimente/error.html": {
"name": "5xx-Fehlerseite",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/error.html", "name": "5xx-Fehlerseite" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/error.html", "name": "5xx-Fehlerseite" }
]
},
- "/projects/html-experimente/fast-leer-mit-menü.html": {
+ "/potemkin/html-experimente/fast-leer-mit-menü.html": {
"name": "Leer, mit Menü, ohne Marginal",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/fast-leer-mit-menü.html", "name": "Leer, mit Menü, ohne Marginal" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/fast-leer-mit-menü.html", "name": "Leer, mit Menü, ohne Marginal" }
]
},
- "/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": {
+ "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html": {
"name": "Leer, mit Menü, mit Marginal",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html", "name": "Leer, mit Menü, mit Marginal" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html", "name": "Leer, mit Menü, mit Marginal" }
]
},
- "/projects/html-experimente/fast-leer-kein-menü.html": {
+ "/potemkin/html-experimente/fast-leer-kein-menü.html": {
"name": "Leer, ohne Menü, ohne Marginal",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/fast-leer-kein-menü.html", "name": "Leer, ohne Menü, ohne Marginal" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/fast-leer-kein-menü.html", "name": "Leer, ohne Menü, ohne Marginal" }
]
},
- "/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": {
+ "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html": {
"name": "Leer, ohne Menü, mit Marginal",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html", "name": "Leer, ohne Menü, mit Marginal" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html", "name": "Leer, ohne Menü, mit Marginal" }
]
},
- "/projects/html-experimente/fast-leer-einspaltig.html": {
+ "/potemkin/html-experimente/fast-leer-einspaltig.html": {
"name": "Leer, einspaltig",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/fast-leer-einspaltig.html", "name": "Leer, einspaltig" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/fast-leer-einspaltig.html", "name": "Leer, einspaltig" }
]
},
- "/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": {
+ "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html": {
"name": "Leer, einspaltig, mit Marginal",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html", "name": "Leer, einspaltig, mit Marginal" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html", "name": "Leer, einspaltig, mit Marginal" }
]
},
- "/projects/html-experimente/breadcrumb.html": {
+ "/potemkin/html-experimente/breadcrumb.html": {
"name": "Langer Breadcrumb",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/breadcrumb.html", "name": "Langer Breadcrumb" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/breadcrumb.html", "name": "Langer Breadcrumb" }
]
},
- "/projects/html-experimente/kein-layout.html": {
+ "/potemkin/html-experimente/kein-layout.html": {
"name": "Alle Stylings deaktiviert",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/kein-layout.html", "name": "Alle Stylings deaktiviert" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/kein-layout.html", "name": "Alle Stylings deaktiviert" }
]
},
- "/projects/html-experimente/basis-layout.html": {
+ "/potemkin/html-experimente/basis-layout.html": {
"name": "Nur das Basis-Layout",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/basis-layout.html", "name": "Nur das Basis-Layout" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/basis-layout.html", "name": "Nur das Basis-Layout" }
]
},
- "/projects/html-experimente/druck-layout.html": {
+ "/potemkin/html-experimente/druck-layout.html": {
"name": "Druck-Layout",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/druck-layout.html", "name": "Druck-Layout" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/druck-layout.html", "name": "Druck-Layout" }
]
},
- "/projects/html-experimente/tiny.html": {
+ "/potemkin/html-experimente/tiny.html": {
"name": "Layout TINY",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/tiny.html", "name": "Layout TINY" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/tiny.html", "name": "Layout TINY" }
]
},
- "/projects/html-experimente/phone.html": {
+ "/potemkin/html-experimente/phone.html": {
"name": "Layout PHONE",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/phone.html", "name": "Layout PHONE" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/phone.html", "name": "Layout PHONE" }
]
},
- "/projects/html-experimente/tablet.html": {
+ "/potemkin/html-experimente/tablet.html": {
"name": "Layout TABLET",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/tablet.html", "name": "Layout TABLET" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/tablet.html", "name": "Layout TABLET" }
]
},
- "/projects/html-experimente/seitenaufteilung.html": {
+ "/potemkin/html-experimente/seitenaufteilung.html": {
"name": "Basis-Layout & Seitenaufteilung",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/seitenaufteilung.html", "name": "Basis-Layout & Seitenaufteilung" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/seitenaufteilung.html", "name": "Basis-Layout & Seitenaufteilung" }
]
},
- "/projects/html-experimente/seitenkopf.html": {
+ "/potemkin/html-experimente/seitenkopf.html": {
"name": "Basis-Layout & Seitenkopf",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/seitenkopf.html", "name": "Basis-Layout & Seitenkopf" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/seitenkopf.html", "name": "Basis-Layout & Seitenkopf" }
]
},
- "/projects/html-experimente/testlab.html": {
+ "/potemkin/html-experimente/testlab.html": {
"name": "Media-Query-Test (Beispiel)",
"crumbs": [
- { "uri": "/projects.html", "name": "Projects" },
- { "uri": "/projects/html-experimente.html", "name": "HTML-Experimente" },
- { "uri": "/projects/html-experimente/testlab.html", "name": "Media-Query-Test (Beispiel)" }
+ { "uri": "/potemkin.html", "name": "Projects (Potemkinsche Dörfer)" },
+ { "uri": "/potemkin/html-experimente.html", "name": "HTML-Experimente" },
+ { "uri": "/potemkin/html-experimente/testlab.html", "name": "Media-Query-Test (Beispiel)" }
]
},
"/about.html": {
projects / website / commitdiff