01Primus noster causae quo magna charta

Jeder Abschnitt enhält einen Button, welcher ein div-Box-Fenster innerhalb der selben Seite öffnet - und zwar ganz ohne Javascript (Jquery) zu verwenden. Wir erklären es auch mit Code-Beispielen hier direkt bei diesem Abschnitt, bitte klicken Sie dazu den Button 'Mehr Erfahren', so das sie gfls. auch weitere Fenster bei Bedarf anlegen/öffnen können.

Zum Beispiel öffnet der Button bei Abschnitt 5 ein Fenster mit einer Foto-Galerie oder beim Abschnitt Quartus auch die Links 'Information' und 'Hilfe'. Mutat populo vivendo nam eu, eum no esse omnesque. Noster causae quo cu, id vidit iudico cetero has. Pro tantas vocent sadipscing ei. Eos ne ridens delectus ocurreret. Te cum harum scribentur, qualisque explicari vituperata ea vel, ut clita nusquam mnesarchum cum.


Movet tibique verterem an duo, elaboraret vituperatoribus in pri. Etiam docendi usu ei, fugit zril tibique mei an, soluta altera forensibus vim ne. Tantas fastidii eloquentiam duo in, cu laudem appetere voluptaria quo. Vivendum scripserit definitiones quo no, detracto accusata theophrastus ex vel. Sed quidam omnesque oporteat in.

02Secundus Presentation labore rationibus


Latine luptatum suavitate vis ne

Case adhuc augue ea per, elit iuvaret minimum nec ex. Quo dignissim vulputate voluptaria no, est no oportere erroribus concludaturque, eos habemus jump to Quintus reprimique ea. Priin omnes integre lobortis, mei in sumo ferri. Ad ius admodum sensibus elaboraret, sed ex oratio corrumpit deterruisset.

Vel tale regione forensibus

Pril munere alterum usu ex, prompta intellegat ea vel. Verear menandri expetendis pro cu. Te has mazim legendos assentior, eu quo unum labitur eleifend.

03 Tertius sumo posse velit vix democritum

Modo invidunt ex vis, duo dolor mandamus ex. Ius ea stet discere, electram neglegentur ea vix. Est deleniti omittantur ut. Eligendi adolescens eam eu, ex qui saperet nostrum. Stet justo antiopam cum cu. Vel no quidam numquam. Per debitis ancillae mandamus eu.

Solum homero intellegebat eum in, id diceret appellantur efficiantur sit. Has id tollit constituam. Et mel labitur convenire vulputate, has no fastidii eleifend. Sumo posse velit eos no, vix democritum deseruisse cu. Id cum case nobis suavitate, cum ea suas malis tincidunt, est ad diam commune. Eu novum delicatissimi mei, nam alia ludus eirmod et, ne est esse patrioque.

04Quartus vis choro melius

Sed sumo suas prompta ex, alia saperet evertitur cu per, soleat consequat voluptatum an eos. Errem noluisse praesent ea vix, eum iisque admodum et. Tale labitur ei sit, ea usu omittam consequuntur. Vel nominati consetetur definitionem ex, has id veritus philosophia. No dicam libris dictas eam, facete offendit consequat te mei.

Social Media und Info

 

05Quintus nominavi probatus legendos eam

Possit invenire sed id, sit cu etiam solet vulputate, tritani impedit cum id. Eu vel melius mediocritatem. Duo ad insolens disputationi conclusionemque. Duo ne tota solet, duo ei fabellas jump to Secundus. Minimum luptatum mea ei. Est meliore alienum ex, an sed amet virtute, nec ad ferri solet alterum.


Ut possim offendit mel, lorem nostrud definitiones cu eam, ius laoreet docendi commune no. Eos id viris atomorum euripidis. Vim suavitate iudicabit eu, viris invenire mel no. Ad nominavi probatus legendos eam, ex fuisset omnesque sea, at nostro nominavi has.

06Sextus facilisi nominati ne duo scripta profundis

Essent volumus luptatum eu his, id cum possit facilis disputando. Eam audire expetenda scribentur et, ei quo augue liber sententiae, ex veniam graecis vis. Decore laoreet noluisse nec an, populo interpretaris mel et. Quas accommodare no nec, eu mea falli vitae, pri ex dolores voluptua comprehensam.


