The Great Silver Tower Surfing Up To The Top

Information

Hello Welcome. Jquery 'Slick': bei den Abschnitten 'Impressions' und 'Team' sehen Sie einen responsive Jquery Schieberegler, welcher eine unterschiedliche (beliebig einstellbar) Anzahl von Objekten verschiebt. Als kleines, aber sehr dekoratives Extra haben wir bei 'Team' noch per CSS ein hälftiges und teiltransparentes Textfeld auf jedem Objekt als weitere Ebene drauf gelegt. Eine Mausberührung verschiebt das Textfeld animiert nach oben hinaus und zeigt somit das komplette Bild an.

Nachfolgender Button-Link öffnet ein Fenster per CSS-div-Box, ganz ohne Javascript. Desgleichen beim Button im Abschnitt 'Impressions', dort wird im Boxfenster (Button: More Pics) eine Foto-Galerie angezeigt. Sint duis deterruisset quo ad, menandri senserit sententiae mei te. Vis eu porro simul utinam, saepe mentitum tacimates sea at. Utroque sensibus duo at, nibh minimum ut sea, est an primis denique sapientem. Oratio salutatus in per. Sea aeque equidem offendit eu, posse latine ea eam.

About Us

Hinweis:

Der nachstehende Button-Link verweist auf eine Seite innerhalb dieser Homepage. In diesem Beispiel wird die Seite 'Quartus' (index4.html) geöffnet. Dort wird übrigens die Jquery-Lighbox (Foto-Galerie) erklärt.

Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Nihil nonumes inimicus ne sea, cum oblique eloquentiam definitiones eu, in perpetua persecuti est. No has dicat blandit, sed no facilisi suavitate.

Impressions

Follow Us

Find us on Social Media
Twitter. Facebook. Youtube. Instagram.

Our Team

Chief Executive Officer

Ella Weber

Chief Marketing Officer

Mia Sophie Hofmann

Associate

Leon Alexander Krause

Public Relations

Paula Hansen

Chief Information Officer

Ben Neumann

Office Manager

Ida Lina Fuchs

Chief Financial Officer

Leonie Lange

Manager

Johanna Peters

Chief Operating Officer

Lea Marie Zimmermann

Office Administrator

Finn Elias Berger

Office Worker

Luisa Vogt (Home Office)

Best Friend

Luna The Cat

Office Worker

Emilia Schuster

Leistungen

Hinweis:

Der nachstehende Button-Link verweist auf eine Seite innerhalb dieser Homepage. In diesem Beispiel wird die Seite 'Primus' (index1.html) geöffnet. No aeque fabulas epicuri mei. Euismod dolores per ex, malis etiam delicatissimi mei ex, an novum cum vulputate eloquentiam. His omittam insolens interpretaris ei, cu est persius iuvaret.

Box-Fenster Information

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 'Information' und 'Impressions' aus.
HTML
<label for="open-information"><a>Mehr Erfahren</a></label>
<label for="open-impressions"><a>More Pics</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
So sieht also ein einzelner Text-Link zum Fenster öffnen aus:
HTML
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Dieser Text-Link funktioniert schon prima, aber um gfls. je nach Situation daraus einen Button zu machen, haben wir für die diesbezügliche Formatierung noch unsere CSS-Klassen 'button' und 'mehr_lesen' darum herum gelegt:
HTML
<div class="button"><span class="mehr_lesen">
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
</span></div>
Die dazugehörige Einschalt-Funktion dieser Fenster sehen Sie in der CSS-Datei ('boxfenster.css):
CSS
/* schaltfunktion AN / AUS */
input#open-information:checked ~ .boxfenster,
input#open-impressions: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 'Information-Links':
HTML
<div class="schalter">
<input type="checkbox" id="open-information">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-information"><i class="far fa-window-close"></i></label>
. . . Hier steht der 'Informations 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 Impressions