## Home Start Website

### Ein One-Pager.

Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Alles läuft also auf einer Seite ab. Klicken Sie die Links Home, Primus, Secundus, Tertius, Quartus, Quintus und Sextus und sehen Sie wie innerhalb dieser Seite die verschiedenen Sektionen angesprungen werden. Diese Sprungziele werden sanft und sichtbar angesteuert. Das sogenannte 'Smooth Scrolling', dient der Übersichtlichkeit und besseren Orientierung, denn man registriert also auch optisch, wohin man gelangt, im Gegensatz zum normalen HTML-Anker.

> Auch die Weiter-Buttons (bzw. Mehr-Lesen) bei allen Abschnitten öffnen sich auf der selben Seite in einem Fenster per CSS-Box. Ganz ohne Javascript.

Ebenso: Die Links ganz unten im Fuss-Menü, wie Impressum, Datenschutz und Disclaimer öffnen auch ihren jeweiligen Inhalt als Boxfenster.
Mehr Lesen

## Primus About Us

### Lorem

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos cu pro. Vis dicant principes ei...
Weiter

### Ipsum

Ich bin ein längerer Text. Kein Problem. Die Boxen schließen trotzdem automatisch alle, wenn sie nebeneinander stehen, auf der gleichen Höhe ab. Scripta legimus cum ad, viris laboramus voluptaria eu nam. Has nostro diceret appareat ut, invidunt prodesset dissentiet sed ei, nostro eligendi sit...
Weiter

### Delta

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestatis...
Weiter
Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam.

## Secundus Gallery Lightbox

Arbeitsplatz in Schwarz & Weiss Harmonie
Meditation - Click Me
UP TO THE TOP - Successfull Big Business
Horses - Click Me
We All Need Water
Home Office - My Work is relaxing!
Mehr Fotos

## Tertius Technik

### Responsive Webdesign

Responsive Webdesign ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren.

### Lightbox Picture Gallery

Wir haben in diesem Template die bekannte, beliebte und bewährte 'Lightbox' Foto-Gallerie eingebaut. Klicken Sie bitte dazu auf die Fotos. Sie finden die Gallery auf gleich auf dieser Seite beim Abschnitt 'Secundus'.

### Erweiterung der Lightbox mit Box-Slider-Animation

Wir haben die Lightbox weiter optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery sehen Sie bei Mausberührung der Fotos einen Box-Slider-Effekt. Es wird ein farbiges, transparentes Feld, welches eine veränderbare Text-Aufschrift enthält, aus verschiedenen Richtungen herein gefahren.
Mehr Lesen

## Quartus This Is Our Team

### Michael-Kevin

Chief Executive Officer

### Anna-Lena

Chief Marketing Officer

### Peter-Joseph

Chief Information Officer

### Susan-Denise

Chief Operating Officer

MORE Team

## Quintus Kontakt

Box 'Kontakt'. Ne mea partem voluptatibus, eam an iudico maiorum democritum. Ei cum alii percipit, an ludus dignissim eam.

- MO - FR:10.00 - 18.00 Uhr
- DO:09.00 - 13.00 Uhr
- SA:09.00 - 16.00 Uhr

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

Anfahrt
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus.

## Sextus Featuring

### Featuring-A

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. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

### Featuring-B

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Mehr Lesen

## Box-Fenster Home

### Start Our Website

Ab einer gewissen Breite des Displays bzw. Bildschirms sind die Box-Fenster nicht mehr füllend in der Breite und Höhe, sondern wir haben diese horizontal und vertikal mittig zentriert mit einem Abstand zum Rand und als kleinen Hingucker noch dabei den Hintergrund abgedunkelt, damit die Fenster sich noch mehr abheben, gerade bei einem One-Pager ein durchaus wertvoller Aspekt.
Die vorstehend genannte Abdunklung erfolgt per CSS-rgba und ist deshalb in Transparenz-Stärke (Deckung) undTransparenz-Farbe auch beliebig einstellbar.
Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit.
Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi.

## Box-Fenster Primus-1

### Werther

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.
Click me for big pic
Click me for big pic
Click me for big pic
Click me for big pic
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!
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 Primus-2

### Hinter den Wortbergen

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

### Es kam der Tag

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.
Click me for big pic
Click me for big pic
Click me for big pic
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.

## Box-Fenster Primus-3

