Homepage Vorlagen ( Templates ) zum Download.

Webseiten 25 - 32  ( 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 kostenlos heruntergeladen, 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.

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.



HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz



 25 CLASSIC STYLE TREND 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 ).
  • Spezial Design der Bilder-Gallerie:
    Doppelrahmen in unterschiedlichen Farben sowie eine weitere nur 1Pixel-grosse-Trennlinie zwischen den Bildern.
  • Hauptmenü mit Icon-Wechsel:
    Bei Mausberührung wird das jeweilige Font-Icon durch ein anderes getauscht.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter2 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: 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= 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. Je nach Foto ( falls Sie Ihres einfügen wollen ) oder Geschmack lassen sich beim 'rgba-Befehl' Farbe und Deckungsgrad ggfls. anders einstellen.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 26 We Take Care 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.
  • Geometrische Formen: Das Menü besteht aus einem Rechteck, einem Kreis, zwei Halbkreisen und einem Dreieck.
  • CSS-Animation: Pendel-Effekt1, startet automatisch und schwingt meditativ wie eine Glocken-Schwing-Bewegung.
  • CSS-Animation: Menü dreht bei Mausberührung von vertikal in die horizontale Lage.
  • CSS-Animation Dreh-Effekt plus Move-Effekt auf den Social Media Icons (Startet automatisch).
    - Jedes zweite2 Icon dreht sich dabei andersherum und bewegt sich in entgegengesetzter Richtung.
    - Jedes Icon innerhalb der Liste hat eine andere Farbe.3
  • 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.

1= Pendel-Effekt (CSS-Animation).
Der Effekt läuft innerhalb (CSS-overflow:hidden) einer halbransparenten Box (CSS-rgba) ab und ist hier auf den Slogan-Spruch gelegt. Auf jeder Seite haben wir einen anderen Slogan-Text platziert. Optisch unterstützt wird der Effekt noch durch einen kleinen, farbigen und mitschwingendem Kreis, welcher an den Text-Beginn des Slogans gelegt ist.

2= Ansprechen jedes geraden oder ungeraden Elements einer Liste.
Dies geschieht hier durch das Pseudoelement ':nth-child(even)' bzw. ':nth-child(odd)'.

3= Ansprechen jedes einzelnen Elements einer Liste.
Mit Pseudoelement ':nth-child(Zahl).

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

Besonderheiten

Das bogenförmig gezeichnete Haupt-Menü schiebt sich als Halbkreis effektvoll in das Foto (ggflls. auch Ihres) hinein.

Technik

Für Fortgeschrittene gibt es dieses Template auch in der Responsive-Version hier: HP101/Top Company Responsive

Homepage Vorlage , templates , Homepage-Vorlagen,  free download

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 28 LEGATUS DOMINUS 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.
  • Almost Flat-Design (mit minimalen , dezenten Schatteneinsatz bei einigen Objekten). Denn: Die Mischung macht´s !
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement "::before" 1. Angewandt bei Menü-Font-Icons und Listen-Font-Icons.
  • CSS-Animation: Bildwechsler (Slideshow) tauscht Fotos.
  • CSS-Animation: Der Bildwechsler tauscht dabei gleichzeitig auch Textfeld plus Weiterlesen-Button.
1= Die Pseudoelemente ::before und ::after erzeugen ein beliebig formatierbares Element, 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,--
 
 29 Quintessenz Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download

Besonderheiten

Jede Seite erhält ein anderes Foto, 8 Seiten bereits anklickbar und anschaulich verlinkt. PNG-Maske.

Technik

Transparente PNG-Maske: Gflss. auch Ihre Fotos legen sich automatisch hinter die rote Maske mit den schräg gestellten Blöcken. Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 30 KANZLEI RA LAWYER & PARTNER 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 Toggle-Menü 1 ( Bei allen Geräten von Handy bis Desktop-PC ) - Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.2 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • Transparenz.3 Transparenter Farbfilter mit CSS-rgba.
    ( 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: Toggle-Menü gleitet sanft von UNTEN nach OBEN hinein

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.

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= 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.
Ein Beispiel für die Deckungskraft von 70% ist der Wert 0.7, d.h. das ein Objekt zu 30% transparent ist.
Ein Beispiel für die Deckungskraft von 20% ist der Wert 0.2, d.h. das ein Objekt zu 80% transparent ist.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
^
 31BOY MEETS GIRL 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.
  • Triangle: Dreieck ohne Grafik erstellt ( per CSS) verbindet hier geschickt die Farben Blue and Pink.
  • Navigation: Girl-Symbol ('venus') wird durch das Boy-Symbol ('mars') getauscht
  • Gegensätze: Mischt man die Farben Blue und Pink ergibt sich ein Lila-Ton als Verbindung.
  • Flat-Design: Flach, minimal und edel.
  • Rundungen ( mit CSS-border-radius ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar .
  • Google-Webfonts (Schrift 'Snippet' und 'Josefin Sans' bereits installiert).
  • CSS-Animation: DREHEN.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 32 ZEN 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.
Aufklapp-Menü CSS-Only.
  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Strukturierte Abschnitte ( mit CSS-Strukturpseudoklassen ) 2. Tutorial sowie weiterführende Links anbei.
  • Text-Effekt ( Erhabener Text-Effekt beim Zitat sowie eingestanzter Text-Effekt beim Seitentitel ).
  • Zitate auf jeder Seite. Und zwar immer ein anderes Zitat im Kopfbereich macht jeden Link/Seite einzigartig.
  • Akkordeon-Menü 3 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
  • Toggle-Schalter. 4 Menü-Button-Schalter: An/Aus.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OLD STANDARD' und 'JOSEFIN Sans' bereits installiert ).
  • 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.
  • CSS-Animation: Die Icon-Quadrate (leicht abgerundetet) wandeln sich zu Kreisen + wechseln die Textfarbe und Hintergrundfarbe.

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= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich mehrere Abschnitte, die farbig bzw. per gekachelter Hintergrundgrafik getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

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

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



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