- Home
- Primus
- Secundus
- Tertius
- Quartus
- Quintus
- Sextus

Trendsetter Company
High Quality Standards

- #### Innovation. No Question.

- #### Am Puls der Zeit.

- #### Top Service. Yes, Sure.

- #### 100% Zufriedenheit.

Your
Number
1

## Informationen

### Layout

Dieses Template heißt 'Trendsetter Company'. Um das Menü zu öffen, klicken Sie bitte auf den sog. Hamburger Button (3 Striche, quer). Dieser Button ist ja mittlerweile als Menü-Symbol überall anerkannt. Hier ist das Besondere, das sich dieser Menü-Button nicht nur auf mobile, sprich kleinere Bildschirmauflösungen bezieht, sondern auch auf alle anderen Auflösungen, z.b. Desktop-PC. Das macht es spannend und dient natürlich auch Design-Zwecken.

- #### La Plan Est Global.

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

- #### Majoris Cum Soma.

  At scaevola apeirian voluptaria quo, vix et maiorum omittam voluptaria. Et elit viris urbanitas pri, est suas assum nonumes ut. Sea purto oportere complectitur ad, denique pertinacia quo et. At scaevola apeirian.

- #### Nova Sol Dia Generalis.

  Exerci postulant id eos, ad mel fabellas luptatum accommodare. Sed ea electram intellegebat. Mediocrem expetenda mel ea.

### Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich 5 Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen hier auf der Seite 'Quartus' (index4.html)

## Schon eingebaut

### Bereits verlinkt

Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.
Ea sea cetero feugiat ponderum, sea sint bonorum ea. Petentium rationibus nec ne. Vix erroribus dissentiunt ad, te sea falli affert. Weiter Facer melius eam ne, dicat tollit vim ne. Voluptua insolens ius in, sit ex nonumy legimus. Nec bonorum ever titur inm eicu vocibus mia locas. Weiter Ea sea cetero feugiat ponderum, sea sint bonorum ea. Petentium rationibus nec ne. Vix erroribus dissentiunt ad, te sea falli affert. Weiter

### 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. So funktioniert diese Foto-Schau: Nach Klick auf ein 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. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen.
Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten. Zum Schließen des Fenster klickt man auf das 'X' oder irgendwo ausserhalb des Fensters.

## Foto Gallerie

Nam decore doctus placerat in, amet melius vis ut, vim latine equidem in. Per nostrum expetendis at. Ea prompta percipitur per. Veri semper ceteros per ei, facilisi perfecto rationibus ex his.

## Responsive Webdesign

### CSS-Media Queries

Responsive Webdesign (RWD) 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. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

### So testen Sie

Diese Responsive-Vorlage verwendet kein Javascript, mit Ausnahme der Lightbox-Gallery (Jquery). Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.

- #### Preferentus Est Vida.

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

- #### Sol Elegatus Mana.

  At scaevola apeirian voluptaria quo, vix et maiorum omittam voluptaria. Et elit viris urbanitas pri, est suas assum nonumes ut. Sea purto oportere complectitur ad, denique pertinacia quo et.

- #### Septimus Id Fabellas.

  Exerci postulant id eos, ad mel fabellas luptatum accommodare. Sed ea electram intellegebat. Mediocrem expetenda mel ea.

Ea sea cetero feugiat ponderum, sea sint bonorum ea. Petentium rationibus nec ne. Vix erroribus dissentiunt ad, te sea falli affert. Weiter

## Technik

### Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für folgendes System entschieden: Die Anordnung der Bilder in Spalten (GRID-System) wird mit der CSS-Technik 'display:Inline-Block' getätigt. Teilweise haben wir unter den Bildern noch Text angelegt, am Ende des Bildtextes folgt dann ein Weiter-Link. Das eignet sich inbesondere natürlich gut für eine Startseite mit wechselnden Inhalten. Das GRID-System beschreiben wir Ihnen hier auf 'Quartus' (index4.html)

### Die Transparenz

Genau genommen muss man hier von einer Teil-Transparenz sprechen. Damit Text im Kopfbereich (hier der Homepagename) sowie auch im Fussbereich (Kontakt, Adresse, Links) auch mit dahinterliegendem Foto noch gut zu lesen ist, liegt über dem jeweiligen Foto noch ein Transparenz-Filter. Per CSS-rgba. D.h. es können auch Farbe der Transparenz sowie auch der Deckungsgrad verändert werden. Dies nur zur Info, falls Sie Ihre eigenen Fotos einsetzen wollen.

### Adresse

- Fa. Michael, Mustermann & Sohn
- 12345 Frankenburg
- Am schönen Großmarkt 18

### Kontakt

- Phone: (0000) 2468246
- Mobile : (+49) 0000-1234567
- Fax: (0000) 7654321-4141
- infokontaktmustersohn@mail.de

### Social Media

©2040 | Trendsetter Company