+++ /dev/null
----
-_edit_last: "2"
-author: kai
-categories:
- - demos
- - explained
- - java
- - kafka
- - spring
- - spring-boot
-classic-editor-remember: classic-editor
-date: "2021-02-05T17:59:38+00:00"
-guid: http://juplo.de/?p=1201
-parent_post_id: null
-post_id: "1201"
-title: 'Implementing The Outbox-Pattern With Kafka - Part 0: The example'
-url: /implementing-the-outbox-pattern-with-kafka-part-0-the-example/
-
----
-_This article is part of a Blog-Series_
-
-Based on a [very simple example-project](/implementing-the-outbox-pattern-with-kafka-part-0-the-example/)
-we will implemnt the [Outbox-Pattern](https://microservices.io/patterns/data/transactional-outbox.html) with [Kafka](https://kafka.apache.org/quickstart).
-
-- Part 0: The Example-Project
-- [Part 1: Writing In The Outbox-Table](/implementing-the-outbox-pattern-with-kafka-part-1-the-outbox-table/ "Jump to the explanation what has to be added, to enqueue messages in an outbox for successfully written transactions")
-
-## TL;DR
-
-In this part, a small example-project is introduced, that features a component, which has to inform another component upon every succsessfully completed operation.
-
-## The Plan
-
-In this mini-series I will implement the [Outbox-Pattern](https://microservices.io/patterns/data/transactional-outbox.html)
-as described on Chris Richardson's fabolous website [microservices.io](https://microservices.io/).
-
-The pattern enables you, to send a message as part of a database transaction in a reliable way, effectively turining the writing of the data
-to the database and the sending of the message into an **[atomic operation](https://en.wikipedia.org/wiki/Atomicity_(database_systems))**:
-either both operations are successful or neither.
-
-The pattern is well known and implementing it with [Kafka](https://kafka.apache.org/quickstart) looks like an easy straight forward job at first glance.
-However, there are many obstacles that easily lead to an incomplete or incorrect implementation.
-In this blog-series, we will circumnavigate these obstacles together step by step.
-
-## The Example Project
-
-To illustrate our implementation, we will use a simple example-project.
-It mimics a part of the registration process for an web application:
-a (very!) simplistic service takes registration orders for new users.
-
-- Successfull registration requests will return a 201 (Created), that carries the URI, under which the data of the newly registered user can be accessed in the `Location`-header:
-
-`echo peter | http :8080/users
- HTTP/1.1 201
- Content-Length: 0
- Date: Fri, 05 Feb 2021 14:44:51 GMT
- Location: http://localhost:8080/users/peter
- `
-- Requests to registrate an already existing user will result in a 400 (Bad Request):
-
-`echo peter | http :8080/users
- HTTP/1.1 400
- Connection: close
- Content-Length: 0
- Date: Fri, 05 Feb 2021 14:44:53 GMT
- `
-- Successfully registrated users can be listed:
- `http :8080/users
- HTTP/1.1 200
- Content-Type: application/json;charset=UTF-8
- Date: Fri, 05 Feb 2021 14:53:59 GMT
- Transfer-Encoding: chunked
- [
- {
- "created": "2021-02-05T10:38:32.301",
- "loggedIn": false,
- "username": "peter"
- },
- ...
- ]
- `
-
-## The Messaging Use-Case
-
-As our messaging use-case imagine, that there has to happen several processes after a successful registration of a new user.
-This may be the generation of an invoice, some business analytics or any other lengthy process that is best carried out asynchronously.
-Hence, we have to generate an event, that informs the responsible services about new registrations.
-
-Obviously, these events should only be generated, if the registration is completed successfully.
-The event must not be fired, if the registration is rejected, because a duplicate username.
-
-On the other hand, the publication of the event must happen reliably, because otherwise, the new might not be charged for the services, we offer...
-
-## The Transaction
-
-The users are stored in a database and the creation of a new user happens in a transaction.
-A "brilliant" colleague came up with the idea, to trigger an `IncorrectResultSizeDataAccessException` to detect duplicate usernames:
-
-`User user = new User(username);
-repository.save(user);
-// Triggers an Exception, if more than one entry is found
-repository.findByUsername(username);
-`
-
-The query for the user by its names triggers an `IncorrectResultSizeDataAccessException`, if more than one entry is found.
-The uncaught exception will mark the transaction for rollback, hence, canceling the requested registration.
-The 400-response is then generated by a corresponding `ExceptionHandler`:
-
-`@ExceptionHandler
-public ResponseEntity incorrectResultSizeDataAccessException(
- IncorrectResultSizeDataAccessException e)
-{
- LOG.info("User already exists!");
- return ResponseEntity.badRequest().build();
-}
-`
-
-Please do not code this at home...
-
-But his weired implementation perfectly illustrates the requirements for our messaging use-case:
-The user is written into the database.
-But the registration is not successfully completed until the transaction is commited.
-If the transaction is rolled back, no message must be send, because no new user was registered.
-
-## Decoupling with Springs EventPublisher
-
-In the example implementation I am using an `EventPublisher` to decouple the business logic from the implementation of the messaging.
-The controller publishes an event, when a new user is registered:
-
-`publisher.publishEvent(new UserEvent(this, usernam));
-`
-
-A listener annotated with `@TransactionalEventListener` receives the events and handles the messaging:
-
-`@TransactionalEventListener
-public void onUserEvent(UserEvent event)
-{
- // Sending the message happens here...
-}
-`
-
-In non-critical use-cases, it might be sufficient to actually send the message to Kafka right here.
-Spring ensures, that the message of the listener is only called, if the transaction completes successfully.
-But in the case of a failure this naive implementation can loose messages.
-If the application crashes, after the transaction has completed, but before the message could be send, the event would be lost.
-
-In the following blog posts, we will step by step implement a solution based on the Outbox-Pattern, that can guarantee Exactly-Once semantics for the send messages.
-
-## May The Source Be With You!
-
-The complete source code of the example-project can be cloned here:
-
-- `git clone /git/demos/spring/data-jdbc`
-- `git clone https://github.com/juplo/demos-spring-data-jdbc.git`
-
-It includes a [Setup for Docker Compose](https://github.com/juplo/demos-spring-data-jdbc/blob/master/docker-compose.yml), that can be run without compiling
-the project. And a runnable [README.sh](https://github.com/juplo/demos-spring-data-jdbc/blob/master/README.sh), that compiles and run the application and illustrates the example.
+++ /dev/null
----
-title: "Projects"
-url: /projects.html
-outputs:
- - html
-weight: 20
----
-<main class="maincontent">
- <h1>Projects - Potemkinsche Dörfer!</h1>
- <ul>
- <li><a href="potemkin/fix-swf/overview.html" th:href="@{/potemkin/fix-swf/overview.html}">Fix SWF</a></li>
- <li><a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
- <li><a href="potemkin/accelerator.html" th:href="@{/potemkin/accelerator.html}">accelerator</a></li>
- <li><a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">Typography</a></li>
- </ul>
- </main>
+++ /dev/null
----
-title: "accelerator - Overview"
-url: /potemkin/accelerator.html
----
-<main class="maincontent">
- <h1>Accelerator - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "Fix SWF"
-url: /potemkin/fix-swf/overview.html
-build:
- render: local
-outputs:
- - html
----
-<main class="maincontent">
- <h1>Overviw - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "Fix SWF - Getting Started"
-linkTitle: "Getting Started"
-url: /potemkin/fix-swf/getting-started.html
----
-<main class="maincontent">
- <h1>Getting Started - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "Fix SWF - Overview"
-url: /potemkin/fix-swf/overview.html
----
-<main class="maincontent">
- <h1>Overviw - DUMMY</h1>
- </main>
+++ /dev/null
----
-title: "HTML-Experimente"
----
-<div>
- <h1>HTML-Elemente / spezielle Seiten</h1>
- <h2>Die Templates</h2>
- <ul>
- <li><a href="templates/layout.html">Layout</a> - Das Layout für juplo.de</li>
- <li><a href="templates/fragments.html">Fragmente</a> Auf mehreren Seiten verwendete Inhalte</li>
- <li><a href="error/404.html">404-Fehlerseite</a></li>
- <li><a href="error/5xx.html">5xx-Fehlerseite</a></li>
- <li><a href="templates/testlab.html">Testlab</a> Testseite für die Skalierung auf untrschiedliche Seitenbreiten</li>
- </ul>
- </div>
-<article class="maincontent">
- <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
- <h2>Seiten zum Testen gerenderter Inhalte</h2>
- <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="error/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="error/5xx.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>
+++ /dev/null
----
-title: "HTML-Experimente - Basis-Layout"
-linkTitle: "Basis-Layout"
-url: /potemkin/html-experimente/basis-layout.html
----
-<main class="maincontent">
- <header><h1>Nur das Basis-Layout</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Langer Breadcrumb"
-linkTitle: "Langer Breadcrumb"
-url: /potemkin/html-experimente/breadcrumb.html
----
-<ol id="crumbs">
- <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="@{/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>
-<article class="maincontent">
- <header><h1>Seite mit sehr langem Breadcrumb</h1></header>
- <p>Eine Seite mit einem extrem langen Breadcrumb...</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Druck-Layout"
-linkTitle: "Druck-Layout"
-url: /potemkin/html-experimente/druck-layout.html
----
-<main class="maincontent">
- <header><h1>Die für den Ausdruck angepasste Ansicht</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "This Page Will Raise An Error"
-url: /potemkin/html-experimente/error.html
----
-<p>This page will raise an error, because the <strong><code>uri</code></strong> is set to an unknown value...</p>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt"
-linkTitle: "Fast leere einspaltige Seite mit Marginalinhalt"
-url: /potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
----
-<nav id="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 class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
- <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
- </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere einspaltige Seite"
-linkTitle: "Fast leere einspaltige Seite"
-url: /potemkin/html-experimente/fast-leer-einspaltig.html
----
-<nav id="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 class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere einspaltige Seite</h1></header>
- <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte"
-linkTitle: "Fast leere Seite ohne Menü aber mit Marginalspalte"
-url: /potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
----
-<nav id="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 class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite ohne Menü"
-linkTitle: "Fast leere Seite ohne Menü"
-url: /potemkin/html-experimente/fast-leer-kein-menü.html
----
-<nav id="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 class="cf" id="menu">
- <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
- <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
- <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
- </ul>
- </nav>
-<article class="maincontent">
- <header><h1>Fast leere Seite ohne Menü</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt"
-linkTitle: "Fast leere Seite mit Menü und Marginalinhalt"
-url: /potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html
----
-<article class="maincontent">
- <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Fast leere Seite mit Menü"
-linkTitle: "Fast leere Seite mit Menü"
-url: /potemkin/html-experimente/fast-leer-mit-menü.html
----
-<article class="maincontent">
- <header><h1>Fast leere Seite mit Menü</h1></header>
- <p>Ein ganz bischen Text...</p>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Formulare"
-linkTitle: "Formulare"
-url: /potemkin/html-experimente/formulare.html
----
-<article class="maincontent">
- <header><h1>Formulare</h1></header>
- <form action="#" class="form" 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" cols="50" id="textarea_01" 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 action="#" class="form" 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" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_01">normaler Fließtext</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_02">Text zentriert</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_04">Text fett</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
- <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" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
- </div>
- </div>
- </fieldset>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Einspaltige Radiobuttons...</h2>
- <fieldset class="f radiobutton">
- <div class="f">
- <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
- <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" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b02">Option X</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
- <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 action="#" class="form" 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" name="checkbox_tbox" type="checkbox">
- <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" name="checkbox_tbox" type="checkbox">
- <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 action="#" class="form" method="get">
- <h2 class="f">Alleinstehende Checkbox</h2>
- <div class="f checkbox">
- <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- </form>
- <form action="#" class="form" 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 class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
- <input class="f" id="text_tbox_01" type="text" value="Mustermann">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_02">Vorname</label>
- <input class="f" id="text_tbox_02" type="text" value="Max">
- </div>
- <div class="f select required">
- <label class="f" for="text_tbox_03"><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 class="f" for="text_tbox_04"><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 class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
- <input class="f" id="text_tbox_05" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_06">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 action="#" class="form" 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 class="f" id="city" type="text">
- <p class="f info">
- Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
- </p>
- </div>
- </form>
- <form action="#" class="form" method="get">
- <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
- <div class="f text required">
- <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
- <input class="f" id="text_tbox_05" type="password" value="t">
- </div>
- </form>
- <form action="#" class="form" 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 class="f" for="file_tbox_01"><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 class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
- <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="subject"><span class="required">*</span> Betreff</label>
- <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
- </div>
- <div class="f textarea required">
- <label class="f" for="text"><span class="required">*</span> Nachricht</label>
- <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
- </div>
- <div class="f checkbox">
- <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" 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 checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" 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" id="username" name="username" tabindex="6" type="text">
- </div>
- <div class="f text">
- <label class="f" for="password">Passwort</label>
- <input class="f" id="password" name="password" tabindex="7" type="password">
- </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 alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
- </div>
- <div class="f text">
- <label class="f" for="captcha">Lösung</label>
- <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
- </div>
- </div>
- </div>
- </article>
+++ /dev/null
----
-title: "HTML-Experimente - Kein Layout"
-linkTitle: "Kein Layout"
-url: /potemkin/html-experimente/kein-layout.html
----
-<main class="maincontent">
- <header><h1>Alle Stylings deaktiviert</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Layout PHONE"
-linkTitle: "Layout PHONE"
-url: /potemkin/html-experimente/phone.html
----
-<main class="maincontent">
- <header><h1>Layout für Smartphones</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Basis-Layout & Seitenaufteilung"
-linkTitle: "Basis-Layout & Seitenaufteilung"
-url: /potemkin/html-experimente/seitenaufteilung.html
----
-<main class="maincontent">
- <header><h1>Nur das Basis-Layout und die Seitenaufteiltung</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Basis-Layout & Seitenkopf"
-linkTitle: "Basis-Layout & Seitenkopf"
-url: /potemkin/html-experimente/seitenkopf.html
----
-<main class="maincontent">
- <header><h1>Nur das Basis-Layout und der Seitenkopf</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Symbol-Font"
-linkTitle: "Symbol-Font"
-url: /potemkin/html-experimente/symbole.html
----
-<article class="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>
+++ /dev/null
----
-title: "HTML-Experimente - Layout TABLET"
-linkTitle: "Layout TABLET"
-url: /potemkin/html-experimente/tablet.html
----
-<main class="maincontent">
- <header><h1>Layout für Tablets</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "HTML-Experimente - Media-Query-Test: BEISPIEL"
-linktTitle: "Media-Query-Test: BEISPIEL"
-url: /potemkin/html-experimente/testlab.html
----
-<div class="content">
- <form action="#" class="testlab form" 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" cols="50" id="textarea_01" 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 action="#" class="testlab form" 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" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_01">normaler Fließtext</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_02">Text zentriert</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_04">Text fett</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
- <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" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
- </div>
- </div>
- </fieldset>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Einspaltige Radiobuttons...</h2>
- <fieldset class="f radiobutton">
- <div class="f">
- <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
- <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" name="radio_tbox" type="radio">
- <label class="f" for="radio_tbox_b02">Option X</label>
- </div>
- <div class="f">
- <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
- <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 action="#" class="testlab form" 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" name="checkbox_tbox" type="checkbox">
- <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" name="checkbox_tbox" type="checkbox">
- <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 action="#" class="testlab form" method="get">
- <h2 class="f">Alleinstehende Checkbox</h2>
- <div class="f checkbox">
- <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
- <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
- </div>
- </form>
- <form action="#" class="testlab form" 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 class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
- <input class="f" id="text_tbox_01" type="text" value="Mustermann">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_02">Vorname</label>
- <input class="f" id="text_tbox_02" type="text" value="Max">
- </div>
- <div class="f select required">
- <label class="f" for="text_tbox_03"><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 class="f" for="text_tbox_04"><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 class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
- <input class="f" id="text_tbox_05" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="text_tbox_06">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 action="#" class="testlab form" 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 class="f" id="city" type="text">
- <p class="f info">
- Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
- </p>
- </div>
- </form>
- <form action="#" class="testlab form" method="get">
- <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
- <div class="f text required">
- <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
- <input class="f" id="text_tbox_05" type="password" value="t">
- </div>
- </form>
- <form action="#" class="testlab form" 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 class="f" for="file_tbox_01"><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 class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
- <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
- </div>
- <div class="f text required">
- <label class="f" for="subject"><span class="required">*</span> Betreff</label>
- <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
- </div>
- <div class="f textarea required">
- <label class="f" for="text"><span class="required">*</span> Nachricht</label>
- <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
- </div>
- <div class="f checkbox">
- <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" 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 checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" 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" id="username" name="username" tabindex="6" type="text">
- </div>
- <div class="f text">
- <label class="f" for="password">Passwort</label>
- <input class="f" id="password" name="password" tabindex="7" type="password">
- </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 alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
- </div>
- <div class="f text">
- <label class="f" for="captcha">Lösung</label>
- <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
- </div>
- </div>
- </div>
- </div>
+++ /dev/null
----
-title: "HTML-Experimente - Layout TINY"
-linkTitle: "Layout TINY"
-url: /potemkin/html-experimente/tiny.html
----
-<main class="maincontent">
- <header><h1>Layout für sehr kleine Bildschirmgrößen</h1></header>
- <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
- </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
- MARGINAL-CONTENT
- </aside>
+++ /dev/null
----
-title: "Typography"
-url: /potemkin/typo.html
----
-<article class="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>
- AÄaäOÖoöuÜuüß@€¢
- <strong>AÄaäOÖoöUÜuüß@€¢</strong>
- <em>AÄaäOÖoöUÜuüß@€¢</em>
- <strong><em>AÄaäOÖoöUÜuüß@€¢</em></strong>
- </h1>
- <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>
--- /dev/null
+---
+title: "Projects"
+url: /projects.html
+outputs:
+ - html
+weight: 20
+---
+<main class="maincontent">
+ <h1>Projects - Potemkinsche Dörfer!</h1>
+ <ul>
+ <li><a href="potemkin/fix-swf/overview.html" th:href="@{/potemkin/fix-swf/overview.html}">Fix SWF</a></li>
+ <li><a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+ <li><a href="potemkin/accelerator.html" th:href="@{/potemkin/accelerator.html}">accelerator</a></li>
+ <li><a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">Typography</a></li>
+ </ul>
+ </main>
--- /dev/null
+---
+title: "accelerator - Overview"
+url: /potemkin/accelerator.html
+---
+<main class="maincontent">
+ <h1>Accelerator - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "Fix SWF"
+url: /potemkin/fix-swf/overview.html
+build:
+ render: local
+outputs:
+ - html
+---
+<main class="maincontent">
+ <h1>Overviw - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "Fix SWF - Getting Started"
+linkTitle: "Getting Started"
+url: /potemkin/fix-swf/getting-started.html
+---
+<main class="maincontent">
+ <h1>Getting Started - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "Fix SWF - Overview"
+url: /potemkin/fix-swf/overview.html
+---
+<main class="maincontent">
+ <h1>Overviw - DUMMY</h1>
+ </main>
--- /dev/null
+---
+title: "HTML-Experimente"
+---
+<div>
+ <h1>HTML-Elemente / spezielle Seiten</h1>
+ <h2>Die Templates</h2>
+ <ul>
+ <li><a href="templates/layout.html">Layout</a> - Das Layout für juplo.de</li>
+ <li><a href="templates/fragments.html">Fragmente</a> Auf mehreren Seiten verwendete Inhalte</li>
+ <li><a href="error/404.html">404-Fehlerseite</a></li>
+ <li><a href="error/5xx.html">5xx-Fehlerseite</a></li>
+ <li><a href="templates/testlab.html">Testlab</a> Testseite für die Skalierung auf untrschiedliche Seitenbreiten</li>
+ </ul>
+ </div>
+<article class="maincontent">
+ <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
+ <h2>Seiten zum Testen gerenderter Inhalte</h2>
+ <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="error/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="error/5xx.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>
--- /dev/null
+---
+title: "HTML-Experimente - Basis-Layout"
+linkTitle: "Basis-Layout"
+url: /potemkin/html-experimente/basis-layout.html
+---
+<main class="maincontent">
+ <header><h1>Nur das Basis-Layout</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Langer Breadcrumb"
+linkTitle: "Langer Breadcrumb"
+url: /potemkin/html-experimente/breadcrumb.html
+---
+<ol id="crumbs">
+ <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="@{/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>
+<article class="maincontent">
+ <header><h1>Seite mit sehr langem Breadcrumb</h1></header>
+ <p>Eine Seite mit einem extrem langen Breadcrumb...</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Druck-Layout"
+linkTitle: "Druck-Layout"
+url: /potemkin/html-experimente/druck-layout.html
+---
+<main class="maincontent">
+ <header><h1>Die für den Ausdruck angepasste Ansicht</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "This Page Will Raise An Error"
+url: /potemkin/html-experimente/error.html
+---
+<p>This page will raise an error, because the <strong><code>uri</code></strong> is set to an unknown value...</p>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt"
+linkTitle: "Fast leere einspaltige Seite mit Marginalinhalt"
+url: /potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
+---
+<nav id="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 class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
+ <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+ </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere einspaltige Seite"
+linkTitle: "Fast leere einspaltige Seite"
+url: /potemkin/html-experimente/fast-leer-einspaltig.html
+---
+<nav id="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 class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere einspaltige Seite</h1></header>
+ <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte"
+linkTitle: "Fast leere Seite ohne Menü aber mit Marginalspalte"
+url: /potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
+---
+<nav id="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 class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite ohne Menü"
+linkTitle: "Fast leere Seite ohne Menü"
+url: /potemkin/html-experimente/fast-leer-kein-menü.html
+---
+<nav id="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 class="cf" id="menu">
+ <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+ <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+ <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+ </ul>
+ </nav>
+<article class="maincontent">
+ <header><h1>Fast leere Seite ohne Menü</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt"
+linkTitle: "Fast leere Seite mit Menü und Marginalinhalt"
+url: /potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html
+---
+<article class="maincontent">
+ <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Fast leere Seite mit Menü"
+linkTitle: "Fast leere Seite mit Menü"
+url: /potemkin/html-experimente/fast-leer-mit-menü.html
+---
+<article class="maincontent">
+ <header><h1>Fast leere Seite mit Menü</h1></header>
+ <p>Ein ganz bischen Text...</p>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Formulare"
+linkTitle: "Formulare"
+url: /potemkin/html-experimente/formulare.html
+---
+<article class="maincontent">
+ <header><h1>Formulare</h1></header>
+ <form action="#" class="form" 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" cols="50" id="textarea_01" 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 action="#" class="form" 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" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_02">Text zentriert</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_04">Text fett</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
+ <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" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Einspaltige Radiobuttons...</h2>
+ <fieldset class="f radiobutton">
+ <div class="f">
+ <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
+ <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" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b02">Option X</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
+ <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 action="#" class="form" 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" name="checkbox_tbox" type="checkbox">
+ <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" name="checkbox_tbox" type="checkbox">
+ <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 action="#" class="form" method="get">
+ <h2 class="f">Alleinstehende Checkbox</h2>
+ <div class="f checkbox">
+ <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ </form>
+ <form action="#" class="form" 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 class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
+ <input class="f" id="text_tbox_01" type="text" value="Mustermann">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_02">Vorname</label>
+ <input class="f" id="text_tbox_02" type="text" value="Max">
+ </div>
+ <div class="f select required">
+ <label class="f" for="text_tbox_03"><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 class="f" for="text_tbox_04"><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 class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
+ <input class="f" id="text_tbox_05" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_06">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 action="#" class="form" 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 class="f" id="city" type="text">
+ <p class="f info">
+ Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+ </p>
+ </div>
+ </form>
+ <form action="#" class="form" method="get">
+ <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+ <div class="f text required">
+ <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
+ <input class="f" id="text_tbox_05" type="password" value="t">
+ </div>
+ </form>
+ <form action="#" class="form" 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 class="f" for="file_tbox_01"><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 class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+ <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+ <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
+ </div>
+ <div class="f textarea required">
+ <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+ <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
+ </div>
+ <div class="f checkbox">
+ <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" 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 checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" 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" id="username" name="username" tabindex="6" type="text">
+ </div>
+ <div class="f text">
+ <label class="f" for="password">Passwort</label>
+ <input class="f" id="password" name="password" tabindex="7" type="password">
+ </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 alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
+ </div>
+ <div class="f text">
+ <label class="f" for="captcha">Lösung</label>
+ <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
+ </div>
+ </div>
+ </div>
+ </article>
--- /dev/null
+---
+title: "HTML-Experimente - Kein Layout"
+linkTitle: "Kein Layout"
+url: /potemkin/html-experimente/kein-layout.html
+---
+<main class="maincontent">
+ <header><h1>Alle Stylings deaktiviert</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Layout PHONE"
+linkTitle: "Layout PHONE"
+url: /potemkin/html-experimente/phone.html
+---
+<main class="maincontent">
+ <header><h1>Layout für Smartphones</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Basis-Layout & Seitenaufteilung"
+linkTitle: "Basis-Layout & Seitenaufteilung"
+url: /potemkin/html-experimente/seitenaufteilung.html
+---
+<main class="maincontent">
+ <header><h1>Nur das Basis-Layout und die Seitenaufteiltung</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Basis-Layout & Seitenkopf"
+linkTitle: "Basis-Layout & Seitenkopf"
+url: /potemkin/html-experimente/seitenkopf.html
+---
+<main class="maincontent">
+ <header><h1>Nur das Basis-Layout und der Seitenkopf</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Symbol-Font"
+linkTitle: "Symbol-Font"
+url: /potemkin/html-experimente/symbole.html
+---
+<article class="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>
--- /dev/null
+---
+title: "HTML-Experimente - Layout TABLET"
+linkTitle: "Layout TABLET"
+url: /potemkin/html-experimente/tablet.html
+---
+<main class="maincontent">
+ <header><h1>Layout für Tablets</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "HTML-Experimente - Media-Query-Test: BEISPIEL"
+linktTitle: "Media-Query-Test: BEISPIEL"
+url: /potemkin/html-experimente/testlab.html
+---
+<div class="content">
+ <form action="#" class="testlab form" 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" cols="50" id="textarea_01" 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 action="#" class="testlab form" 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" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_02">Text zentriert</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_04">Text fett</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
+ <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" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Einspaltige Radiobuttons...</h2>
+ <fieldset class="f radiobutton">
+ <div class="f">
+ <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
+ <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" name="radio_tbox" type="radio">
+ <label class="f" for="radio_tbox_b02">Option X</label>
+ </div>
+ <div class="f">
+ <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
+ <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 action="#" class="testlab form" 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" name="checkbox_tbox" type="checkbox">
+ <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" name="checkbox_tbox" type="checkbox">
+ <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 action="#" class="testlab form" method="get">
+ <h2 class="f">Alleinstehende Checkbox</h2>
+ <div class="f checkbox">
+ <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
+ <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+ </div>
+ </form>
+ <form action="#" class="testlab form" 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 class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
+ <input class="f" id="text_tbox_01" type="text" value="Mustermann">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_02">Vorname</label>
+ <input class="f" id="text_tbox_02" type="text" value="Max">
+ </div>
+ <div class="f select required">
+ <label class="f" for="text_tbox_03"><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 class="f" for="text_tbox_04"><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 class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
+ <input class="f" id="text_tbox_05" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="text_tbox_06">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 action="#" class="testlab form" 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 class="f" id="city" type="text">
+ <p class="f info">
+ Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+ </p>
+ </div>
+ </form>
+ <form action="#" class="testlab form" method="get">
+ <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+ <div class="f text required">
+ <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
+ <input class="f" id="text_tbox_05" type="password" value="t">
+ </div>
+ </form>
+ <form action="#" class="testlab form" 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 class="f" for="file_tbox_01"><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 class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+ <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
+ </div>
+ <div class="f text required">
+ <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+ <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
+ </div>
+ <div class="f textarea required">
+ <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+ <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
+ </div>
+ <div class="f checkbox">
+ <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" 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 checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" 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" id="username" name="username" tabindex="6" type="text">
+ </div>
+ <div class="f text">
+ <label class="f" for="password">Passwort</label>
+ <input class="f" id="password" name="password" tabindex="7" type="password">
+ </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 alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
+ </div>
+ <div class="f text">
+ <label class="f" for="captcha">Lösung</label>
+ <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
+ </div>
+ </div>
+ </div>
+ </div>
--- /dev/null
+---
+title: "HTML-Experimente - Layout TINY"
+linkTitle: "Layout TINY"
+url: /potemkin/html-experimente/tiny.html
+---
+<main class="maincontent">
+ <header><h1>Layout für sehr kleine Bildschirmgrößen</h1></header>
+ <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+ </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+ MARGINAL-CONTENT
+ </aside>
--- /dev/null
+---
+title: "Typography"
+url: /potemkin/typo.html
+---
+<article class="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>
+ AÄaäOÖoöuÜuüß@€¢
+ <strong>AÄaäOÖoöUÜuüß@€¢</strong>
+ <em>AÄaäOÖoöUÜuüß@€¢</em>
+ <strong><em>AÄaäOÖoöUÜuüß@€¢</em></strong>
+ </h1>
+ <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>
projects / website / commitdiff