04961 123456-50

### About

## Voluptua erroribus et eam, vix laboramus tota gusto

Dies ist ein One-Pager. Und sogar Einer, der ganz ohne Menü auskommt! Für weitere Inhalte öffnen sich bei einigen Buttons oder dem 'Ordner-Icon' Fenster innerhalb dieser Seite als div-Box, so wie beim nachstehenen Weiter-Button. Aber man muß ja nicht päpstlicher sein als der Papst und somit kann man auch bei einem One-Pager weitere Seiten öffnen, so wie wir das bei den Links im Fussbereich unter 'Rechtliches' im Beispiel gemacht haben. Wir wünschen Ihnen viel Spaß damit.
Learn More
Join Our Project This Year And Get 50% Off ! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
Join Now

### Picture Compilation

## Pics say more than 1000 words

- Foto-Galerie Thema 1
- Foto-Galerie Thema 2
- Foto-Galerie Thema 3

### Nehmen Sie Kontakt mit uns auf

- Phone: (0000) 0000000-50
- Mobile: (+49) 0000-1234567
- Fax: (0000) 7654321-4141
- info@muster-mustermann.de

Mehr Kontakt

### Information

## Important process lorem excelsior lobortis mollis

### Magnificoexcelsior

Partem prompta duo eu, no duo placerat adversarium, mea mutat nostrum euripidis an. Prima aperiam luptatum id quo. Ex salutandi appellantur vis, debet legimus.

### Bonistradevarius

At homero commodo eos, ad wisi decore petentium privixea graeci meliore. Ubique dicunt cu usu, mea ne zril timeam. An nec sapientem consequat conclusionemque, eum tation inermis at. Id modo sanctus.

### Bellaterra

Atqui mediocrem tincidunt eum ad, soleat conclusionemque cum id, numquam offendit qui ea. Alienum constituto ut duo.

## Box-Fenster About

### 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.

### Was heisst eigentlich Mobile-First?

Die in Bezug auf das Responsive Webdesign angesagte Mobile-First-Technik (von klein auf groß) bietet eine bessere Performance-Leistung gegenüber der Desktop-First-Technik (von groß auf klein).
Das Coding für die kleinste mobile Bildschirmauflösung, nämlich das Smartphone, steht direkt am Anfang der CSS-Datei und wird somit sofort geladen, erst später im Code werden dann per Media Queries - Abfragen der Bildschirmgröße bezüglich der Mindestbreite (min-width) - andere, abweichende, größere Bildschirmauflösungen, wie Tablet, Notebook, Laptop und schließlich Desktop-PC angesprochen

## Box-Fenster Pics Compilation

### 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 Pics Compilation 2

### Pics Thema 2

### Pics Thema 2 B

## Box-Fenster Pics Compilation 3

### Pics Thema 3

## Box-Fenster Project

In interesset definitionem delicatissimi sed. Te vis falli nostrud urbanitas. Pro at doctus molestiae, te sea dicit repudiandae. Has ut veniam altera recteque, eu quas delenit eam. Legere commodo platonem duo ne, pro alia aliquid explicari in, et eum nullam sensibus scriptorem.
Nihil nonumes inimicus ne sea, cum oblique eloquentiam definitiones eu, in perpetua persecuti est. No has dicat blandit, sed no facilisi suavitate vituperata, nisl nonumes facilis ne eam. Te alii periculis expetendis usu. Vim suscipit theophrastus te! Ea salutatus imperdiet eum? Populo veritus qualisque ne sea, vis id brute utamur! Ferri oratio libris eam an.

## Box-Fenster Kontakt

### Adresse

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

## 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.

## 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 mi amigo
- No tengo dinero
- El mar es azul

## 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.

### Magna charta bella terra, verlinkt

- Suchmaschine Google
- Selfhtml - Nachschlagewerk und Tutorial für HTML und CSS
- Wikipedia - Freies Lexikon
- Youtube - Video Plattform