Homepage Vorlagen ( Templates ) zum Download.

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




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 I´M A ONE-PAGER 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 ]
ONE-PAGER Alle Inhalte innerhalb einer HTML-Seite. + Smooth-Scrolling-To-Sections
+ Box-Fenster

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.
One-Pager.
Jquery Smooth Scroll To Sections
Jquery Smooth Scroll To Top
  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Big Icons. Jeder Abschnitt im Inhaltsbereich enthält ein großes dekoratives Icon.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: 2
  • Jquery Smooth Scroll To Top: 3
  • Viele Box-Fenster: 4 Inhaltsfenster per div-Box öffnen sich per Klick auf der selben Seite.
  • Toggle-Schalter. 4 Button-Schalter: An/Aus (Öffnen/Schließen).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts: Extra breite Schrift 'Bungee', zu sehen beim Homepagenamen + Überschrift, bereits installiert.
  • Google-Webfonts: Schrift 'Open Sans' bereits installiert. Der Schriftschnitt 'Light' bei diesem Font ist zarter, weniger fett und hat damit eine vielfach elegantere Wirkung als Arial, Verdana & Co..
  • CSS-Animationen: Einige CSS-Keyframes-Animationen automatisch startend und fortlaufend wie
    - SLIDE LEFT/RIGHT
    - DREHEN
    - SLIDE UP/DOWN.

1= One Pager:
Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Klicken Sie die Links im Menü und sehen Sie wie innerhalb einer Seite die verschiedenen Sektionen aufgerufen werden. Wichtiger Bestandteil eines One-Pagers ist das Smooth-Scroll-To-Sections.

2= Smooth Scroll To Sections:
Die Sprungziele, sprich die einzelnen Sektionen (Abschnitte) werden übrigens animiert sanft und sichtbar angesteuert. Gemeint ist das sogenannte 'Smooth Scrolling', welches der Übersichtlichkeit und besseren Orientierung dient. Man registriert also auch optisch, wohin man gelangt und springt nicht so abrupt wie sonst beim üblichen HTML-Anker.

3= Smooth Scroll To Top:
Bei Bedarf scrollen Sie hier von jedem Abschnitt bzw. jedem beliebigen Puntk der Webseite wieder sanft animiert nach oben zum Menü zurück.

4= Toggle Schalter bei Menü und Box-Fenstern:
Eine Javascript-freie Lösung, welche insbesondere auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht. Hier öffnen und schließen sich das Haupt-Menü (bei mobilen Geräten) sowie viele Info-Fenster als div-Box innerhalb der selben Seite.

    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 CONSTRUCTION PARTICLES Bestellen Downloaden Anschauen




Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download







Jquery
Partikel-Animation
+ Immer neue Variationen

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.
Jquery: Particles-Animation
  • Jquery-Animation: 1 Cooler Effekt ! Partikel in Bewegung bei ständiger Erneuerung und Veränderung.
  • Under-Construction-Template 2. Ihre Seite ist im Aufbau oder Umbau. Dann ist dieses Template eine gute Idee.
  • Toggle-Schalter. 3 Button-Schalter: An/Aus (Öffnen/Schließen).
  • CSS-Animation: Puff-In-Effekt: Fenster blendet sich zunächst verkleinernd in die Seite hinein und poppt dann zur vollen Größe auf.
  • CSS-Animation: Drehen-Effekt: Bei den auf den Buttons vorangestellten Icons.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Open Sans' bereits installiert ). Schriftschnitt:Light.

1= Jquery Animation 'Particles':
Wir haben über diese Animation eine zweite Ebene (Inhalt mit Buttons und Text) sowie eine dritte Ebene (sich öffnende Info-Fenster)darüber gelegt. Diese Ebenen wurden mit 'position:relative/absolute' getätigt.

2= Webseite im Aufbau:
Die Zeit von diesbezüglichen Baustellen-Bildern ist schon lange vorbei. Der erste Eindruck ist entscheidend. Und für den ersten Eindruck gibt es keine zweite Chance. Dieses Template verbindet eine dezente Hintergrund-Animation (sich ständig verändernde Partikel) mit 2 Info-Fenstern, welche ebenfalls animiert sind (Puff-In-Animation).

3= Toggle Schalter:
Eine Javascript-freie Lösung, welche auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht. Hier öffnen und schließen sich die Info-Fenster ABOUT und CONTACT.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 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 29,--
 
 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,--
 
 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.
  • 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 29,--
 
 32 Near The Station 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.
Jquery: Lightbox-Foto-Gallerie
Verschachteltes Grid auf einfache Art mit 'display:inline-block'.
  • Wechselnde Fotos im Kopfbereich. Auf jeder Seite ein anderes Foto, welches sich auch hinter den Halbkreis legt.
  • Verschachteltes Grid-System inkl. Rahmen nur per CSS mit einfachem display:inline-block' 1 bei der Picture-Gallery.
  • Toggle-Schalter. 2 Menü-Button-Schalter: An/Aus.
  • Mit 'Lightbox Picture Gallery'.3 ( Die bekannte und beliebte Foto-Gallerie-Schau ).
  • CSS-Animation: Menü gleitet (bei mobilen Auflösungen) von LINKS nach RECHTS in die Seite hinein.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Open Sans' bereits installiert ). Schriftschnitt:Light.

1= Verschachteltes Grid-System nur per einfachem CSS 'display:inline-block'. Somit harmonische Wirkung.
Schwer zu erklären, deshalb nachfolgend ein Foto:

Verschachteltes Grid heißt: Unregelmässig innerhalb des Raster-Systems, die Bilder haben verschiedene Größen und einige Bilder strecken sich vertikal oder horizontal über mehrere andere Bilder hinweg. Praktisch: Tatsächlich haben aber nur 2 der 9 Bilder eine abweichende Größe, alle anderen sind 900x500 Pixel groß. Trick: Bei den weißen Rahmen haben wir alternativ 'box-shadow' statt 'border' verwendet, denn ein border-Rahmen würde ja durch die Duplizierung bei z.B. 4 Fotos andere Abstände verursachen als z.B. bei nur 1 Foto. Plus: Wir haben hier zusätzlich noch eine Big Gallery mit 18 Fotos an Bord, das Schema wurde entsprechend erweitert.

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

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

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