Kostenlose Homepagevorlagen ( Templates , websites ) zum Download.

Webseiten 01 - 08 | 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 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.Für kommerziell gilt: Die Preise finden sie immer direkt neben dem Vorschaubild - als letzte Zeile vom Beschreibungstext.

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

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.

Nutzung:
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. 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. Bitte lesen Sie in der Rubrik (c)Nutzung die vollständigen Nutzungs- bzw. Copyrightbedingungen.

Thema Urheberrecht:
Übrigens: Würden Sie auf die Idee kommen, Komplettes oder Teile eines Buches oder Gedichtes abzuschreiben oder ein komplettes Lied oder Teile eines Liedes als Ihres zu veröffentlichen? Wohl kaum. Im Internet und bei Webseiten gelten gleiche Rechts-und Copyrightbestimmungen wie sonst auch. Wir sind offen, aber nicht naiv. Das Internet ist kein gesetzes-und rechtsfreier Raum. Allen unehrlichen Besuchern - welche so ein freies Angebot zum Nachteil der ehrlichen Allgemeinheit ausnutzen - sei gesagt: Viele "schwarze Schafe" entdecken wir früher oder später aufgrund unsererer langjährigen Internet-Erfahrung sowie auch, wie es die Praxis gezeigt hat, durch hilfreiche Hinweise per Mail seitens unserer Besucher. Allen ehrlichen Besuchern wünschen wir viel Spass auf unserer Seite.


HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz



 01 THE ART OF LIGHT 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.
  • Navigation: Kreis-Symbol ('dot-circle-o') wird durch das Häkchen-Symbol ('check') getauscht
  • Farbverlauf Linear - ohne Grafik ( mit CSS-linear-gradient ).
  • Farbverlauf Kreisförmig - ohne Graifk ( mit CSS-radial-gradient ).
  • Rundungen ( mit CSS-border-radius ).
  • Automatisch generiertes Textzeichen (hier der Pfeil bei H3-Überschrift im Inhaltsbereich) per Pseudoelement.1
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar .
  • Google-Webfonts (Schrift bereits installiert).
  • CSS-Animation: DREHEN.
1= Autom. generiertes Textzeichen: Per Pseudoelement ":after" und ":before" können Textzeichen nach (after) oder vor (before) einem HTML-Element platziert werden. Der Vorteil: Eine Änderung oder Wechsel des Textzeichens oder dessen Formatierung (Farbe, Größe, Schriftart o.ä) brauchen nur einmal in der CSS-Datei geändert werden und wirkt sich dann auf alle HTML-Seiten aus.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 02 PIER WITH A LIGHTHOUSE 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.
  • Mit Toggle-Menü.1 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Farbfilter in Blau (Halbtransparent): Mit CSS-rgba ( Farbe und Deckungsgrad ggfls. anders einstellbar ).
  • Farverlauf: Mit CSS-linear-gradient.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts (Schrift 'Roboto' und 'Open Sans' bereits installiert). Schriftschnitt:Light.
  • CSS-Animation: DREHEN.
  • CSS-Animation: EINBLENDEN. ( Menü wird bei mobilen Geräten nach Klick per Toggle-Schalter sanft eingeblendet. )

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

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 03 BRÜCKEN - PONTS - BRIDGES 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 ).
  • Mit Toggle-Menü.2 ( Bei mobilen Geräten erscheint ein platzsparendes Menü ) - Menü-Button-Schalter: An/Aus.
  • Transparenz ( mit CSS-rgba ) .
  • 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 DIAGONAL von links OBEN nach rechts UNTEN hinein)
  • CSS-Animation: DREHEN.

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

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 04 CUP OF COFFEE 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.
  • Mit Toggle-Menü. Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • CSS-Animation: Smooth-Menü (Toggle-Menü gleitet von links nach rechts hinein)
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 05 START A NEW CREATIVE PROJECT 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 ]
Aufklapp-Menü
bestehend aus:
+ CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT

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.
  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Akkordeon-Menü 2 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
  • Toggle-Schalter. 3 Menü-Button-Schalter: An/Aus.
  • Transparenz.4 Transparenter Farbfilter mit CSS-rgba. ( Hier beim Homepagenamen-Feld )
    ( Ermöglicht, das die Schrift auf jedem Hintergrundfoto gut zu lesen ist ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Roboto' und 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Menü gleitet von RECHTS nach LINKS hinein
  • CSS-Animation: Der Toggle-Schalter hat ebenfalls eine Slider-Funkion, nach Klick schiebt er sich hinaus und gibt den darunter liegenden Schließen-Button frei.

1= Aufklapp-Menü:
Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten.
Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'. "Getoggled" werden also nicht nur der Menü-Schalter sondern insbesondere auch die Top-Level-Links, welche die Untermenüs öffen.

2= Akkordion-Menü:
Unter einem Akkordeon versteht man einen Aufklappmechanismus (hier auf das Menü bei mobilen Auflösungen angewandt), der nur einen Teilbereich eines Objektes zeigt und erst durch click oder touch weitere Teilbereiche aufschiebt.

3= Toggle Schalter:
Eine Javascript-freie Lösung, welche auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht.

4= Transparenz/Farbfilter:
Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 06 SONNENUNTERGANG - FLAT DESIGN 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).
  • 100 % Flat-Design .1
  • Geometrische Form ( HALBKREIS, nur mit CSS erstellt ), steht für die untergehende Sonne.
  • Mit 'Lightbox Picture Gallery'.2 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Mit Toggle-Menü bei allen Geräten.3 ( erscheint hier bei allen Geräten von Handy bis Desktop-PC )
    - Menü-Button-Schalter: An/Aus.
  • 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= Flat Design:
