Homepage-Vorlagen ( Templates ) zum Download.

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

Wie dürfen diese Templates eingesetzt werden?

Diese Homepagevorlagen können für den privaten Gebrauch kostenlos heruntergeladen ( download ), angepasst und weiterverwendet 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. Bitte lesen Sie vor dem Download einer Homepagevorlage unsere Nutzungsbedingungen.

Bei kommmerziell gilt:
a.) Entweder Sie nutzen die Vorlage als normale Person für sich selbst oder Ihre eigene Firma oder
b.) Sie verwenden die Vorlage für eine dritte Person (also nicht für sich selbst sondern für eine andere Person oder Firma. In diesem Falle ist uns zwingend die Domain und dessen Inhaber (Admin C) anzugeben. Das heisst: Geben Sie uns die Url an, auf welcher die Vorlage eingesetzt wird.

Alle Vereine mit dem Zusatz "e.V"., also alle eingetragene Vereine sind kostenpflichtig (denn die Grenze zwischen nicht-gewinnorientiert und Erwirtschaftung von Überschussgeldern ist für uns leider nicht zu prüfen ) - wir denken, Sie können das nachvollziehen....



HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz



 09 Spicy & Fresh - Minimalism Series Bestellen Downloaden Anschauen



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






Technik

  • Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
  • Mobile-First-Technik.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.
  • CSS-Only-Menü mit Toggle-Schalter. Eine Javascript-freie Lösung, welche eine Funktion per Schalter (an/aus) ermöglicht um das Menü auf mobilen Geräten zunächst zu verstecken.
  • CSS-Menü-Animation: Hineingleiten des Menüs (bei mobilen Auflösungen).

Besonderheiten

  • Minimalismus gibt es von alters her in vielen Bereichen, sei es bezüglich Musik, Kunst, Architektur, aber diese Einstellung gewinnt in heutiger Zeit zunehmend an Bedeutung wenn es insbesondere um einen reflektierten Lebensstil in der modernen Welt geht (Natürliches Leben, Zurück zur Natur, Einkehr, Meditation, Einfachheit, Weniger ist Mehr, Purismus, Kontrast im Wesentlichen).
    Klar hat es auch beim Webdesign Einzug gehalten, Flat-Design ist plötzlich in aller Munde. Im Wesentlichen geht es beim Minimalismus um ein Zurücknehmen, eine Reflektion über das Wesentliche und Rückbesinnung zur Natürlichkeit und um eine Haltung wider der allgemeinen Hektik, welcher der Großstadtmensch permanent ausgesetzt ist.
  • CSS-Animation: Seitentitel gleitet hinein, so das man gut erkennt, welchen Link bzw. welche Seite man gerade gewählt hat.
  • CSS-Animation: HTML-Seite blendet sich ein! Klickt man im Menü einen Link, so wird die angewählte HTML-Seite animiert dargestellt, in der Form, das diese beim Laden eingeblendet wird.
  • CSS-Menü-Animation: Menü-Button dreht bei Hover und entgegengesetzt bei Klick.


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