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 den 'Weiter-Buttons' im PRIMUS-Abschnitt. Bei Klick öffnet sich dort jeweils ein Box-Fenster (CSS-div-Box) innerhalb dieser Seite. Es wurde realisiert als sogenanter 'Toggle-Switch', eine 'JavaScript-Freie' Lösung, welche auch auf mobilen Geräten funktioniert.

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.
 

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.

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.

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

Kleine Info

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.

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.