Blue Gear Under Silver Moon

Über Uns

Verschiedene Fotos im Kopfbereich

Klicken Sie die Links Primus bis Sextus im Menü und sehen Sie wie wir auf jeder Unterseite ein anderes Foto über das Hintergrund-Foto gelegt haben.

Im Gegensatz dazu gibt es hier auf der Startseite sozusagen eine 'Bild in Bild Kombination', denn wir fanden das macht mächtig was her und man sieht es ja auch häufiger in TV-Trailern, z.B. bei Blockbuster Ankündigungen des Senders Pro7. Hingegen eröffnet sich bei den Unterseiten dank der jeweils wechselnden Fotos ein ganz anderer Look bzw. eine Art Zwiegespräch mit dem Hintergrund-Foto. Viel Spaß beim Erkunden damit!

Klar geht auch ein doppelter Tausch auf jeder Seite im Kopfbereich, also gleichzeitig das Foto sowie das Hinterundfoto zu wechseln. Wir haben das mal als Beispiel auf der Seite Sextus (index6.html) getan.





Fenster auf der selben Seite öffnen

Mit den Weiter-Buttons bzw. 'Mehr Lesen' o.ä. auf dieser Startseite haben Sie die Möglichkeit ausgewählte Unterseiten anzussteuern. Eine Alternative: Per CSS-div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf dem Button, als Beispiel bei dem nachfolgenden Button ( plus Erklärung wie es funktioniert ) sowie dem 'Team-Button' beim Abschnitt Spotlight.

Spotlight

Übrigens: Zahnräder werden gern als Metapher verwendet, um zum Beispiel zu zeigen, das bei einem Projekt alles rund läuft und Prozesse exakt abgestimmt sind. Präzise wie ein Uhrwerk, stetig und gut. Unser Team freut sich sehr auf Sie. Wir möchten, das Sie sich wohlfühlen.

Service

Zahnräder Metapher

Denn Zahnräder als solches werden generell gern verwendet um zu zeigen, das bei einem Projekt alles rund läuft. Präzise wie ein Uhrwerk, ein Rad greift ins andere. Prozesse sind exakt berechnet. Dynamik und Verläßlichkeit sind garantiert.

CSS-Zahnrad-Animation

Inklusive einer CSS-Schaltfunktion | Beim Start der Seite dreht das Zahnrad zunächst automatisch, per Auswahlschalter können Sie es dann pausieren bzw. drei versch. Geschwindigkeiten einstellen. Und noch besser: Ein weiterer Auswahlschalter läßt Sie dabei 3 versch. Farben für das Zahnrad wählen. Der Clou: Beide Auswahlschalter funktionieren unabhängig von einander, somit sind Kombinationen möglich, wie z.B.: Geschw. 1 mit Farbe 2, Geschw. 3 mit Farbe 3, Geschw. 0 ( Pause ) mit Farbe 1 usw. Das Sie natürlich die Geschwindigkeiten und Farben ändern können oder neue Zustände hinzufügen können ist selbsverständlich.

Trendy

Hintergrundbild ausblenden

In diesem Abschnitt wird bei kleinen Auflösungen das Foto im Hintergrund mit CSS-display:none ausgeblendet und bei Tablet-Layout Auflösung wieder eingeblendet. Dies geschieht also über die sog. Bildschirmabfragen per CSS-Media Queries. Damit der Text auf dem Foto auch bei wechselnden Fotos noch gut zu lesen ist, machen wir ab 760px noch folgendes: Das Textfeld geht nicht mehr über die gesamte Breite und es liegt ein zusätzliches Element als Farbfilter über dem Foto. Dieser Farbfilter ist veränderbar und hat hier einen Farbverlauf per CSS background (linear-gradient) nach rechts von Weiss nach halbtransparentem Weiss.

P.S. Wie Sie sehen werden kommt bei größeren Auflösungen natürlich das oben angesprochene 'Background-Image' immer mehr zur Geltung, da eben hier absichtlich weniger Text auf diesem zu sehen ist.

Presentation

Lorem Ipsum

Velit prodesset ei mel. Pri no dicit mucius ornatus, mazim malorum eos in. Quo tale fabellas eu. Nec in discere legimus.

Bella Luna

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior. Scripta laboramus eum eu, id cum omnium iuvaret pertinax.

Universum Deu

No mea facer error, ut pro quas facete, ius reque euripidis temporibus et. Quo dolores hendrerit id.


Information

Gloria Esta Santo

Velit prodesset ei mel. Pri no dicit mucius ornatus, mazim malorum eos in. Quo tale fabellas eu. Nec in discere legimus.

Magna Terra Sol

Ad labore possim antiopam ius, id eam etiam eleifend abhorreant. Scripta invenire vis te, vis ea doctus instructior.


Box-Fenster About

Fenster öffnen auf der selben Seite

Per CSS-div-Box öffnen sich Fenster direkt innerhalb der selben Seite bei Klick auf einigen 'Weiter-Buttons'. Gerne legen Sie bei Bedarf nach diesem Prinzip weitere neue Fenster an bzw. löschen Sie auch nicht benötigte.



Neue Fenster anlegen

Hinweis: Der fettgedruckte Teil bei den nachfolgenden Code-Beispielen soll Ihnen bereits zeigen, wie Sie ein neues Fenster anlegen bzw. zum vorhandenen Code hinzufügen!

So sieht die Verlinkung bei den Links 'About' und 'Spotlight' aus.
HTML
<label for="open-about"><a>More About</a></label>
<label for="open-spotlight"><a>More Spotlight</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css):
CSS
/* schaltfunktion AN / AUS */
input#open-about:checked ~ .boxfenster,
input#open-spotlight:checked ~ .boxfenster,
input#open-ihr-fenster:checked ~ .boxfenster {
margin:0;
background:rgba(0,0,0,.7);
opacity:1;
}
Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'About-Links':
HTML
<div class="schalter">
<input type="checkbox" id="open-about">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-about"><i class="far fa-window-close"></i></label>
. . . Hier steht der About Text . . .
</div></div></div>
Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen:
HTML
<div class="schalter">
<input type="checkbox" id="open-ihr-fenster">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
. . . Hier steht der Text fuer ihr neues Fenster . . .
</div></div></div>

 

Box-Fenster Spotlight

More Team

Katharina Schulte

Heike Mockenhaupt

Steven Ricardo

George Leonard Pitt

Peter Pictureman

Caroline Matuscheck

Claudia von der Spree

Bobby, the dog