Bilder und Icons

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

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.

Bezüglich der eher textlastigen und nicht zum eigentlichen Inhalt gehörenden Links wie Impressum, Datenschutz und Disclaimer -ganz unten platziert- haben wir uns entschieden, diese doch als einzelne, also weitere HTML-Seiten zu öffnen. Bitte klicken Sie diese, denn sie dienen auch als Beispiel für den Einbau versch. großer Bildgruppen.

Übrigens, wie man auch Inhalt auf der selben Seite öffnen kann, zeigen wir bei dem Info-Icon ( ) ganz oben. Bei Klick öffnet sich dort ein Box-Fenster innerhalb dieser Seite. Es wurde realisiert als sogenanter 'Toggle-Switch', eine 'JavaScript-Freie' Lösung, welche auch auf mobilen Geräten funktioniert. Durch die CSS-Angabe 'overflow:auto' ist auch längerer Text in der Box möglich, welcher dann durch die erscheinende Scroll-Leiste erreichbar ist.

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

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

World

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

Secundus 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 'Quartus'.

Erweiterung der Lightbox mit Box-Slider-Animation

Wir haben die Lightbox weiter optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery (Quartus) 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.

Tertius Our Core Team

Christine

Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

Sabine

Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

Claudia

Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

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


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.