Homepage-Vorlagen ( Templates ) zum Download.

Webseiten 09 - 16 | Frei für privat, kostenpflichtig für kommerziell. |

Wie dürfen diese Templates eingesetzt werden?

Bitte lesen Sie vor dem Download einer Homepagevorlage unbedingt unsere Nutzungsbedingungen.
Diese Homepage-Vorlagen können für den privaten Gebrauch umsonst heruntergeladen, und angepasst werden. Das Anbieten der Templates auf anderen Webseiten, der Weiterverkauf sowie auch die Verwendung als direkter Download ist nicht gestattet. Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.

Eine kommerzielle Nutzung ist erlaubt. Die kommerzielle Nutzung ist jedoch nur gegen Bezahlung gestattet. Für kommerziell gilt: Die Preise finden sie immer direkt neben dem Vorschaubild - als letzte Zeile vom Beschreibungstext.

Neuer News-Bereich: Sie können den News-Bereich jetzt direkt von jeder Seite aus aufrufen. Denn innerhalb des Menüs (bei den runden 'Zahlen-Buttons') haben wir die Neuigkeiten-Seite jetzt verlinkt. Nicht zu übersehen, der Button trägt die Aufschrift - NEU -





HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz



 09 SUISSE COLOR STYLE Bestellen Downloaden Anschauen




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






[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten / Technik

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Schweiz Design (Weißes Kreuz auf Rot)
  • CSS-Animation: Wobble-Effekt (Bei Mausberührung der Links im Hauptmenü sowie auf den Fotos).
  • Flaggen-SPEZIAL (Alle Flaggen nur mit CSS gestaltet).
    Beispiele mit 8 Flaggen anbei plus Code-Schnipsel.
    Viele weitere Flaggen1 nach diesem Prinzip möglich.
  • CSS-Animation: Flaggen-Kugel (hier das Schweiz-Motiv) rollt nach links und wieder zurück
    - Diese Animation ist automatisch startend.
    - Die Drehung des Schweizer Kreuzes in der Kugel schaut bei Geschwindigkeitsaufnahme spannend aus.
  • Festgesetzer Hintergrund. (Inhalt scrollt über die Hintergrund-Grafik).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar )
  • Anordnung der Bilder im Inhaltsbereich wie folgt:
    - Bild ist links platziert und der Text fließt rechts herum.
    - Bild ist rechts platziert und der Text fließt links herum.
    - Bild ist zentriert und ohne Textfluß arrangiert.
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.
  • CSS-Animation: Multi-Farbänderung-Effekt (Bei Mausberührung auf der Schweizer Flagge oben links).
  • CSS-Animation: Move-Effekt, Verschiebung nach unten (Bei Mausberührung auf der Schweizer Flagge oben links).

1= Weitere Flaggen.
Nach diesem Prinzip lassen sich andere Flaggen erstellen, z.B. Niederlande, Belgien, Luxemburg, Ungarn, Finnland, Rumänien, Lettland, Bulgarien, Russland, Littauen, Monaco, Ukraine, Irland, Estland, Armenien, Bolivien, Costa Rica, Elfenbeinküste, Gabun, Gambia, Guinea, Indonesien, Jemen, Kolumbien, Mali, Mauritius, Nigeria, Peru, Sierra Leone, Thailand, Tschad. Eine Übersicht von National-Flaggen finden sie hier.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 10 Above The Clouds Bestellen Downloaden Anschauen



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







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Slideshow - CSS-Bildwechsler 1a schiebt die Fotos animiert nach links hinaus und wechselt die Richtung 1b.
  • Paginierung 2: Seiten-Numerierung unten.
  • Mit Toggle-Menü 3 - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.4
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü schiebt sich in die Seite hinein.
  • CSS-Animation: Mausberührung auf den Links löst 45-Grad-Drehung beim jeweils dem Link vorangestellten Icon 5 aus.
1a= Bildwechsler:
Diese Slideshow funkioniert alleine per CSS-Keyframes-Animation. Es ist also eine Standard-Animation, welche ganz ohne weitere Scripte (z.B. Javascript oder Jquery) auskommt. Dazu gibt es noch einen Anzeiger per Font-Icons für die Anzahl der wechselnden Bilder (Offene bzw. volle Ringe ). Damit die Ringe auf nahezu jedem Foto gut sichtbar sind, wurde ein CSS-Textschatten auf diese gelegt.