Per erat prompta in, ei sed dico homero definitionem. Amet noluisse interesset cu pro. Has ei unum quando democritum, in ignota sensibus expetenda mei. Nec fugit imperdiet at. Scripta posidonium ad vix, has cu euismod tractatos.

Eum ne omittam imperdiet comprehensam, wisi numquam copiosae duo at. Facilisi nominati ne duo. Delectus partiendo ut nec. In dico sint eos, nec ad noster iriure mandamus. Expetenda definiebas repudiandae ius cu. Eu mea case veritus, usu ullum tempor ea. Pro ei natum vulputate, ne atqui timeam eos.

Box-Fenster Kontakt

Formular- Kontaktieren Sie uns



Adresse

Dr. Michael Christopher Bukowski
Hollywood Downtown-Street No. 10
12345 New Heavenport
United States Of America

Social Media



So finden Sie uns

Anfahrt 1 - Aus Norden

So erreichen Sie uns: Aus dem Norden kommend, orientieren Sie sich an maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

Anfahrt 2 - Aus Süden

So erreichen Sie uns: Aus dem Süden kommend, fahren sie duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Öffnungszeiten

  • MO:Geschlossen
  • DI - MI:08.00 - 18.00 Uhr
  • DO - FR:10.00 - 20.00 Uhr
  • SA:09.00 - 15.00 Uhr

 

Box-Fenster Primus

One-Pager

Bein einem One-Pager, auch genannt Single-Page, spielt sich alles auf einer Seite ab. Die ganze Webseite besteht also nur aus einer einzigen HTML-Seite. Viele Ihrer Besucher werden diese Einfachheit und Direktheit sicherlich zu schätzen wissen.

Box-Fenster öffnen auf der selben Seite

Per div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf den Links im Navigation-Menü sowie bei den Links im Fussbereich. Gerne legen Sie nach diesem Prinzip nur bei Bedarf weitere neue Fenster an bzw. löschen Sie auch nicht benötigte.




Neue Fenster anlegen

Hinweis: Der fettgedruckte Teil bei den nachfolgenden Code-Beispielen soll Ihnen bereits zeigen, wie Sie ein neues Fenster anlegen bzw. zum vorhandenen Code hinzufügen!

So sieht die Verlinkung bei den Buttons/Links 'Primus', 'Secundus' und 'Tertius' in der HTML-Datei aus. 
HTML
<label for="open-primus"><a>Weiter</a></label>
<label for="open-secundus"><a>Weiter</a></label>
<label for="open-tertius"><a>Weiter</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
So sieht also ein einzelner Text-Link zum Fenser öffnen aus: 
HTML
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Dieser Text-Link funktioniert schon prima und würde auch reichen, aber um gfls. je nach Situation daraus einen Button zu machen, haben wir für die diesbezügliche Formatierung noch unsere CSS-Klassen 'button' und 'mehr_lesen' darum herum gelegt: 
HTML
<div class="button"><span class="mehr_lesen">
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
</span></div>
Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css): 
CSS
/* schaltfunktion AN / AUS */
input#open-primus:checked ~ .boxfenster,
input#open-secundus:checked ~ .boxfenster,
input#open-tertius:checked ~ .boxfenster ,
input#open-ihr-fenster:checked ~ .boxfenster {
margin:0;
background:rgba(0,0,0,.7);
opacity:1;
}
Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'Primus-Links': 
HTML
<div class="schalter">
<input type="checkbox" id="open-primus">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-primus"><i class="far fa-window-close"></i></label>
. . . Hier steht der Primus Text . . .
</div></div></div>
Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen: 
HTML
<div class="schalter">
<input type="checkbox" id="open-ihr-fenster">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
. . . Hier steht der Text fuer ihr neues Fenster . . .
</div></div></div>

Das Kontakt-Formular

Dieses Template enthält ein kleines Kontakt-Formular. Drücken Sie dazu den tomatenroten Button "Kontakt" oben im Kopfbereich der Seite.

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) steht im Feld, fliegt aber nach Klick ins Feld 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 Nachrichten-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 Secundus - Responsive testen

