Merry Christmas & a lot of love

Frohe Weihnachten, liebe Freunde

Dies ist ein One-Pager. Daher enthält dieses Template einige CSS div-Box-Fenster, welche bei Klick auf Links/Buttons innerhalb der selben Seite geöffnet werden - und zwar ganz ohne Javascript (Jquery) zu verwenden. So sind z.B. auch die Links bei Presentation, Fotogalerie, bei den Icons unterhalb vom Homepagenamen sowie im Fussbereich schon per Boxfenster verlinkt.

Die vorstehend genannten Icons öffnen z.B. ein Formular mit Restzeichenzähler oder einen FAQ-Bereich für häufig gestellte Fragen.

Wir erklären es auch mit Code-Beispielen hier direkt bei nachstehendem Link. Bitte klicken Sie dazu den Button 'Mehr Erfahren', so das sie gfls. auch weitere Fenster bei Bedarf anlegen/öffnen können.



Christmas Shop

  • Michael Christopher Bukowski
  • Hollywood Downtown-Street No. 10
  • 12345 New Heavenport

Presentation magna profund gloria

Bitte sehen Sie bezüglich Links, Buttons, Verlinkungen per Liste und Verwendung von Icons bei Verlinkungen auch unsere Beispiel-Seite index7.html
Viel Spaß damit. Merry Christmas.

An omnes dissentiunt his, et nemore euismod quo. Ad vel facete iriure. Eos probatus nominati gubergren cu. Adhuc putant explicari id has. Te sit omnium vidisse, ne mea alia zril everti. Eu nostrud ceteros consetetur duo. Ei hinc homero eam.

Presentation Secundus One

Ex eos tale dolor, volumus theophrastus ea ius. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy, eripuit oportere adversarium et pri, putent disputando ne vim.


Presentation Secundus Two

Nihil nonumes inimicus ne sea, cum oblique eloquentiam definitiones eu, in perpetua persecuti est. No has dicat blandit. Dictas persius cu vix, error nominati platonem ea has teius appa.



Laden Öffnungzeiten

  • Mo - Do:08.00 - 20.00 Uhr
  • Fr09.00 - 19.00 Uhr
  • Sa:10.00 - 16.00 Uhr

Bella marbelus nocha

Qui at malis dicant, vim ad cetero similique quaerendum. Dico ceteros nec te, diam noluisse no vis, minim suscipiantur et eos. Diceret alienum hendrerit sit te, vis quidam assentior moderatius at. Erat omnis blandit eos id, ad quo audire aperiam, stet choro sea ut. Sale atomorum sapientem ex pri, sea at etiam saperet repudiandae.

  • Quality in vino veritas
  • Vamos a la playa, que hora es, no tengo dinero
  • Nothing but thieves, call the police
  • Quod erat demonstrandum

Lightbox Foto Galerie

Nachstehend unsere Bilder-Galerie. Klicken Sie auf den Button. 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. 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.

Box-Fenster Kontakt

Formular-Demo



Restzeichenzähler im Formular

Beim Formular werden die Textzeichen im Textfeld mitgezählt. Die Anzahl ist hier im Beispiel 2000 Zeichen. Jedoch können Sie die maximale Anzahl der Zeichen beliebig selber festlegen, und zwar ganz leicht im Script, welches Sie im Kopfbereich des Templates finden.


So finden Sie uns

Adresse

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

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.

 

Box-Fenster Question

FAQ Frequently Asked Questions

  1. Vamos a la playa, que hora es, no tengo dinero?
    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.
  2. Nothing but thieves, call the police?
    Qui at malis dicant, vim ad cetero similique quaerendum. Dico ceteros nec te, diam noluisse no vis, minim suscipiantur et eos. Diceret alienum hendrerit sit te, vis quidam assentior moderatius at. Erat omnis blandit eos id, ad quo audire aperiam, stet choro sea ut. Sale atomorum sapientem ex pri, sea at etiam saperet repudiandae.
  3. Liberty, equality or fraternity?
    Lorem ipsum dolor sit amet, ne vel constituto adipiscing, vitae patrioque ad est. An oratio putant vocent cum, dicat putant an vel. Ne unum partem qui. Ei debet neglegentur nec, ex sed veri adipisci suscipiantur, odio mandamus.
  4. Quod erat demonstrandum?
    Cu postea labitur inimicus eos. Ea sit inermis facilis, ex exerci semper pro. Sonet primis volumus sed ne, errem everti tamquam eum nes.
  5. Did you have a nice day?
    Carpe diem quam minimum credula posterum.
  6. Beliebig weitere hier anfügen.
    Kein Problem.

A few words about our own business

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.

Leos tale dolor, volumus theophrastus ea ius. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy, eripuit oportere adversarium et pri, putent disputando ne vim.

 

Box-Fenster User

Stuart von den Minions meint

Jeje bee do bee do bee do daa daa uuuhhh bananaaaa gelatooo butt. Jeje para tú tulaliloo wiiiii baboiii jiji. Uuuhhh para tú jiji wiiiii bappleees poulet tikka masala hana dul sae aaaaaah. Ti aamoo! pepete bananaaaa jiji bappleees chasy poulet tikka masala. Hana dul sae potatoooo poopayee potatoooo butt poulet tikka masala. Wiiiii wiiiii hana dul sae chasy jeje gelatooo wiiiii potatoooo tatata bala tu. Ti aamoo! butt bananaaaa wiiiii jeje.

Kevin von den Minions weiß es besser

Pepete tulaliloo uuuhhh underweaaar potatoooo underweaaar la bodaaa baboiii belloo! Wiiiii daa. Bee do bee do bee do tulaliloo aaaaaah po kass pepete hahaha bee do bee do bee do butt bee do bee do bee do poopayee ti aamoo! Hahaha baboiii hahaha bappleees la bodaaa wiiiii la bodaaa baboiii. Po kass la bodaaa bee do bee do bee do po kass baboiii jiji me want bananaaa! Aaaaaah ti aamoo!

 

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/Buttons sowie auch 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. Sie können statt der Boxfenster natürlich auch ganz normal verlinken, wie wir es bei den Beispielen auf der Seite Septus (index7.html) gemacht haben.


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>

 

Box-Fenster Secundus

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.


Location

  • Dr. Michael Christopher Bukowski
  • Hollywood Downtown-Street No. 10
  • 12345 New Heavenport

Kontakt


Bürozeiten Management

  • Mo:Geschlossen
  • Di - Mi:08.00 - 18.00 Uhr
  • Do - Fr:10.00 - 20.00 Uhr
  • Sa:09.00 - 15.00 Uhr

 

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.

Information

Bitte sehen Sie bezüglich Links, Buttons, Verlinkungen per Liste und Verwendung von Icons bei Verlinkungen auch unsere Beispiel-Seite Septus (index7.html)
Viel Spaß damit. Merry Christmas.

 

Box-Fenster Tertius

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 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?