Schnell-Start. Los geht es!

Sie möchten sofort einen Überblick und wollen nachfolgende Erläuterungen zu Technik oder Nutzungsbedingungen sowie Tipps und Informationen zu unseren Templates weiter unten etwas später lesen, dann nachstehend die wesentlichen Optionen zum Schnell-Start:

[ 1 ] Klicken Sie im Menü auf einen der runden Zahlen-Kreise. Jeder Kreis enthält 8 Vorlagen.

[ 2 ] Oder schauen Sie die Homepagevorlagen der Reihe nach durch.
Wir starten direkt mit HP 01 / Quotes, Sayings & Idioms.

[ 3 ] Im News-Bereich (Button: 'Neu') sind unsere letzten ca. 25 neuen Vorlagen gelistet.

Hinweis: Alle Homepage Vorlagen kostenlos für Privat-Nutzung, jedoch kostenpflichtig für eine kommerzielle Nutzung.
Da diesbezüglich Überschneidungen vorkommen können (zum Beispiel Vereine oder bezahlte Werbung), führen wir es weiter unten bei 'Nutzung' detaillierter aus.

Responsive Webdesign.

Alle unsere Vorlagen sind Responsive.

Dank Responsive Webdesign macht Surfen auch auf mobilen Geräten wie Handys oder Tablets Spass: Immer schneller und stärker zunehmend wandelt sich die Größe der Ausgabegeräte. Es gibt mittlerweile sehr viele unterschiedlich große Displays wie Desktop-PCs, Laptops, Notebooks, Tablets, Smartphones, E-Book-Reader. Jedes dieser Geräte gibt es dann zusätzlich noch in vielen Zwischengrößen.

Mit der Responsive-Technik wird versucht für die unterschiedlich großen Displays ein angepaßtes, optimiertes Design für die jeweilige Bildschirmgröße zu gestalten. In der Regel geschieht dies durch Layouts, welche in Prozent statt absoluten Pixelgrößen angelegt sind und insbesondere durch Abfragen von Bildschirmgrößen per CSS Media Queries.

Jedes Gerät erhält also eine optimierte Ansicht - das nervige ' Größer-Ziehen mit 2 Fingern ' bei Smartphone-oder Tablet-Devices (weil Inhalt zu klein und Inhalt ist abgeschnitten) entfällt also endlich. Auch die Drehung dieser Geräte (Hochformat/Querformat), sprich vom Portrait-Modus in den Landscape-Modus wird hierbei berücksichtigt.

One-Pager, einige Beispiele

Wir haben nicht nur die normalen responsive Templates bei uns, welche Sie um beliebig viele Unterseiten erweitern können, sondern auch die beliebten ONE-PAGER.

Bei einem responsive One-Pager besteht die ganze Webseite im Prinzip nur aus einem Webdokument, sprich einer einzigen HTML-Seite. Wichtiger Bestandteil ist das 'Smooth-Scrolling', d.h. die Sprungziele zum jeweiligen Abschnitt werden animiert sanft und gleitend angesteuert. Inhaltsfenster öffnen sich per Klick als CSS-div-Box innerhalb der selben Seite - eben ganz ohne Javascript (Jquery) und damit immer funktionabel - also auch wenn Javascript vom Besucher der Seite in seinem Browser deaktiviert wurde. Nachfolgend einige Beispiele:

Homepage Vorlage , templates , Homepage-Vorlagen, free download

HP 03 | Follow The Horizon

Unser beliebter Klassiker beinhaltet eine CSS-Bildershow, welche hinter dem halbtransparenten Feld mit dem Homepagenamen abläuft.

HP 35 | Up To The Top

Eine vertikale Menü-Leiste sieht man bei einem One-Pager eher selten, dabei macht sie richtig viel Spaß. Denn diese Navigation ist hier bei uns in der Höhe immer bildschirmfüllend und greift dank farblicher Abstufungen die Layoutfarben spannend auf.

HP 61 | Metropolis City