1b= Richtungswechsel: Auf den Seiten Home, Secundus und Quartus läuft die Animation standardmässig vorwärts ab, auf den Seiten Primus, Tertius und Quintus lasssen wir die Slideshow zur Abwechslung rückwärts ablaufen (animation-direction: reverse). Und auf der Seite Sextus läuft die Animation gar vorwärts durch und gleich danach wieder rückwärts (animation-direction: alternate).

2= Paginierung:
Die Seiten-Numerierung bietet nicht nur praktischerweise im unteren Bereich die direkten Links zu den Unterseiten an, sondern schafft auch Strukur, denn es wird auch der jeweils aktuell angewählte Link (also die momentane Seite) angezeigt.
Zudem haben wir in diese Paginierung noch erweitert, indem jeweils ganz links und ganz recht sog. Font-Icons eingebaut wurden. Also hier die Icons "home" (um zur Startseite zu springen) und "pfeil-oben" (um nach oben an den Anfang der Seite zu springen).

3= Toggle Menü:
Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.

4= Lightbox Picture Gallery: 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 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

5= Links mit vorangestelltem Icon:
Bei Mausberührung der Links im Inhalts-Bereich wird das dem Link vorangestellte Font-Icon animiert. Voraussetzung hierfür war es zunächst dem Link ein Element (hier das Font-Icon) voran zu stellen - und zwar mittels des CSS-Pseudoelements ':before'. Denn somit gilt die Formatierung automatisch mit für alle Unterseiten.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 11 ON THE SUNNY SIDE OF LIFE
Bestellen Downloaden Anschauen



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







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Abgewinkelte Buttons (Schräge Kanten)1 Mit CSS-transform:skew.
  • Strukturierte Abschnitte 2 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • Mit Toggle-Menü 3 - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.4 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü wird sanft eingeblendet und ist horizontal und vertikal mittig angeordnet
  • CSS-Animation: DREHEN bei Icons im Fusstop-Bereich.
  • CSS-Animation: VERZERREN bei Icons im Fuss-Bereich.

1= Abgewinkelte Buttons:
Wir haben hier eine Schrägstellung der Buttons um 15 Grad. Da die Schrift aber auf dem Ojekt damit auch schräg gestellt wird, geben wir der Schrift eine Schrägstellung von 15 Grad in die andere Richtung, mit dem Ergebnis das die Schrift jetzt gerade angezeigt wird.

2= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige 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 in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

3= Toggle Menü:
Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.

4= Lightbox Picture Gallery: 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 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 12 Style & Emotions Bestellen Downloaden Anschauen



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







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.

  • Transparenz (mit CSS-rgba).
  • Farb-Tipp: "TEAL" 1
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Diagonaler (45Grad) Streifen-Hintergrund ohne Grafik (CSS-linear-gradient).
  • Fixierter Background (auch bei mobilen Geräten). Seite scrollt also über den Hintergrund.
  • CSS-Animationen: Schwingen, Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Fuss-Icons).