Hier zwei gute Möglichkeiten ein responsives Layout zu testen. Laden Sie zunächst wie gewohnt unsere Vorlage ganz normal herunter, entpacken die zip-Datei und rufen dann die Startdatei index.html in ihrem Browser auf. Bei nachfolgend genannter Möglichkeit [1]) rufen Sie den Browser Firefox [1] auf, bei der zweiten Möglichkeit [2] ist die Browserwahl egal, es funktioniert in jedem Browser, nehmen Sie Ihren Lieblingsbrowser.

[1] Testen mit Firefox-Tools

Und zwar soll mit sogenannten Entwicklertools gearbeitet werden. Das Gute ist, der Browser hat diese gleich mit an Bord, man braucht also nicht auf externe Tools zurückgreifen.

Richtig gut gemacht, das Tool. Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrößen testen".

Toll ist bei diesem Testwerkzeug, das sich die jeweilige Auflösung leicht per Klick (Button mit kleinem Pfeil) drehen läßt. So hat man einen guten Überblick über den Portrait- und Landscapemodus, um das Verhalten von Smartphone und Tablet zu prüfen (Hoch-und Querformat).

Mittlerweile hat Firefox diesen Tester um noch eine weitere Option erweitert, nämlich die Möglichkeit verschiedene Marken-Geräte zu testen. Das kann aber auch leicht verwirrend sein, da es ja auch etliche Zwischengrößen bei den Geräten gibt und ja auch niemand wohl bei jeder wechselnden Testauflösung alle Geräte durchklicken möchte.

Eine Möglichkeit es übersichtlicher zu gestalten ist, das Sie im Firefox-Tester unter 'Liste anpassen' eigene Geräte-Profile anlegen und zwar Standard-Größen (die ja auch jeweils umschaltbar sind in Hochkant und Quer-Modus) , auf jeden Fall: 320x480, 360x640 und 768x1024. Unter der Rubrik 'Custom' sehen Sie dann Ihre Profile.

[2] Der schnelle Weg

Noch schneller und einfacher, aber eher für einen ersten allgemeinen Überblick gedacht, testen Sie wie folgt: Wir gehen davon aus, daß Sie Ihre größte Bildschirmauflösung auf dem Desktop-PC eingestellt haben.

Minimieren Sie nun das Browser-Fenster in Ihrem Lieblingsbrowser und ziehen Sie dann das Browser-Fenster mit gedrückt gehaltener Maustaste ganz langsam von rechts nach links in der Breite immer schmaler zusammen und dann wieder umgekehrt von links nach rechts wieder ganz auf.

Achten Sie darauf, wann das Layout umbricht, zum Beispiel von zwei-spaltig auf ein-spaltig oder Objekte sich in der Größe verändern.

 

Box-Fenster Secundus 2

Eum ne omittam imperdiet comprehensam, wisi numquam copiosae duo at. Facilisi nominati ne duo. Delectus partiendo ut nec. In dico sint eos, nec ad noster iriure mandamus. Expetenda definiebas repudiandae ius cu. Eu mea case veritus, usu ullum tempor ea. Pro ei natum vulputate, ne atqui timeam eos.

Tantas audire insolens pro ex, alienum principes ullamcorper ad has. Vis ea commune facilisis, ut vim vocibus eleifend. Cum magna idque noster ea. Cu wisi omittam vis, agam nominavi invenire ex vim, dolores copiosae sea eu. Usu ut adhuc novum mnesarchum, sed ut posse dolore. Modo principes vim ad, quis invidunt repudiandae ne pri.

 

Box-Fenster Tertius-1

Tertius 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 Quartus

Wir verwenden Icon-Fonts

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.




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.

Schrifteinheit REM

Wir verwenden als Schrifteinheit nicht PX, PT oder EM sondern REM. Die Verwendung von REM ermöglicht flexible Schriftgrößen, die sich prozentmässig anpassen. Beim TAG HTML setzen wir in der CSS-Datei die font-Angabe auf 62.5%, welches ca.10 Pixel (px) entspricht.
Hier noch ein Hinweis: Ein Wert von 100% entspricht 16 Pixel (px), wobei 16 Pixel die Standardgröße bei Schriften im Browser ist.

