Büro - Organisation und Verwaltung Ordnung bis ins kleinste Detail

Information - Hello Welcome

Strukturierte Abschnitte

Auf den Seiten dieses Templates sehen Sie verschieden farbige Abschnitte, welche die Inhaltsbereiche gut voneinander absetzen bzw. strukturieren. Einzig auf dieser Startseite ist der dritte Abschnitt noch besonders formatiert, denn als optischen Hingucker haben wir die dortigen Fotos bis an den Rand gezogen und diesen Bereich mit einem dezenten Box-Schatten versehen. Es läßt sich aber auch alles in einen einzigen farbigen Abschnitt einfügen, sehen Sie hierzu das Beispiel auf der Seite Secundus. Und auch eine dritte Möglichkeit haben wir für Sie angelegt, nämlich hier auf der geheimen Beispielseite Septus (index7.html) läuft es ganz ohne Abschnittsfarbe bzw. nur in der Farbe des Hintergrundes (Weiß). Dort finden Sie auch eine kurze thematische Erklärung.

CSS Box-Fenster

Fenster öffnen auf der selben Seite (inklusive Anleitung):
Nachfolgender Button-Link öffnet ein Fenster per CSS-div-Box, ganz ohne Javascript. Desgleichen beim Button im Abschnitt 'About Us' und 'Leistungen'. Sie können aber auch die Button-Links ohne Box-Fenster öffnen und stattdessen einen normalen Linkverweis nutzen, sehen Sie dazu das Beispiel beim Abschnitt 'Last But Not Least'.

About Us

Kleiner Hinweis:

Nachstehender Button-Link öffnet per CSS ein Box-Fenster. 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. Nihil nonumes inimicus ne sea, cum oblique eloquentiam definitiones eu, in perpetua persecuti est. No has dicat blandit, sed no facilisi suavitate.

Follow Us

Find us on Social Media

Twitter | Facebook | Youtube | Instagram.
Sonet omnes petentium cu eam, qui nulla munere fabellas ex. Ex nam rebum omittantur, nibh ignota vim eu, ei eum delectus corrumpit incorrupte. Sea ex mazim munere accusam, mel no tibique noluisse.
 

Keyboards

Dicam quodsi has eu. Duo temporibus omittantur et. Solet quidam facilisi no vix, ius fugit timeam appareat at, et labore eleifend mel. Iudico consetetur et vix, alterum copiosae adversarium in vis. Feugait moderatius no est, modus senserit efficiendi sed ex, ad vide nostrud maluisset ius. Blandit tacimates abhorreant ea quo.Duis ornare, est at lorem ipsum lobortis mollis, felis libero mollis orci, vitae congue neque lectus vel neque.
 

Devices

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Modern Office

Maecenas nec odio et ante estus tincidunt tempus. Donec vitalus sapien ut libero venenatis nulla faucibus. Nullam quis antererus.
 

Fair Trading

Eros lobortis mollis, felis libero mollis ornare, est at libertas mollis, felis libero allus orci, vitae congue neque lectus vel neque.
 

Unsere Leistungen

Nur bei uns:

Wir sind stolz Ihnen folgende Leistungen anbieten zu können. Nachstehender Button-Link öffnet per CSS ein Box-Fenster. Insbesondere freuen wir uns exeos tale dolor, volumus theophrastus ea ius. Qui animal expetenda no, natum forensibus pri in. Ne mei justo lorem nonumy.

  • Best Manus manum lavat
  • Finest Medias in res
  • Quality in vino veritas
  • Service Amor vincit omnia longer list notice is possible
  • Bene docet, qui bene distinguit

Impressionen

Veritus Fabellas

Ex cum dicam timeam veritus, id facilis menandri adipisci sea. Eu eam stet nemore, ea ius eius atqui principes, ut vituperata dissentias referrentur ius. Eum quidam fabellas invidunt ea.

Postulant Ceteros

Quo ei illud euismod, amet ceteros eum in. Vim ancillae postulant expetendis et, et quo inermis detraxit. An eam erant aeque, nam eu delenit pertinax. Ei vis soleat salutandig.

Sensibus Perfecto

Cu vim eros ridens sensibus. No per iuvaret offendit, aliquam appellantur at vix, his nostrum omittantur an. Id nam oporteat perfecto, qui ad vero viderer. Maiorum iracundia.

Solum Nominave

Ut has inermis persecuti, no vel falli nominavi, persius lucilius quaerendum vix an. At partem oportere deseruisse pro. Sit ei odio omittam luptatum, qui ad hinc solum.

Cum Scripta Probatus

Cum id perfecto menandri reprimique, cum ex wisi aliquid docendi. Qui eruditi euripidis at, has ignota scripta detracto cu. Ea ius debet molestie probatus, postea semper seaut.

Last But Not Least

Button-Link ohne Boxfenster:

Sie könnnen es sich aussuchen, ob Sie Links per Box-Fenster oder als normalen Link öffen. Hier nachstehend das Beispiel ohne Boxfenster. Dieser Button-Link verweist auf eine Seite innerhalb dieser Homepage. In diesem Beispiel wird die Seite 'Sextus' (index6.html) geöffnet. Dort gibt es übrigens noch einige Hinweise zu den Bildern und Icons.
Mehr Erfahren

Box-Fenster Primus 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' (Abschnitt 1 / Primus), 'About' (Abschnitt 2 / Secundus) und 'Leistungen' (Abschnitt 4 / Quartus) aus: 
HTML
<label for="open-primus"><a>Mehr Erfahren</a></label>
<label for="open-secundus"><a>Mehr Lesen</a></label>
<label for="open-quartus"><a>Mehr Lesen</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-primus:checked ~ .boxfenster,
input#open-secundus:checked ~ .boxfenster,
input#open-quartus: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-primus">
<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 Secundus About

Nun in pertinax patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu, ea esse velit ius. Dictas persius cu vix, error nominati platonem ea has, te ius appareat vivendum pertinacia. Cu malis definitionem per, unum definitiones ad sit.

Ad eos justo aperiri, ad graece assentior quo, ad pri clita voluptua definitionem. Senserit philosophia mel et, rebum eripuit definiebas eu cum. No aeque fabulas epicuri mei. Euismod dolores per ex, malis etiam delicatissimi mei ex, an novum cum vulputate eloquentiam.

Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an. Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi.


Some Pics

 

Box-Fenster Quartus Leistungen

Was haben wir zu bieten? Nun hier sind unsere Leistungen auf einen Blick. Gerne können wir pertinax patrioque vel, eum everti detracto no, partem delectus eum in. Mea primis fuisset instructior an, mel quaestio abhorreant cu, ea esse velit ius. Dictas persius cu vix, error nominati platonem ea has, te ius appareat vivendum pertinacia. Cu malis definitionem per, unum definitiones ad sit.

Weitere Leistungen, Standard Liste mit Aufzählungszeichen

  • Gloria Deus Requiem
  • Scientia potentia estas
  • Profundis Documenta Equlibrium
  • Radius Solventa Est
  • Unsiversum Terra Sol

Top Leistungen, Standard Liste, verlinkt, mit Aufzählungszeichen


Veniam officiis assueverit per id, facilisis disputando id eam, vim justo iuvaret atomorum te. Ne qui probo iriure argumentum, elaboraret scribentur et eos, est munere aperiam repudiare an. Est eu aliquip consequuntur, antiopam patrioque mel et, cum ex impetus nominavi.