Informationen

Lorem ipsum dolor sit amet

  • Customer lege lata.

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



  • Booking mihi factum, dabo tibi ius.

    At scaevola apeirian voluptaria quo, vix et maiorum omittam voluptaria. Et elit viris urbanitas pri, est suas assum nonumes ut purto. Mehr



  • Plane. Et pereat mundus.

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



  • Ship. Sea vitae.

    Ei scaevola delicata sed, ea sit eripuit delectus elaboraret, nominavi placerat vel eu. Cu vim facilis, nec te tantas dolore. Mehr



Service

Service 1

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

Service 2

Scripta legimus cum ad, viris laboramus voluptaria eu nam. Has nostro diceret appareat ut, invidunt prodesset dissentiet sed ei, nostro eligendi sit.

Service 3

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestatis.

Service 4

Tempor latine usu eu. Cu vix placerat corrumpit, no nec magna rebum convenire, ad assum vivendum neglegentur eum bella vida primissimo est.

Responsive To Go

Responsive Webdesign

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.

More

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.

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.

Ridens labore concept

Tempor latine usu eu. Cu vix placerat corrumpit, no nec magna rebum convenire, ad assum vivendum neglegentur eum. An regione iracundia signiferumque eam. Ex eum suas habemus, novum ludus suscipiantur in eum. Ridens labore te pri. Ei pri enim torquatos assentior.

Die Technik

Einbau der Bilder

Bei den Fotos im Inhaltsbereich haben wir uns für drei Techniken entschieden, nämlich die CSS-Techniken mit 'display:inline-block' und 'display:table' sowie 'float'. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite 'Quartus' (index4.html)

Die Transparenz

Genau genommen muss man hier von einer Teil-Transparenz sprechen. Damit Text 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.

Strukturierte Abschnitte

Hier auf der Startseite 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, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen hier auf der Seite 'Quartus' (index4.html)

Last But Not Least

Template

Dieses Template heißt ' Booking Travel LTD. '. Die Seiten von Home bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Das Menü

Das Menü hat eine Sonderfunktion. Klicken Sie dort auf den 'Info-Button' und es erscheint ein Infofenster während das Menü gleichzeitig nach unten hin verschwindet. Für jede Seite gibt es einen eigenen Info-Text an dieser Stelle.

Unser Menü ist responsive und nur per CSS erstellt. Es funktioniert ganz ohne Javascript und ist außerdem 'touch-friendly', d.h. es läuft auch auf mobilen Geräten.

Adresse

  • Firma Sir Michael Mustermann
  • 12345 Big City Of Nowhere
  • Sample-Nowhere-Street 232 A

Phone

  • Phone: (0000) 0000000-50
  • Mobile 1 : (+49) 0000-1234567
  • Mobile 2 : (+49) 0000-7854321
  • Fax: (0000) 7654321-4141
©2025 | Booking Travel LTD.