About - Liberty omittam principes vis, vim mutat debet nostro ne

Poseidon ist der griechische Gott des Meeres. Er wohnt tief im Meer in einem Kristallpalast. Sint duis deterruisset quo ad, menandri senserit sententiae meite. Vis eu porro simul utinam, saepe mentitum tacimates sea at. Utroque sensibus duo at, nibh minimum ut sea.
Discover

Introduction - Very Warme Welcome

Die 'Weiter-Buttons' öffnen ein div-Box-Fenster innerhalb der selben Seite und zwar nur per CSS und ganz ohne Javascript. Das gilt auch für die 'Weiter-Links' beim Abschnitt namens Information, die hier als Textlinks angelegt wurden. Bei grösseren Auflösungen dunklen wir zudem den Hintergrund der Seite ab, so daß die Fenster sich noch mehr abheben. Die Links im Fussbereich unter 'Rechtliches' öffnen wir hingegen als normale Seite.

Lorem ipsum atqui regione delicata eos, cum ad vocibus accommodare, mei malorum minimum no. Et nec wisi ullum explicari. At vocibus adipisci delicatissimi mei, no quaestio quaerendum has, est eu ipsum putant commune. Te iudico soleat mea, wisi equidem deterruisset in quo, pro cu graeco oporteat. Soleat primis impedit per et. Cu iusto possit eum, vim posse verear ea. At mel omittam omittantur. Quot erat demonstrandum. Alea iacta est. Omnia tempus habent.

Services - Unsere Leistungen

  • Quality in vino veritas
  • Vamos a la playa, que hora es, no tengo dinero en espana
  • Nothing but thieves, call the police
  • Liberty, equality, fraternity

Kontaktieren Sie uns


Information - Important process lorem excelsior lobortis mollis

Auch die nachstehenden Weiter-Links, hier in einer Liste präsentiert, öffnen div-Box-Fenster innerhalb dieser Seite. Das Icon und der Weiter-Link sind hier als zusammenhängende Einheit angelegt (CSS white-space:nowrap). Damit wird verhindert, das bei einem Zeilenumbruch je nach Auflösung eines der beiden Objekte alleine in einer Zeile steht.

  • Do not stumble over something behind you.
  • I will remember and recover, not forgive and forget.
  • Be the change that you wish to see in the world.


Box-Fenster Introduction

Die Bilder

Die Fotos in dieser Vorlage sind vom Foto-Anbieter Picjumbo. Wir haben diese innerhalb unseres Grid-Systems responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Die Font-icons

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Viele weitere Icons sind möglich, denn die sehr verbreitete kostenlose Icon-Schrift vom Anbieter "Fontawesome" wird ja durch einen entsprechenden Link im Kopfbereich des Templates aufgerufen. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.





Das Kontakt-Formular

Dieses Template enthält ein kleines Kontakt-Formular.

Das Besondere am Formular

Bevor wir auf das Besondere (Punkt 3.) zu sprechen kommen, ist zunächst ein Blick auf das Grundsätzliche nötig. Denn es gibt unzählige Arten ein Formular zu gestalten, jedoch nur 2 wesentliche Basis-Möglichkeiten, wie:

1.] Meist steht voran die Beschriftung (Label) des jeweiligen Feldes (z.b. Name) und darunter befindet eine Zeile tiefer das 'input-Feld' zum eigentlichen Eintragen des Namens, um im Beispiel zu bleiben. Oder alternativ steht das Label links oder rechts vom 'input-Feld'.

2.] Um es moderner und platzsparender zu gestalten, kann man auch die Beschriftung direkt in das 'input-Feld' schreiben, per sog. Platzhalter-Text, welcher verschwindet, sobald man den ersten Buchstaben einträgt. Der Nachteil dieser ansich schönen Lösung ist jedoch: Wenn der Platzhalter-Text einmal verschwunden ist, so kommmt er nicht mehr wieder zurück und der Kunde hat keine Orientierungsmöglichkeit mehr, weiss also nicht mehr um was für ein Feld es handelt (Email, Text, Nummer usw.)

3.] Nachstehend unsere Lösung um den Nachteil (von Punkt 2.) auszugleichen:
Die Beschritung (Label) fliegt nach Klick animiert und verkleinert nach oben und bleibt dort permanent stehen. Darunter ist dann wie gewohnt Platz für den Feld-Eintrag. Das ist nicht nur praktisch und nett anzusehen sondern macht auch einen seriösen, vertrauenserweckenden Eindruck.

Bedienkomfort: Prüfung der Felder ohne Javascript

Drückt man den Absenden-Button ohne die Felder auszufüllen bzw. richtig auszufüllen, erscheint eine Meldung des Browsers (Bitte Felder ausfüllen). Was früher ohne Javascript nicht möglich war, geht hier mit HTML5 required und pattern direkt im Browser. Das Email-Feld (input-type="email") im Beispiel erwartet somit eine Eingabe in der Art wie x@x.de um als valide Email durchzugehen.

Diese browsereigene Validierung ersetzt keine serverseitige Überprüfung, kann aber falsche Angaben schon direkt im Browser anzeigen und erhöht so den Bedienkomfort.

Restzeichenzähler

Es wurde ein Jquery-Restzeichenzähler beim Nnachrichten-Feld des Formulars eingebaut. Die Zahl der maximal erlaubten Zeichen beträgt hier 2000 Zeichen, ist hier aber beliebig gewählt und kann jederzeit im Script (befindet sich im Kopfbereich der HTML-Seite) verändert werden. Es werden also die Zeichen mitgezählt und angezeigt und bei Erreichen von über 2000 Zeichen wird das ganze Nachrichten-Feld als Warnhinweis auf die Hintergrundfarbe dunkelrot gesetzt, löscht man dann wieder auf unter 2000 Zeichen wird auf die aktuelle Hintergrundfarbe, sprich Ausgangsfarbe, zurückgesetzt.

