Homepage Vorlagen ( Templates ) zum Download.

Webseiten 25 - 32  ( frei für privat, kostenpflichtig für kommerziell )

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

Wie dürfen diese Templates eingesetzt werden?

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.

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

 
 


HomeVorlagenHP-HilfenKontakt HilfeTechnik
(c) Nutzung Impressum BestellungWiderrufPreiseDatenschutz



  25 CLASSIC STYLE TREND
Ganz Neu: 03.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.
  • Bilder-Gallerie ( Responsive angelegt ).1
  • 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= Bilder-Gallerie: Im Inhaltsbereich sehen Sie auf den jeweiligen HTMl-Seiten eine unterschiedliche Anzahl von Bildern, welche in einem Block zusammengefasst sind. Auf der Startseite sehen Sie z.B. einen großen Bilder-12er-Block). Das jeweilige Foto ist verlinkt und bei Klick auf selbiges öffnet sich eine größere Version des Fotos.

Hinweis: Auch wenn das Ausgangsfoto dort per CSS mittels Prozent-Angaben kleiner definiert ist: Das sich nach Klick öffnende Foto ist immer exakt so groß wie die Abmessungen des Originalfotos. Voraussetzung ist natürlich, das die jeweilige aktuelle Bildschirmauflösung gleich oder größer als die Abmessung des Originalfotos ist. Die Größe der Fotos im Inhaltsbereich ist übrigens 800x530 Pixel. Gerne können Sie natürlich auch andere Größen wählen.

Fazit: Wir haben hier bei der Bilder-Gallerie eine schöne und unkomplizierte Lösung geschaffen, die jeweils nur mit ein-und denselben Foto (für das kleinere Ausgangsfoto sowie das grösseres Foto nach Klick) auskommt. Ein Foto gilt also gleich für 2 verschiedene Zustände, das Handling ist somit einfacher.


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
Ganz Neu: 26.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.
  • 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

Beschreibung

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

Beschreibung

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 SUMMER IN ICELAND 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.
  • Multipler Background ( Schrägen/Transparenz/Bild/Farben alles in einer Anweisung)
  • Transparenz ( mit CSS-rgba)
  • Text-Schatten-Effekte (mit CSS-text-shadow)
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • 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.
  • Animation HEARTBEAT, Herzschlag | startet automatisch
  • Animation KAMERA-FAHRT - POSITIONSÄNDERUNG HINTERGRUNDBILD | startet automatisch )
  • Animation SMOOTH-MENÜ, Toggle-Menü gleitet von links nach rechts hinein
  • Animation ROTATION + VERKLEINERN BIS UNSICHTBAR
  • 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 GUMMIBAND
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
  31 BOY 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.
  • (W/M) Klischee löst sich auf bzw. verbindet sich grafisch durch Farbmischung: (Mädchen/Frau trifft Junge/Mann)
  • 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 (W)hat a (W)onderful (W)orld Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Beschreibung

Besonderheiten

Spezielle Startseite plus zwei verschiedene Unterseiten anbei.

Technik

Flexibles Layout.

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