Der CSS-animierte Fade-IN/Fade-Out-Effekt beim Foto im Kopfbereich läßt gar Film-Feeling aufkommen, denn: Während sich der Homepagename von klein nach groß einblendet wird gleichzeitig das Hintergrundbild von groß nach klein ausgeblendet - danach läuft es umgekehrt ab. Im Inhaltsbereich gibt es Jquery-Schieberegler.

HP 72 | Some Nice Places

Eine Full-Screen-Slideshow mit Jquery. Wir haben folgenden CSS-Schalter als Besonderheit hinzugefügt: Klicken Sie das 'Schließen-Icon', so verschwindet die darüber gelegte Menü-Leiste komplett, indem diese animiert nach oben hinausgeschoben wird und somit die volle Sicht auf die Slideshow gewährleistet.

HP 42 | Morning Nature Yoga

Dieser One-Pager in soften Farben hat im Kopfbereich als Hingucker ein großes Icon (veränderbar), umgeben von einem halbtansparenten Kreis.

HP 70 | Fine Pizaa & Fresh Baguette

Mit Abschnitts-Nummern: Die bei jedem Abschnitt sichtbare Ziffer oben links ist eine wichtige Orientierungshilfe gerade bei mobilen Auflösungen. Da die Links im Menü ebenfalls eine Ziffer vorangestellt haben, erkennt man sofort welchen Abschnitt man nach Klick per 'Smooth-Scroll angleitet'. Bei größeren Auflösungen wurden diese Ziffern per CSS-Media-Queries ausgeblendet (display:none}

Homepage Vorlage , responsive templates , Homepage-Vorlagen, free download

Responsive Homepage Vorlage , templates , Homepagevorlagen, free download

HP 15 | Fish In The Sea

One-Pager mit CSS-animierten Font-Icons lassen eine CSS-Fische-Animation + Anker-Animation entstehen. Der Clou ist die CSS-Wellen-Animation per CSS-Background, welche auch den Menü-Kreis wellenmässig mitschwingen läßt.

CSS Linearer Farbverlauf

HP 18 | Unicorn Horus Startup

CSS Farbverlauf im modernen Blau-Violett-Look. Bekannt sind diese bunten, vitalen und atmosphärisch sehr dichten Farbverläufe vom mobilen Betriebssystem ANDROID, immer öfter aber auch - um trendy zu sein - auf normalen Webseiten eingesetzt. Besonderheit bei diesem Template: Per CSS-rgba-Transparenz wird ein Filter erstellt welcher die Fotos im Kopfbereich mit dem Farbverlauf-Hintergrund verschmelzen läßt, also gfls. auch bei Ihren Fotos.

Technik & Nutzungbedingungen.

Technik der Vorlagen

Mühsam eigene Homepages erstellen oder lieber kostenlose Homepagevorlagen nutzen, um sich viel Zeit und Arbeit zu ersparen? Hier gibt es gratis die Vorlagen (bei privater Nutzung) bzw. für ein geringes Entgelt (bei kommerzieller Nutzung).

Wir haben ausschließlich 'Responsive Vorlagen' am Start. Das bedeutet: Es erfolgt nur per CSS über die sog. Media Queries Befehle eine Anpassung oder noch besser gesagt eine Optimierung an all die unterschiedlichen Bildschirmgrößen, wie Smartphone, Tablet, Netbook, Laptop und Desktop. Wir verwenden hierzu das 'Mobile-First-Konzept'.

Unsere Vorlagen sind reine HTML & CSS Templates, Sie benötigen also weder einen sog. Homepage-Generator sprich Web-Baukasten noch ein zusätzliches Framework, wie z.B. Wordpress, Bootstrap oder Joomla o.ä. zum Anpassen. Genauer: Sie müssen die Vorlage also nicht in ein bestimmtes System integrieren, denn die Basis aller Webseiten ist ja HTML und CSS und funktioniert deshalb auch natürlich ganz alleine.