### Bilder

Die Fotos in dieser Vorlage sind von https://picjumbo.com/ . Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

### Icons

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

## Box-Fenster Secundus

### Picture Gallery For You

Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.
I Love You
Paint Me - Click Me
Escalator
Pferde - Klick mich

## Box-Fenster Tertius - Die Abschnitte im Inhalt

### Mit Pseudo-Element 'nth-child(n)'

Auf der Seite (index.html) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen nachstehend.
Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.

### Alle Möglichkeiten:

SELFHTML-Wiki beschreibt es, aber noch viel übersichtlicher und mit sehr vielen Beispielen erklärt es die Webseite h5c3 .

### Die wichtigsten Möglichkeiten:

Wie an den vorstehend genannten Links zu sehen, gibt es mehrere 'nth-child-Selektoren'. Nachfolgend möchten wir aber Ihnen die wichtigsten beschreiben:
1.) Einfache 'nth-child-Selektoren':
1.a) Spricht jeden Abschnitt individuell an:
'nth-child(1)' spricht den ersten Abschnitt an.
'nth-child(2)' spricht den zweiten Abschnitt an.
'nth-child(3)' spricht den dritten Abschnitt an.
'nth-child(4)' spricht den vierten Abschnitt an usw.
1b) Spricht jeden zweiten Abschnitt an:
'nth-child(odd)' spricht jeden ungeraden Abschnitt an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an (also 2, 4, 6, 8 usw).
2.) Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler und effektiver. Hier im Beispiel die Anweisungen für jeden dritten anzusprechenden Abschnitt.
'nth-child(3n+1)' spricht den ersten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.
'nth-child(3n+2)' ist für den zweiten Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.
'nth-child(3n+3)' spricht den dritten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.
'nth-child(3n+4)' spricht den vierten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 4, Abschnitt 7, Abschnitt 10 usw. sind identisch.
Click me for big pic
Click me for big pic

### Wie funktioniert es in diesem Template ?

Wir haben den 'nth-child-Selektor' für die Abschnitte in der Datei format.css angelegt. Und zwar haben wir den 'nth-child-Selektor' auf unsere CSS-Klasse namens 'section-content' gesetzt und hierbei 'nth-child(odd/even)' verwendet.

    CSS
    <!-- Allgemeines Beispiel-->
    .section-content:nth-child(odd) {
    background:white;
    color:#000;
    }
    .section-content:nth-child(even) {
    background:black;
    color:#fff;
    }

So sieht ein Abschnitt in der HTML-Datei aus:

    HTML
    <!-- ABSCHNITT -->
    <div class="section-content">
    <div class="content">
    ... Inhalt ...
    </div>
    </div>
    <!-- E N D E ABSCHNITT -->

So sehen zwei Abschnitte in der HTML-Datei aus:

    HTML
    <!-- ABSCHNITT -->
    <div class="section-content">
    <div class="content">
    ... Inhalt Abschnitt 1 ...
    </div>
    </div>
    <!-- E N D E ABSCHNITT -->

    <!-- ABSCHNITT -->
    <div class="section-content">
    <div class="content">
    ... Inhalt Abschnitt 2 ...
    </div>
    </div>
    <!-- E N D E ABSCHNITT -->

Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der gleiche, egal wieviele Abschnitte.

## Box-Fenster Team

### More Team Members

### Sabine

Manager

### Monica

Associate

### Mary-Jane

Chief Financial Officer

### Jessica-Sue

Public Relations

### Svetlana

Secretary

### Christopher

Office Manager

## Box-Fenster Quintus

### Kontakt

Michael Mustermann
Kleine Musterstraße 1a
12333 Citystadt am Fluß

### Anfahrt 1

So errreichen Sie uns: 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

So errreichen Sie uns: 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. Aenean massa.
Click me for big pic

## Box-Fenster Sextus

### Featuring

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.

### Featuring-C

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. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

### Featuring-D

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

## Box-Fenster Impressum

### Impressum-01

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.

### Impressum-02

Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

### Impressum-03

Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui.

### Impressum-04

Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.

## Box-Fenster Datenschutz

### Datenschutz-01

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.

### Datenschutz-02

Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

### Datenschutz-03

Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui.

### Datenschutz-04

Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.

### Datenschutz-05

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

## Box-Fenster Disclaimer

### Disclaimer

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.
Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.