Homepage-Vorlagen ( Templates ) zum Download

Webseiten 09 - 16  ( frei für privat, kostenpflichtig für kommerziell )

Bitte lesen Sie vor dem Download einer Homepagevorlage unbedingt unsere Nutzungsbedingungen.

Immer am Ende unserer letzten Seite finden Sie unsere News, also alle neuen Vorlagen in chronologischer Reihenfolge: Klicke hier bei Bedarf für NEWS

Wie dürfen diese Templates eingesetzt werden?

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.

Auch wenn Sie die Vorlagen anpassen, bleibt das Copyright für das Design beim Autor der Vorlagen. Für Ihren eingefügten Inhalt, sei es Text, spezielle Grafiken o.a., haben Sie dann selbstverständlich Ihr Copyright.

Bitte lesen Sie in der Rubrik (c)Nutzung die vollständigen Nutzungs- bzw. Copyrightbedingungen.

 
 


HomeVorlagenHP-HilfenKontakt HilfeTechnik
(c) Nutzung Impressum BestellungWiderrufPreiseDatenschutz



 09 SUISSE COLOR STYLE
Ganz Neu: 21.04.17
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 FERIENWOHNUNG HAUS MIT SEEBLICK 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.
  • Geometrische Form ( Kleines Dreieck, als Pfeil fungierend ) auf Fotos gelegt1 und nur mit CSS erstellt .
  • Mit Toggle-Menü.2 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter3 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.
  • Farbverläufe ohne Grafik - Linear und Kreisförmig ( mit CSS-linear-gradient und radial-gradient ) .
  • 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= Das kleine Dreieck: Es ist nach oben gerichtet wie eine Art Pfeil, dabei am Fuße der jeweiligen Fotos im Inhaltsbereich platziert, auch responsive angelegt und stellt deshalb insbeondere bei Smartphone Auflösungen (wenn alle Fotos wegen des geringen zur Verfügung stehendes Platzes untereinander angeordnet werden) sicher, das Bild und der jeweilige Bildtext leichter als zusammenhängend erkannt werden. | Der Clou: Bei höheren Auflösungen wird dieses Dreieck nicht mehr benötigt und abgeschaltet (display:none).

2= 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.

3= 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 einer Transparenzstufe versehen. Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad einstellen. Je nach Foto ( falls Sie Ihres einfügen wollen ) oder Geschmack kommt man somit mit einer Schwarz-Transparenz (wie hier in diesem Template) oder einer Weiß-Transparenz bestens aus. Die Schrift, egal mit welcher Schriftfarbe hebt sich somit immer von den Farben des Fotos ab. Wer es noch individueller oder perfekter mag, wählt gar eine ganz andere Farbe.


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