Warum schreiben wir 62.5 % statt 100 % ?
Damit wir nicht ständig die Formel (Pixelwert geteilt durch 16 = rem Wert) anwenden müssen, bei der es krumme, unübersichtliche rem-Werte gibt. Mehr zu der Formel mit Beispiel weiter unten. Es ist so, der umgerechnete Wert läßt sich viel leichter in Bezug zum gewohnten Pixelwert setzen, es erleichtert einfach das Arbeiten. Denn so ergibt sich zum Beispiel:

0.1 rem = 1 px
1 rem = 10 px
1.4 rem = 14 px
2.6 rem = 26 px
30 rem = 300 px

So oder so ähnlich, denn dies ist ein Beispiel, sieht es dann der Code in der CSS-Datei aus: 
CSS
html {
font-size:62.5%;
line-height:1.5;
font-family: georgia, helvetica, serif;
}
Dann folgen die Angabe der Schriftgröße und der Überschriften. 
CSS
body {font-size:1.7rem}
h1 {font-size:3.4rem}
h2 {font-size:2.5rem}
h3 {font-size:1.9rem}
Nachfolgend zwei Beispiele für die prozentmässige Weitervererbung innerhalb der CSS Media Queries:
Bei der Abfrage der Bildschirmbreite ab 1024 Pixel reicht der geänderte Prozentwert und auch bei der Abfrage ab 1280 Pixel reicht der geänderte Prozentwert. 
CSS
@media (min-width: 1024px) {
html {font-size: 68% }
}
@media (min-width: 1280px) {
html {font-size: 72% }
}
Vorteil von REM:
Die Schrift-Werte von z.B. body, h1, h2, h3 müssen nur ein einziges Mal ganz oben im Quellcode und dann nicht mehr wieder angegeben werden und vererben sich im genannten prozentualem Verhältnis einfach weiter. Das gleiche gilt auch für alle anderen HTML-Elemente, die einen Größenwert benötigen, wie z.b. width, height, margin, padding usw., denn wir verwenden die REM-Einheit hier generell im Template.

Ausnahmen von REM:
Wenn wir gelegentlich zusätzlich Pixelwerte (px) verwenden, so hat das folgende Bedeutung:
1. Sehr kleine Werte von 0.1rem oder 0.2rem haben bei der prozentmässigen Weitervererbung keine Auswirkungen.
2. Es ist keine prozentmässige Weitervererbung erwünscht.
Nur als Beispiel verwenden wir für einen Rahmen (border) also 'border:solid 1px black'.




Die allgemeine Formel zur Umrechnung von Pixel zu REM: Man teilt den Pixelwert durch 16 (18/16 = 1.125). Voraussetzung: Die Schriftgröße des Root-Elements ist auf 100% gesetzt und man geht von der 16px Standard-Schriftgröße aus. Beispiel: Die Schriftgröße von 18px entspricht 1.125rem.

 

Box-Fenster Quartus-2

Information 01

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine.

Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.

Information 02

Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!

Information 03

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!

 

Box-Fenster Quartus-3

Hilfe 01

Tellivizzle a magna gangster augue get down get down accumsan. My shizz cool est. Vivamizzle fizzle shiz, viverra vitae, facilisizzle izzle, ultrices izzle, the bizzle. Dizzle ante ipsizzle break it down yo mamma faucibizzle orci luctizzle et ultricizzle posuere cubilia Doggy; Donizzle stuff. Integer yo.

Maecenizzle go to hizzle blandizzle quam. Get down get down go to hizzle crazy orci. Sed own yo'. Crunk fo nulla, that's the shizzle eu, shit brizzle, shizzle my nizzle crocodizzle izzle, nizzle.

Hilfe 02

Sheezy izzle dolizzle. Bling bling magna brizzle, dignissim sit amizzle, fringilla egizzle, bling bling nizzle, tortizzle. Maecenas its fo rizzle nisi. Black malesuada neque izzle risizzle. Suspendisse . Crizzle aliquizzle tristique pot. Suspendisse that's the shizzle bling bling fo shizzle. Sed dolor libero, shizzlin dizzle interdum, posuere izzle, fo shizzle my nizzle izzle, shizzle my nizzle crocodizzle. Stuff go to hizzle tellus. That's the shizzle aliquizzle check out this sizzle amizzle sure.

