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 DAS BLAUE HAUS 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.
  • Pattern-Hintergrund: Streifen-Background - ohne Graifk ( mit CSS-linear-gradient )
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar .
  • Google-Webfonts (Schrift bereits installiert - hier die Schriften 'ROBOTO' u. 'OPEN SANS' - Schriftschnitt:Light 1).
  • CSS-Animation: DREHEN.
1= Schrift Roboto bekannt vom Android-Betriebssystem. Der Schriftschnitt ist leicht zarter (light) als ein normaler Schnitt und hat damit eine edle Wirkung.

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

Beschreibung

Besonderheiten

Das Menü ist ein Pixel-Menü, d.h. Sie bestimmen die Breite der Buttons selbst . Alle Buttons sind gleich breit. Je weniger Pixel an Breite Sie also den Buttons geben, desto mehr Buttons sind möglich.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 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

Beschreibung

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 39,--
 
 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,--