Wie wird das Formular versendet?

Zum Versenden der Daten im Formular benötigt man ein Mail-Versand-Script (In der Regel ein PHP-Script) oder einen Anbieter, der Script und Hosting zur Verfügung stellt.

 

Box-Fenster Service

Foto-Galerie Lightbox



Die Lightbox

Lightbox Picture Gallery

Vorstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf einem Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.

Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.

Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle anderen Fotos, welche mit dem 'img-Tag' (und nicht als 'Hintergrund-Image') eingebaut sind, anwenden. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Hier ist der Basis-Code als Beispiel:

Bild ohne Lightbox: 
HTML
<img src="images/beispiel.jpg" width="800" height="530">
Bild mit Lightbox: 
HTML
<a href="images/beispiel.jpg"
data-lightbox="gruppe1"
data-title="Ihre Bildunterschrift">
<img src="images/beispiel.jpg" width="800" height="530"></a>
Noch ein Hinweis: 'data-title' für eine Bildunterschrift ist optional und sollten Sie eine zweite Gallerie innerhalb der selben HTML-Datei aufmachen, so schreiben Sie bei der zweiten Gallerie dann bei 'data-lightbox' gruppe2 statt gruppe1.


Die Original-Lightbox

Hier einmal der Link zur originalen Lightbox-Gallery. Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.

 

Box-Fenster Information-1

Information 1 Info

Die Minions meinen: Me want bananaaa! Underweaaar jiji tatata bala tu pepete para tú bappleees tatata bala tu underweaaar. Pepete hahaha tatata bala tu bananaaaa hana dul sae gelatooo baboiii bappleees poulet tikka masala bananaaaa po kass. Wiiiii underweaaar tatata bala tu tulaliloo uuuhhh. Bee do bee do bee do bee do bee do bee do uuuhhh aaaaaah gelatooo wiiiii bananaaaa bananaaaa.

La bodaaa poulet tikka masala pepete jeje. La bodaaa la bodaaa uuuhhh jiji pepete gelatooo bappleees hahaha daa bappleees. La bodaaa tulaliloo para tú ti aamoo! Tatata bala tu la bodaaa. Minions Ipsum. Me want bananaaa!




Jeje chasy tank yuuu! Pepete poulet tikka masala baboiii. Daa jeje chasy daa jeje bee do bee do bee do gelatooo uuuhhh tatata bala tu daa. Underweaaar pepete jeje jiji. Tatata bala tu bappleees pepete potatoooo hahaha jiji bee do bee do bee do jiji jiji me want bananaaa! Ti aamoo! Hana dul sae poopayee tatata bala tu para tú bee do bee do bee do jeje. Jeje chasy tank yuuu! Butt me want bananaaa! Gelatooo la bodaaa tatata bala tu ti aamoo! Baboiii butt.

Excelsior documenta es profundis

  • Vamos a la playa
  • Que hora es
  • No tengo dinero
  • El mar es azul

Magna charta bella terra, verlinkt

 

Box-Fenster Information-2

Information-2 Info

Kevin ist ein großer, länglicher Minion mit zwei Augen und aufsprießenden Haaren. Er trägt meist seine Golfkleidung. Kevin sagt: Uuuuhhh belloo! Wiiiii hana dul sae baboiii me want bananaaa! Chasy butt poopayee tank yuuu! Para tú bappleees tank yuuu! Pepete tank yuuu! Chasy potatoooo. Pepete la bodaaa ti aamoo! Chasy. Jiji bee do bee do bee do po kass tatata bala tu daa bee do bee do bee do uuuhhh bee do bee do bee do jeje hahaha daa. Jiji la bodaaa belloo! Pepete baboiii baboiii potatoooo.

Belloo! Baboiii bappleees poulet tikka masala hana dul sae. Hana dul sae baboiii bee do bee do bee do butt jeje chasy po kass butt tank yuuu! Jiji belloo! Tank yuuu! Poopayee gelatooo daa tulaliloo wiiiii. Potatoooo butt chasy po kass butt.




Minions speak banana

Daa wiiiii me want bananaaa! Tatata bala tu baboiii underweaaar wiiiii poopayee potatoooo. Po kass belloo! Jiji jeje. Chasy la bodaaa la bodaaa potatoooo gelatooo tulaliloo ti aamoo! Uuuhhh. Hahaha tank yuuu! Me want bananaaa! Uuuhhh underweaaar me want bananaaa!

 

Box-Fenster Information-3

Information-3 Info

Bob ist ein süßer, kleiner Minion. Er ist etwas dicklich und liebt seinen Teddy sehr. Bob sagt: Poulet tikka masala hana dul sae bappleees bee do bee do bee do para tú ti aamoo! Potatoooo. Bappleees jiji jeje potatoooo bee do bee do bee do bananaaaa. Gelatooo potatoooo poulet tikka masala poopayee bee do bee do bee do tatata bala tu poulet tikka masala. Me want bananaaa! me want bananaaa!

Butt hana dul sae chasy bananaaaa tatata bala tu. Bananaaaa la bodaaa potatoooo chasy potatoooo jeje butt jeje underweaaar tulaliloo. Tulaliloo daa bappleees belloo! Poulet tikka masala bee do bee do bee do aaaaaah me want bananaaa! Me want bananaaa! Tulaliloo gelatooo bananaaaa uuuhhh aaaaaah aaaaaah gelatooo tatata bala tu po kass bananaaaa.