Hilfe 03

Morbi . Suspendisse fo shizzle. Maecenas nisl. Away pimpin' ante, shut the shizzle up for sure, pizzle ut, scelerisque hizzle, da bomb. Morbi eget neque. Fo shizzle my nizzle felizzle. Pimpin' nonummy, go to hizzle vitae fringilla cursizzle, bow wow wow mi shizzle my nizzle crocodizzle crunk, sizzle laorizzle get down get down enizzle vel augue.

Curabitur consequat fo vizzle elizzle. Fusce bibendum dolizzle dizzle mammasay mammasa mamma oo sa. Own yo' dawg, metus vel dang lacinia, phat erizzle yo tortizzle, yippiyo luctus go to hizzle est you son of a bizzle est.

 

Box-Fenster Quintus

Lightbox Gallery




Jquery Lightbox

So funktioniert die Lightbox

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 Sextus

Te has aperiam labores feugait similique

Eum ne omittam imperdiet comprehensam, wisi numquam copiosae duo at. Facilisi nominati ne duo. Delectus partiendo ut nec. In dico sint eos, nec ad noster iriure mandamus. Expetenda definiebas repudiandae ius cu. Eu mea case veritus, usu ullum tempor ea. Pro ei natum vulputate, ne atqui timeam eos.

Id mel consul omnesque fabellas

Tantas audire insolens pro ex, alienum principes ullamcorper ad has. Vis ea commune facilisis, ut vim vocibus eleifend. Cum magna idque noster ea. Cu wisi omittam vis, agam nominavi invenire ex vim, dolores copiosae sea eu. Usu ut adhuc novum mnesarchum, sed ut posse dolore. Modo principes vim ad, quis invidunt repudiandae ne pri.

 

Box-Fenster Impressum

Hinter den Worten

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Blindtext

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.

Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.

Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.

Die Werbetexter

Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.

 

Box-Fenster Datenschutz

Datenschutz 01

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine.

Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.

Datenschutz 02

Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!

Datenschutz 03

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!

 

Box-Fenster Disclaimer

Allein in der Dunkelheit

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.

Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei?

 

Box-Fenster AGB

-AGB 01-

Scripta persecuti vituperatoribus mea te, assum consequat an eam. Viris labore assentior per te, pri perfecto ocurreret ea, offendit sapientem cum ex. Pro tamquam albucius voluptaria ad, cu his lorem postulant, cu usu ornatus phaedrum adipisci.

Viderer persius dissentiunt pro no, iuvaret consulatu in mel, qui an aeterno torquatos. Eos ad eros ullum tacimates. Falli latine delicata ei sit, has at erat sale consulatu.
Idque dolore inimicus quo cu, ne has iusto labore theophrastus. Primis percipit atomorum ius eu. Odio splendide pro id. Elitr adolescens argumentum id pro, id enim cetero mea.

-AGB 02-

Ut persius nominati delicata cum, ei nullam utamur pro. Mel expetendis sadipscing cu. Cu nam ludus numquam impedit. Ei melius fuisset intellegebat cum, hinc dicunt facilis an usu. Nam omnis oratio id, ut eripuit pericula sadipscing vix, propriae principes id mea. Sed sonet persius ad, graecis molestiae ad his. Cu novum commodo repudiandae mea, per id audiam sententiae contentiones.

Esse assum labore an eum, odio nulla soluta ne his. Augue ponderum dignissim et usu. Aliquam docendi est cu. Nec tota graeco ex, quo in aeque vituperata scriptorem, choro laboramus disputationi vim at.

-AGB 03-

Eu eam facilisi temporibus persequeris, eius tamquam definitiones sed ex, pro id modo ipsum epicuri. Mea nonumy postea an, inciderint comprehensam quo ea. Sed ex odio complectitur. Copiosae appetere iracundia usu no, vis te ludus quodsi eloquentiam. Te pri consul fastidii, te pri animal inermis.

-AGB weitere-

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!