Flat-Design steht für eine Reduktion der Gestaltung auf das Wesentliche. Hierzu wird auf jegliche Tiefe verzichtet, d.h. es gibt keine Farbverläufe, Verzierungen, Schatten, Texturen oder Rahmen. Getreu dem Motto: "Weiniger ist mehr". Es gilt also eine Dreidimensionalität zu vermeiden. Auch das Stichwort 'Minimalismus' ist prägend.

2= 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 X von Anzahl 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.

3= Toggle Menü bei allen Geräten: Normal ist das Toogle-Menü eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt. Wir wenden es hier als besonderen Design-Effekt nicht nur auf mobile Geräte sondern auf alle Displays an, sprich von Handy bis Desktop-Pc.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 07 DICERE DIGITUS 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).
  • Menüleiste. Mit Farbverlauf ( CSS-linear-gradient ), Buttons an linker u. rechter Kante abgerundet.
  • Seitentitel. 1 Auf jeder Seite ein anderes Font-Icon.
  • CSS-Halbkreise 2 vertikal. ( Zwei vertikale Halbkreise werden zu einem Kreis zusammengesetzt ).
  • CSS-Halbkreise 2 horizontal. ( Zwei horizontale Halbkreise werden zu einem Kreis zusammengefügt ).
  • Strukturierte Abschnitte 3 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • Mit Toggle-Menü 4 - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.5 ( 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 Fuss-Bereich.

1= Seitentitel:
Auf jeder Seite ein anderes Font-Icon als Seitentitel, dekorativ innerhalb eines CSS-Halbkreises angeordnet sorgt für Ordnung und nimmt die Farbe des Inhaltsbereichs auf.

2= CSS-Halbkreise:
Ein Halbkreis enthält Text und der andere Halbkreis enthält ein Font-Icon, beide werden zu einem Kreis geschlossen und es ergibt sich somit ein modernes Element, das grafisch wirkt, jedoch komplett ohne Grafik auskommt.

3= 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'.

4= 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. Hier wurde das Toggle-Menü für alles Auflösungen und damit für ein spannendes Design eingesetzt.

5= 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,--
 
 08 Travel To Distant Lands Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Besonderheiten

Viele Menüs (oben, links, rechts und unten). Im Seiten-Menü rechts gibt es versch. Haupt-Rubriken (z.B. Reisen) sowie Unter-Rubriken (z.B. Ausland). Beliebig viele Menüs/Rubriken anlegbar. 6 Seiten für Sie als Beispiel bereits verlinkt.

Technik

Flexibles Layout.
+ CSS3-Effekte (Textschatten, Boxschatten, Abrundung = Schattenwurf und Abrundungsgrad individuell und flexibel einstellbar, da ohne Grafiken realisiert).

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