Zum Bearbeiten braucht es wenig, denn es ist nur ein 'HTML-Editor' (z.B. kostenlos: Phase5, Adobe Brackets, Blue Griffon oder andere) nötig sowie ein 'FTP-Programm' (z.B. Filezilla oder andere) zum Hochladen der Seite ins Netz. Mehr nicht! Vorab entpacken Sie bitte die heruntergeladene komprimierte Datei (.zip), wie es allgeimein üblich ist, mit einem ZIP-Programm, wie z.b. Winzip, Winrar oder 7zip. Alternativ gibt es im Netz viele weitere kostenlose Editoren/Programme für die Bearbeitung.

Eine ganz besondere Qualität: Sämtliche Navigations-Menüs bei unseren Templates sind ohne Javascript sondern nur per CSS programmiert, d.h. diese funktionieren in jedem Browser, also auch dann, wenn Javascript im Browser vom Kunden bzw. Besucher deaktiviert wurde. Sie dürfen die Fotos durch Ihre eigenen Fotos ersetzen, Texte, Farben, Schriften ändern. Änderungen am Code sind also gestattet.

Die Schriften in den Templates

Wir verwenden für die Schriften in den Vorlagen lokal eingebundene kostenlose Fonts, d.h. diese sind direkt im Template installiert und werden von dort aus geladen. Das hat den Vorteil, das diese Schriften auch ohne Internet-Verbindung immer angezeigt werden und bei jedem Anwender, sprich Besucher Ihrer Webseite, auch gleich aussehen. Selbstverständlich können und dürfen Sie innerhalb unserer Templates auch andere Schriften wählen.

Hier auf dieser Typographie-Seite
https://raidboxes.io/blog/webdesign-development/typographie-grundlagen-webfonts-tipps/
wird alles um das Thema Schrift sehr gut erklärt.

Hinweise zum HTML-Editor

a. ) Allgemein - Für die Responsive Templates gilt:

Diese können allgemein und das bezieht sich auf alle Anbieter im Internet ( also nicht nur auf unsere Vorlagen ) nicht so gut mit einem Drag-and Drop- Editor (Grafischer HTML-Editor), auch bezeichnet als WYSIWYG-Editor ( What You See Is What You get ), bearbeitet werden, denn diese Art von Editor kann die Bildschirmabfragen per CSS Media Queries in der Regel nicht richtig auslesen und darstellen.

Bitte laden Sie sich eine responsive Vorlage herunter und testen Sie selbst, ob ihr WYSIWYG-Editor in der Lage ist, responsive Seiten zu bearbeiten.

Im Gegensatz zu einem grafischen Editor macht ein textorientierter HTML-Editor keine Probleme, da hier ja insbesondere direkt im Quelltext gearbeitet wird.

b. ) Hilfe für Kunden, die keinen textorientierten HTML-Editor verwenden:

[ 1 ] Laden Sie eine Vorlage herunter und öffnen diese in ihrem Editor und testen Sie ob dieser responsive Seiten bearbeiten kann. Wenn nicht, so können Sie auch Ihren grafischen HTML-Editor in die Quelltext-Ansicht schalten und dort den Code bearbeiten, die aktualisierte Ansicht nach Änderungen des Codes schecken Sie dann eben nicht in der Editor-Ansicht sondern direkt im jeweiligen Browser, im Prinzip also genau so, wie es die Profis sowieso machen, denn der Browser zeigt ja die endgültige,aktuelle Darstellung der Webseite an. Das bedeutet dann konsequenterweise, daß Sie zumindest leichte Kenntnisse in HTML und CSS haben müssen.

[ 2 ] Nehmen Sie besser einen textorientierten HTML-Editor wie zum Beispiel die Editoren PHASE 5 oder ADOBE BRACKETS oder andere nach Ihrem Geschmack.

- HTML-Editor 'Phase 5', kostenlos: Download bei Chip.de
- HTML-Editor' Adobe Brackets', kostenlos: Download bei Chip.de

[ 3 ] Ein kleiner Hoffnungsschimmer bei den WYSIWYG-Editoren scheint der Editor 'Blue Griffon' zu sein. Viele unserer Kunden bestätigten, das dieser auch responsive-fähig ist.

- HTML-Editor 'Bue Griffon', kostenlos: Download bei Chip.de

Die Nutzung