1= Kennen Sie schon die Farbe "TEAL"?
Dann schauen Sie hier einmal und genießen den dezenten Schick, der sich insbesondere mit der Farbe Schwarz ergibt. Klassisch macht diese Farbkombination Sinn, denken Sie an grüne Palme, die neben einer schwarzen schicken Leder-Couch platziert ist. Zeitlos. Denn dies ist seit Jahrzehnten in Büros und privaten Wohnungen gebräuchlich.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 13 ÜBER DEN WOLKEN AM MEER Bestellen Downloaden Anschauen



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







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Vogelflug I - Hinter 3 transparenten animierten Bildboxen läuft eine weitere Animation (Vogelflug) ab
  • Vogelflug II -Mehrere Vögel, fliegend mit untersch. Geschwindigkeiten und Wolken-Animation
  • Multipler Background ( Schrägen/Transparenz/Bild/Farben alles in einer Anweisung)
  • Transparenz ( mit CSS-opacity)
  • Text-Schatten-Effekte (mit CSS-text-shadow)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":first-line". Erste Zeile anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Alle folgenden ANIMATIONEN per CSS gestaltet.
  • Animation KAMERA-FAHRT - POSITIONSÄNDERUNG HINTERGRUNDBILD | startet automatisch )
  • Animation VOGEL-FLUG | startet automatisch )
  • Animation SMOOTH-MENÜ, Toggle-Menü gleitet von links nach rechts hinein
  • Animation ZOOM-IN + ROTATION, Reinzoom-Effekt weil Vergrösserung + Rotation innerhalb der Box abläuft
  • Animation PERSPEKTIVISCHES WENDEN auf X und Y-Ebene
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 14 RESTAURANT - FRESH FOOD Bestellen Downloaden Anschauen



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







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Mit 'Lightbox Picture Gallery'.1 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Geometrische Form ( DREIECK 2 nur mit CSS erstellt ) enthält Slogan-Spruch.
    Der Slogan-Spruch ist immer responsive unten rechts im oberen Bereich platziert.
    Mit CSS-position wird der Spruch relative/absolute angelegt und somit aus dem normalen Elementfluss herausgenommen.
  • Geometrische Form ( KREIS mit Umrahmung nur mit CSS erstellt ) enthält hier noch ein Font-Icon (Messer/Gabel).
  • Mit Toggle-Menü.3 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter4 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Smooth-Menü (Toggle-Menü gleitet sanft von OBEN nach UNTEN hinein)

1= Lightbox Picture Gallery: 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 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

2= Dreieck mit Slogan: In Wirklichkeit ist es ein großes Rechteck, per CSS gestaltet und absolut platziert. Diese Rechteck wird um 45Grad gedreht (transform:rotate) und der überstehende Teil wird abgeschnitten (overflow:hidden) bzw. verdeckt.

3= Toggle Menü: Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.

4= Transparenz/Farbfilter: Im Gegensatz zum etwas leichter zu handhabenen CSS-Befehl 'opacity', welcher auch eine Transparenz ermöglicht, wird beim CSS-Befehl 'rgba' die Schrift auf dem Objekt nicht auch gleichzeitig mit transparent gesetzt, sondern bleibt in voller Deckungskraft erhalten. Beim 'rgba-Befehl' können Sie übrigens Farbe und Deckungsgrad auch anders einstellen.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 15 Sailing Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Besonderheiten

Die Menü-Spalte schiebt sich in den Kopfbereich hinein. Das Foto, also ggflls. auch Ihres, legt sich automatisch hinter das Menü. Trotzdessen ist die Menü-Spalte mit ihrem Inhalt unabhängig vom Rest der Konstruktion, d.h. anpassbar z.B. in der Breite, Höhe und Inhalt.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 16 LA BELLA VITA Bestellen Downloaden Anschauen



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







[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Halbkreis-Menü, mit Transparenz (per CSS-rgba) : Durchgehend in allen Auflösungen.
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Font-Icon-Tausch beim Menü: (Bei Mausberührung wechselt das Font-Icon "fa-toggle-off" (\f204)mit dem Font-Icon "fa-toggle-on" (\f205)).
  • Aktueller Link: (Abweichend vom Ausgangs-Link: Zeigt spezielle Linkfarbe plus Font-Icon an "fa-toggle-on"
  • Pseudoelement "::after" 1. Angewandt bei Menü-Font-Icons und Listen-Font-Icons.
  • CSS-Animation: Bildwechsler (Slideshow auch hinter dem Halbkreis-Menü ablaufend/durchscheinend)
  • CSS-Animation: Drehen - Unendlich (Kleines Sonnen-Icon dreht dezent, automatisch startend)
  • CSS-Animation: Slide-Top (Bei Mausberührung auf HP-Namen,1 x Durchlauf)
  • CSS-Animation: Drehen - 3 Rotationen (Bei Mausberührung auf Nach-Oben-Icon, 1 x Durchlauf)
1= Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Textzeichen, das innerhalb des angesprochenen Elements vor bzw. nach dem tatsächlich vorhandenen Inhalt eingefügt wird.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--