Keek's Webseite

Technik und Bedienkomfort

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.

  • Responsive Website
  • Onepager bieten ein besonderes Surferlebnis
  • Smooth-Scrolling für Optik und Feeling
  • Weiter-Fenster (Mehr Lesen) per CSS-Only


Hi, ich bin Dirk…

Wieso Dirk? Die Seite heißt doch Keek’s Webseite…!?

Meinen Spitznamen "Keek" erhlielt ich von meinem besten Freund und Arbeitskollegen. Wir hatten irgendwann den Kultfilm des Ruhrpotts gesehen - Bang Boom Bang - in diesem Film gab es jedenfalls auch einen Dirk, der mit Spitznamen Keek hieß. Die Hintergründe, wie er zu diesem Spitznamen kam, sollte man sich aber im Film anschauen...

Mein Lebensmotto: Geht nicht, gibt’s nicht… Warum?

Weil es für jedes Problem immer eine Lösung gibt und in jeder Wand eine Tür ist. Man muss sie nur sehen (wollen). Deshalb gehe ich auch immer positiv motiviert durchs Leben.

Wie ich das schaffe?

Ich habe über viele Jahre gelernt, einen bestimmten gedanklichen Ablauf für jede erdenkliche problematische Situation anzuwenden. Diesen Ablauf findet man bei der Feuerwehr, im Management und bei vielen anderen Institutionen als Führungskreislauf wieder. Das geht wirklich…

Was hilft noch? Ruhe und Gelassenheit…

Mein Ausgleich und zugleich größtes Hobby ist Griechenland. Land und Leute sowie deren Lebensart faszinieren mich sehr. So sehr, dass wir als Familie seit mehr als 30 Jahren viele unserer Urlaube dort verbringen. Die Griechen sind reich an Herz und Herzlichkeit...

Gastfreundschaft wird überall großgeschrieben und so ist es denn auch nicht verwunderlich, dass man allerorten sehr herzlich empfangen wird und wir immer wieder möglichst viel Zeit in Griechenland verbringen möchten. Wir sind im Sommer öfter auf Kreta unterwegs. Wir haben aber auch einige andere griechische Inseln sowie das Festland besucht.

Kreta zählt wohl zu den schönsten und abwechslungsreichsten Inseln der griechischen Inselwelt. Das wahre Kreta findet man abseits der touristischen Pfade in den Bergen und dem Hinterland dieser prachtvollen Insel. Kaum erreicht man erste Dörfer abseits der Touristenzentren und Hauptstraßen, schon empfängt einen die Ruhe und Gelassenheit der kretischen Lebensart.

Auch kulinarisch bin ich eher Grieche - ich liebe die griechische Küche sehr, vorzugsweise die vielfältige kretische Küche, vor allem mit gegrilltem Lamm.

Meine Urlaubs-Fotogalerie

Lightbox Urlaubs-Fotogalerie

Bilder sagen oft mehr als Worte. Klicken Sie den nachstehenden Button und Sie gelangen zu meiner Urlaubs-Fotogalerie, welche sich in einer Box innerhalb dieser Seite öffnet und genießt die Eindrücke.

  • Jquery Lightbox Gallery


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

Strukturierte Abschnitte

Sie sehen auf dieser Webseite verschiedene Abschnitte, die farbig getrennt sind. Wir erklären Ihnen, wie wir das angelegt haben, klicken Sie hierzu den nachstehenden Button.

Quartus Kontakt



Quintus nsere Leistungen

Best Services

Lorem Ipsum Antes

Bella Terra

Profundis Majore

Luna Sol

Megaprima Humanus



Sextus Information

Weitere Seiten

Klicken Sie auch die Beispiel Links Impressum, Datenschutz und Disclaimer im Fussbereich. Bei diesen eher textlastigen und nicht zum eigentlichen Inhalt gehörenden Seiten haben wir uns entschlossen, diese als weitere HTML-Seiten zu öffnen.

Nunc interdum lacus

Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.


Box-Fenster Home

Fenster öffnen auf der selben Seite

Per div-Box (deshalb haben wir es Boxfenster genannt) öffnen sich alle Fenster bei Klick auf den Weiter-Button bzw. Mehr-Lesen o.ä. Dieses Öffnen der Fenster funktioniert nur per CSS und ganz ohne Javascript.

Fenster Abdunklung

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.

 

Was hilft noch, um ausgeglichener zu werden?

Geocachen hilft auch... Es bereitet sehr viel Spaß, sich in der Natur zu bewegen und so bisher nicht gekannte Ecken und Lostplaces kennenzulernen. Auf jeden Fall ein sehr schöner und entspannender Zeitvertreib.