Eine private, d.h. kostenlose Nutzung unserer Vorlagen ist erlaubt. Sie dürfen die Vorlagen bei privater Nutzung anpassen, sprich Grafiken, Texte oder Quellcode anpassen. Je nach dem Inhalt, welcher eingefügt wird kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen, nämlich dann, wenn die Möglichkeit besteht, das Sie damit durch Ihren Inhalt Geld verdienen könnten, z.B. das Anbieten von Tieren gegen Bezahlung bei einer Zucht oder bezahlte Google-Add-Werbung oder Verdienstmöglichkeiten durch Klick zu bezahlten Partnerschaftsprogrammen wie Amazon & Co oder ähnlich. Alle Vereine mit dem Zusatz "e.V"., also alle eingetragene Vereine sind ebenso als kostenpflichtig zu werten, denn die Grenze zwischen nicht-gewinnorientiert und überschüssigen Geldern bei Vereinen läßt sich von uns kaum prüfen, wir denken, Sie verstehen das. Bei einer kommmerziellen Nutzung müssen Sie die Vorlage bestellen.

Eine kommerzielle Nutzung, d.h. bezahlte Nutzung unserer Vorlagen ist erlaubt. Kommerziell heißt, Sie nutzen das Template zum Zwecke des Geldverdienens, also gewerblich, für Ihre eigene Person oder Firma oder für eine dritte Person, sprich andere gewerblich orientierte Person, Firma oder Organisation. Sie dürfen die Vorlagen bei kommerzieller Nutzung anpassen, sprich Grafiken, Texte oder Quellcode anpassen. Die kommerzielle Nutzung ist jedoch nur gegen Bezahlung gestattet, die Bestellung erfolgt dann über unser Bestell-Formular.

[ 1 ] Bestellung
Bei einer Bestellung ist die Vorgehensweise wie folgt: Füllen Sie bitte das Bestell-Formular vollständig aus. Sie erhalten eine ordentliche Rechnung mit ausgewiesener Mehrwertsteuer per Mail sowie per Post in Ihrem Haus-Briefkasten.

[ 2 ] Zahlung
Sie zahlen per Kontoüberweisung innerhalb von Deutschland bzw. kostengünstiger Überweisung aus EU-Ländern - zb. Österreich (über Angabe der IBAN/BIC), bei Nicht-EU-Ländern (z.b. Schweiz) gelten die üblichen Auslandsüberweisungsgebühren Ihrer Bank.
Alternativ können Sie auch per Paypal bezahlen.

[ 3 ] Download
Laden Sie sich die Vorlage selber über den jeweiligen Link "Downloaden" herunter. Dieses können bzw. sollten Sie auch tun, bevor Sie die Vorlage bestellen, denn wir möchten Ihnen ja die Möglichkeit geben, das Template ja vorab auf Ihrem heimischen Rechner zu testen. Bestellen müssen Sie, sobald Sie die Vorlage ins Internet hochladen.

[ 4 ] Preise und Nutzungsdauer
Unsere Preise sind inklusive Mehrwertsteuer. Selbstverständlich sind unsere Preise in Bezug auf eine Homepagevorlage nicht ständig monatlich oder jährlich zu bezahlen, sondern Sie zahlen für eine Vorlage nur einmalig den genannten Preis. Die zeitliche Nutzung ist unbegrenzt genauso wie die Anzahl von Seiten die Sie mit der Vorlage innerhalb einer Domain erstellen können.

[ 5 ] Rechnungsstellung
Die Rechnung geht an die im Bestellformular genannnte Adresse und ist von dieser zu begleichen. Für den Fall, daß Sie die Vorlage also nicht für sich selbst sondern für eine dritte Person nutzen wollen, so können Sie selbst entscheiden, ob die Rechnung und damit die Bezahlpflicht an Sie oder an eine dritte Person (also z.B. Ihr Kunde) geht.