Wenn es einmal etwas schneller gehen soll, wird das Motorrad aus der Garage geholt und eine Runde gedreht. So bekommt man auch sehr gut den Kopf frei. Leider kommt dieses Hobby wegen Zeitmangel häufig etwas zu kurz.

Nun noch etwas über meinen Werdegang…

Ich lebe mit meiner Familie im schönen und grünen Ruhrgebiet, nicht mittendrin, sondern am Rand zum Münsterland. Hier bin ich schon seit meiner Geburt tief verwurzelt. Seit meinem zehnten Lebensjahr bin ich mit voller Überzeugung bei der Feuerwehr tätig, damals in der Jugendfeuerwehr und später in der Freiwilligen Feuerwehr, Löschzug Rauxel-Dorf. Nach einer handwerklichen Ausbildung zog es mich beruflich auch zur Feuerwehr, ich machte also kurzentschlossen das Hobby zum Beruf. Inzwischen blicke ich auf eine über 40-jährige Feuerwehrtätigkeit zurück und sehe es immer noch als Berufung und nicht als Beruf. Anderen Menschen in Notlagen helfen zu können, ist zudem ein sehr schönes Gefühl und gibt dem Leben einen Sinn.

 

Fotogalerie

So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.

Korfu 2020



Kreta 2022

 

Box-Fenster Tertius - Die Abschnitte im Inhalt

Mit Pseudo-Element 'nth-child(n)'

Auf der Seite (index.html) sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen nachstehend.

Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche Elemente innerhalb eines Elternelement verschieden aussehen lassen möchte. Insbesondere bei Wiederholungen ist dies effektiv.

Alle Möglichkeiten:

SELFHTML-Wiki beschreibt es, aber noch viel übersichtlicher und mit sehr vielen Beispielen erklärt es die Webseite h5c3 .

Die wichtigsten Möglichkeiten:

Wie an den vorstehend genannten Links zu sehen, gibt es mehrere 'nth-child-Selektoren'. Nachfolgend möchten wir aber Ihnen die wichtigsten beschreiben:

1.) Einfache 'nth-child-Selektoren':

1.a) Spricht jeden Abschnitt individuell an:

'nth-child(1)' spricht den ersten Abschnitt an.
'nth-child(2)' spricht den zweiten Abschnitt an.
'nth-child(3)' spricht den dritten Abschnitt an.
'nth-child(4)' spricht den vierten Abschnitt an usw.

1b) Spricht jeden zweiten Abschnitt an:

'nth-child(odd)' spricht jeden ungeraden Abschnitt an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an (also 2, 4, 6, 8 usw).


2.) Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler und effektiver. Hier im Beispiel die Anweisungen für jeden dritten anzusprechenden Abschnitt.

'nth-child(3n+1)' spricht den ersten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.

'nth-child(3n+2)' ist für den zweiten Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.

'nth-child(3n+3)' spricht den dritten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.

'nth-child(3n+4)' spricht den vierten Abschnitt an und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 4, Abschnitt 7, Abschnitt 10 usw. sind identisch.

Wie funktioniert es in diesem Template ?

Wir haben den 'nth-child-Selektor' für die Abschnitte in der Datei format.css angelegt. Und zwar haben wir den 'nth-child-Selektor' auf unsere CSS-Klasse namens 'section-content' gesetzt und hierbei 'nth-child(odd/even)' verwendet.

CSS
<!-- Allgemeines Beispiel-->
.section-content:nth-child(odd) {
background:white;
color:#000;
}
.section-content:nth-child(even) {
background:black;
color:#fff;
}


So sieht ein Abschnitt in der HTML-Datei aus:
HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
So sehen zwei Abschnitte in der HTML-Datei aus:
HTML
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 1 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 2 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->

Sehr praktisch und übersichtlich: Der Code für die Abschnitte ist also in der HTML-Datei immer der gleiche, egal wieviele Abschnitte.

 

Box-Fenster Quartus

Anfahrt 1

So errreichen Sie uns: Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. 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.

Anfahrt 2

So errreichen Sie uns: Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

 

Box-Fenster Quintus Leistungen

What We Offer

Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna.


Weitere Leistungen

Vivamus Egatas

Donec Justo Massa

Profundus Erectus



Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero.

Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor.

 

Box-Fenster Sextus

Bilder

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.

Icons

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.
Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Alpha Sextus

Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus.

Beta Sextus

Fusce vel dui.Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

Delta Sextus

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.