[ 6 ] Domains
Bei kommerzieller Nutzung: Eine Vorlage darf für eine Domain genutzt werden. Die Anzahl der Seiten sowie die Nutzungsdauer ist unbegrenzt und nur einmalig zu zahlen.
D.h. entweder Sie nutzen die Vorlage als normale Person für sich selbst oder Ihre eigene Firma - oder sie verwenden die Vorlage für eine dritte Person (also nicht für sich selbst sondern für eine andere Person oder Firma.

Zusätzliche Domains

Bei zusätzlichen Domains gilt:
Domains mit identischem (gleichem) Inhalt = + 5.00 Euro
Domains mit verschiedenem Inhalt = voller Preis

Hinweis zum identischen Inhalt bei zusätzlichen Domains: Hier stellt sich eventuell die Frage nach leichten Abweichungen bzw. ab wann gilt eine Webseite als identisch, sprich im wesentlichen gleicher Inhalt und ab wann nicht.
Antwort: Klar soll es in in erster Linie um das Prinzip als solches gehen. Wir sind also nicht päpstlicher als der Papst und werden hier keine Wörter oder Absätze zählen. Wir geben also somit nachstehend einen großzügigen Basis-Richtwert vor: Ein Wert von 100% bis 80% gilt trotzdem noch als 'identischer Inhalt'. Ein Wert unterhalb von 80% hingegen wird als Domain mit unterschiedlichem Inhalt gewertet.

Erklärung zu den zusätzlichen Domains:
Wenn Sie die Vorlage auf mehreren Domains (egal welcher Domain-Name) mit identischem Inhalt (z. B. Weiterleitung auf bestehenden Webspace, Domains mit unterschiedlichen Endungen wie z. B. *.net, *.de, *.com) einsetzen möchten, so zahlen Sie für die erste Domain den angegebenen Preis, für jede weitere Domain zahlen Sie kostengünstige 5.00 Euro incl. 19 % Mwst.

Wenn Sie die Vorlage für verschiedene Domains bzw. Projekte mit unterschiedlichem Inhalt nutzen möchten, so müssen wir leider den vollen Preis pro Domain/Projekt berechnen.

[ 7 ] Nutzungsbedingungen:
Bitte lesen Sie vor dem Download der Homepagevorlage unsere Nutzungsbedingungen.

UI-Card-Design in dezenten, natürlichen Pastell-Farben.

HP 29 | Haus am Waldsee

UI Card Design: Der Inhalt wird hier auf einzelne, übersichtliche Karten (Blöcke) verteilt.
Außerdem mit Big Icons: Neben den normalen kleinen Icons, gibt es hier auch dekorative große Icons in untersch. Anzahl, Farbe sowie mit und ohne Verlinkung, damit Sie es gut nachvollziehen können.

Die Font-Icons (von Fontawesome).

Eine Font-Icon-Schrift enhält statt Buchstaben jede Menge Icons (Symbole), es sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons (z.b. gif, jpg oder png) ermöglichen. Fontawesome ist einer der beliebtesten Font-Icons, welche wir auch in unseren Templates verwenden.

Wir nutzen in unseren Templates die Fontawesome-Schrift auf zwei Möglichkeiten:

1. Als WEBFONT,
d.h. die Icon-Schrift wurde vom Anbieter heruntergeladen und direkt im Template installiert und zwar im Ordner Fonts/FA/
Somit wird die Schrift aus dem Template selbst heraus geladen, mit dem großen Vorteil, das die Icons auch offline, also ohne Internet-Verbindung angezeigt werden.

Aufgerufen wird die Icon-Schrift dann durch einen CSS-Link im Kopfbereich des Templates, so oder ähnlich:

<!-- all.css = fontawesome-icon-font -->
<link rel="stylesheet" href="css/all.css" type="text/css">

2. GEHOSTET vom Anbieter,
d.h. die Icon-Schrift wird durch einen Javascript-Link im Kopfbereich der Templates aufgerufen, welcher die Schrift von der Seite des Anbieters lädt.

<!-- fontawesome-icon-font -->
<script src="https://kit.fontawesome.com/9c26582cdc.js" crossorigin="anonymous"></script>

3. Hinweis,
Mit dem Update auf die neue Icon-Version 6 hat der Anbieter FONTAWESOME relativ viel umgestellt. Somit empfehlen wir Möglichkeit Punkt 2. - Sie können also in unseren älteren Templates im Kopbereich den CSS-Link ganz einfach durch den Javascript-Link tauschen, sofern Sie dies möchten.

4. TAUSCHEN der Icons,
Es funktioniert wie folgt:

4a. Rufen Sie im Browser die Seite des Anbieters auf.
https://fontawesome.com/

4b. Klicken Sie dort auf den Link ICONS oder wählen den folgenden Direkt-Link
https://fontawesome.com/icons

4c. Klicken Sie dann auf den Link FREE AND OPEN SOURCE ICONS oder wählen den folgenden Direkt-Link https://fontawesome.com/search?m=free
Dort finden Sie die entsprechenden Icons. Klicken Sie dann auf ein Icon, so finden Sie die jeweiligen Quellcode-Daten für das Icon, um es dann in unserer HTML-Datei und/oder CSS-Datei anpassen zu können.

z.b. für das Anker-Icon ( ) erscheint dort <i class="fa-solid fa-anchor"></i> sowie der Code: f13d

Die vierstellige Code-Angabe wird seltener verwendet, weil für Spezialfälle gedacht und zwar mit dem CSS-Pseudoelement :before oder :after in Fällen wie:

- Wenn es über die CSS-Datei nur einmal deklariert wird, aber dann auf allen HTML-Seiten das Icon automatisch erscheinen lässt oder
- Bei Mausberührung ein Icon-tausch erfolgen soll o.ä.

5. Bei der kostenlosen Free-Version sind also ca. 2000 Icons möglich, diese kommen aus den Rubriken namens SOLID, REGULAR und BRANDS.

Alles einfacher. Sofort Herunterladen und schauen ob es passt.

Liebe Besucher, auf vielen anderen Vorlagen-Seiten bekommen Sie nur ein kleines Vorschaubild der Vorlage zu sehen oder Sie müssen sich erst registrieren, der Download ist kostenpflichtig, in den Vorlagen sind Mustergrafiken, welche Sie nicht verwenden dürfen, Werbung ist in Form von Bannern oder Links enthalten usw.

" Bei uns ist das alles einfacher.
Sie sollen direkt sehen, ob die Vorlage Ihnen gefällt. "

Wir bieten einen besonderen Service:

Anschauen der Vorlagen in Originalgrösse und sofortiger Download aller Templates zum Testen ohne vorherige Registration/Anmeldung. Klicken Sie einfach auf den Link namens "Download" bei der jeweiligen Vorlage. Sowie keine offensichtliche Werbung in den Vorlagen. Einzig unser sehr kurzer, unsichtbarer und einzeiliger Copyright-Kommentar:

(c) Copyright by S.I.S.Papenburg /
www.on-mouseover.de/templates/

welcher nur im HTML-Quelltext und nicht innerhalb der Webseiten-Ansicht im Browser sichtbar ist- darf nicht gelöscht werden. Sie müssen keine zusätzlichen Angaben in Bezug auf uns in Ihrem "Impressum" machen, dürfen es aber.

Die Templates sind kostenlos bei Inhalt von privater Natur. Geringe Preise bei kommerziellem Inhalt. (Diejenigen, die eine Vorlage kommerziell nutzen wollen, sollen nicht die "Katze im Sack kaufen", sondern die Vorlage in aller Ruhe vorab am heimischen PC testen können)

"Ja...spinnen die denn ?"
Nein. Wir setzen auf den "Fairness"-Gedanken und ehrliche Besucher. Das kann aber nur solange funktionieren, wie unsere Besucher auch in diesem Sinne denken. Bitte halten Sie sich deshalb an unsere Nutzungsbedingungen, damit wir dieses Angebot nicht irgendwann einstellen müssen.

Grundsätzlich darf eine Vorlage nur für eine Domain genutzt werden. Innerhalb einer Domain aber können Sie jedoch eine ungegrenzte Anzahl von Seiten anlegen und auch der Zeitraum der Nutzung ist nicht begrenzt. Wenn Sie die Vorlage auf mehreren Domains (egal welcher Domain-Name) mit identischem Inhalt (z. B. Weiterleitung auf bestehenden Webspace, Domains mit unterschiedlichen Endungen wie z. B. *.net, *.de, *.com) einsetzen möchten, so zahlen Sie für die erste Domain den angegebenen Preis, für jede weitere Domain zahlen Sie kostengünstige 5.00 Euro incl. 19 % Mwst.
Wenn Sie die Vorlage für verschiedene Domains bzw. Projekte mit unterschiedlichem Inhalt nutzen möchten, so müssen wir leider den vollen Preis pro Domain/Projekt berechnen.

Thema Urheberrecht:
Würden Sie in der realen Welt auf die Idee kommen, Komplettes oder Teile von Film, Buch, Lied, Video, Stream oder sonstigen Medien zu kopiereren/abzuschreiben und dieses als Ihr geistiges Eigentum zu veröffentlichen?
Ganz ehrlich: Wohl kaum.
Fazit: Im Internet und bei Webseiten gelten gleiche Rechtsbestimmungen wie sonst auch.

Übrigens: Wir sind offen, aber nicht naiv. Auch das Internet ist kein "Gesetz-freier Raum". Allen unehrlichen Besuchern - welche so ein freies Angebot zum Nachteil der ehrlichen Allgemeinheit ausnutzen - sei gesagt: "Schwarze Schafe" entdecken wir früher oder später aufgrund unsererer langjährigen Internet-Erfahrung sowie auch durch hilfreiche Hinweise per Mail seitens unserer Besucher. Aber nun ab dafür und viel Spaß ...

VISITENKARTE - One-Pager

HP 43 | Meine Internet Visitenkarte

Internet Visitenkarte | Alles Wichtige sofort auf einem Blick. Im Transparent-Look. Exklusiver Button, welcher per CSS ein Fenster öffnet, ist genau vertikal und horizontal mittig im Fadenkreuz über den 4 Inhaltsfeldern platziert und behält diese Positon auch bei untersch. Textlängen.

Kleine Anleitung. So funktioniert es mit den Vorlagen.

Bildwechsler (Slideshows).

Wir haben CSS-Bildwechsler und Jquery-Bildwechsler, beide sind responsive, nutzen sie diese je nach Vorliebe, hier nachstehend eine Übersicht.
CSS-Slider funktionieren im Gegensatz zu Javascript- (Jquery) Slidern auch, wenn Javascript im Browser des Besuchers der Webseite deaktiviert wurde und kommen eben ohne ein zusätzliches kompliziertes JavaScript aus, aber bei Jquery-Slidern lassen sich leichter Bilder mit untersch. Anzahl hinzufügen. Die nachstehend dort beim jeweiligen Template genannte Foto-Anzahl ist eben für das Jquery-Script im Template nur beispielhaft, da ja beliebig viele Fotos hinzugefügt bzw. entfernt werden können.
Wie Sie auch beim CSS-Slider eine unterschiedliche Anzahl von Fotos wählen können, zeigen wir Ihnen im Template HP 62, enthaltend entsprechende Demos und Anleitung.

CSS-BILDWECHSLER, responsive.

HP 03 / Follow The Horizon = 5 Fotos. Horizontaler Tausch, von rechts nach links. One-Pager-Konstruktion
HP 117 / Italian Life Style = 10 Fotos. Slideshow im Inhaltsbereich. Horizontaler Tausch, von rechts nach links.
HP 105 / A Guide To Be Happy = 8 Fotos. Horizontaler Tausch, von rechts nach links.
HP 87 / Above The Clouds = 8 Fotos. Horizontaler Tausch, von rechts nach links.
HP 47 / What A Nice Location = 5 Fotos. Horizontaler Tausch, von rechts nach links mit gleichzeitiger CSS-Kamerafahrt (Abfahren der Fotos).
HP 49 / Wide Open Country = 7 Fotos. Horizontaler Tausch, von rechts nach links. Inklusive CSS-Pause-Schalter (ON/OFF), welcher die Slideshow pausiert und bei Bedarf wieder startet.One-Pager-Konstruktion. Spezieller Bildanzeiger mit 'Mann/Frau-Icons'.
HP 51 / Reliable Insurance Company = 5 Fotos. Horizontaler Tausch.
HP 59 / Sunny Side Of Life = 10 Fotos. Horizontaler Tausch, von rechts nach links.
HP 62 / Travel To Distant Lands = 3, 4, 5 oder mehr Fotos. (Inkl. Anleitung + Demo für versch. Anzahl von Fotos). Horizontaler Tausch, von rechts nach links.
HP 74 / Big City Walk = 4 Fotos. Tausch per Überblend-Effekt.
HP 94 / Travel On Highway = 4 Fotos. Horizontaler Tausch, von rechts nach links mit gleichzeitiger CSS-Kamerafahrt (Abfahren der Fotos) plus eine Bildtext-Animation. Außerdem gibt es hier auf jeder Seite andere Fotos in der Slideshow und als Bildanzeiger ein Batterie-Icon mit verschiedenen Ladezyklus-Anzeigen.

JQUERY BILDWECHSLER, responsive.

Wenn Sie statt CSS-Slideshows mehr die Jquery (Javascript) Slideshows favorisieren, so schauen Sie sich unsere folgenden Templates an:

HP117 / Italian Life Style = Jquery-Script. 2 x Im Inhaltsbereich. Tauscht nicht nur Bilder, sondern auch andere Objekte, wie Text, Icons o.ä. Verschiebt Bilder/Objekte einzel noder gleich ganze Reihen.
HP 61 / Metropolis City = Jquery-Script. Hier als sog. ONEPAGER. Zu sehen 2 x Im Inhaltsbereich. Tauscht nicht nur Bilder, sondern auch andere Objekte, wie Text, Icons o.ä. Verschiebt Bilder/Objekte einzeln oder gleich ganze Reihen.
HP 20 / Corona Template = Jquery-Script. Im Inhaltsbereich. Tauscht nicht nur Bilder, sondern auch andere Objekte, wie Text, Icons o.ä. Horizontaler Tausch, von rechts nach links. Verschiebt Bilder/Objekte einzelnoder gleich ganze Reihen.
HP 103 / Cakes & Coffee = Auf jeder Seite unterschiedliche Anzahl von Fotos. Jquery-Script. Horizontaler Tausch, von rechts nach links. Hier als hälftiger, sprich 50% breiter Slider eingebaut. Plus 'Pfeile', welche die automatisch ablaufende Slideshow unterbrechen und ein manuelles Durchklicken ermöglichen.
HP 44 / Bed And Breakfast = 19 Fotos. Jquery-Script. Horizontaler Tausch, von rechts nach links. Plus 'Thumbnails' und 'Pfeile', welche die automatisch ablaufende Slideshow unterbrechen und ein manuelles Durchklicken ermöglichen.
HP 114 / Sunny Dreams In July = Jquery-Script. Simpler Bildwechsler imm Inhaltsbereich.
HP 72 / Some Nice Places = 12 Fotos. Jquery-Script. Tausch per Überblend-Effekt. Vollbildschirm-Slideshow. Als Besonderheit haben wir noch einen CSS-Schalter eingebaut, welcher die Inhaltsleiste (mitsamt Homepagenamen, Hauptmenü und Fussmenü) komplett verschwinden läßt und so eine Vollansicht garantiert. Full-Screen-Site als One-Pager-Konstruktion. Plus 'Pfeile', welche die automatisch ablaufende Slideshow unterbrechen und ein manuelles Durchklicken ermöglichen.

Mit CSS-Ski-Rennen-Animation + Jquery-Schneefall-Animation

HP 46 | Skiing Race With Falling Snow

CSS-Keyframes-Animation: Vier Ski-Rennläufer, welche nur aus der bekannten Font-Icons Schrift 'Font Awesome' bestehen und somit keine Grafiken sind, wurden hier von uns per CSS-Keyframes animiert.
Jquery-Animation: Realistischer Schneefall macht die Atmosphäre des Ski-Rennens komplett und hat gleichzeitig eine beruhigende Wirkung.

+ ONE-PAGER
+ Ski-Rennen-Animation
+ Schnee-Animation
+ Full-Screen-Site
+ CSS-Box-Fenster