responsive , homepage vorlagen, homepagevorlagen ( templates )

CLASSIC STYLE TREND

Homepage Vorlage , templates , Homepage-Vorlagen, 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 | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Light' und 'Roboto Light'.

Besonderheiten

Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
Icon-Font-Tausch im Hauptmenü:
Bei Mausberührung wird das jeweilige Font-Icon durch ein anderes getauscht.
Klassisches Schwarz / Weiss-Layout analog zu den Print-Medien, also auch inkl. Grautönen und rotem Farbtupfer.

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

Poseidon

+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Benötigt kein Menü
+ Box-Fenster

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Galerie
Schrift: 'Open Sans Condensed'.

Besonderheiten

CSS-Hintergrund: Im Kopf-und Fussbereich - hier 6 diagonale Balken im Farbverlauf - nur per CSS erstellt.
Ganz ohne Menü: Macht es luftiger und ist dank One-Pager-Konstruktion möglich.
One-Pager: ¹ Alle Inhalte innerhalb einer HTML-Seite.
CSS Ghost Buttons ² passend zum Flat Design.
Jquery Restzeichenzähler ³ mit Zählanzeige und Warnhinweis bei Überschreiten einer bestimmten Zeichenzahl.
CSS-Box-Fenster: Inhaltsfenster öffnen sich per Klick als div-Box innerhalb der selben Seite - Eben ganz ohne Javascript (Jquery) und damit immer funktionabel, also auch wenn Javascript vom Besucher der Seite in seinem Browser deaktiviert wurde.
Jquery Smooth Scroll To Sections: Sanftes Scrollen = Animiertes Angleiten einzelner Abschnitte.

¹= One Pager | Dies ist ein responsive One-Pager. 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 sowie das Öffnen von (div-)Boxfenstern innerhalb der selben Seite für weiteren Inhalt.

²= Ghost Buttons | Ein sog. Ghost-Button ist ein Element beim Flat Design, welcher meist keine Füllung sondern nur einen Rahmen aufweist. Der Mouse-Over-Effekt füllt dann häufig den Button vollständig aus und invertiert die Schrift.

³= Restzeichenzähler | Es wurde ein Jquery-Restzeichenzähler beim Nachrichten-Feld des Formulars eingebaut. Die Zahl der maximal erlaubten Zeichen beträgt hier 2000 Zeichen, ist hier aber beliebig gewählt und kann jederzeit im Script (befindet sich im Kopfbereich der HTML-Seite) verändert werden. Es werden also die Zeichen mitgezählt und angezeigt und bei Erreichen von über 2000 Zeichen wird das ganze Nachrichten-Feld als Warnhinweis auf die Hintergrundfarbe dunkelrot gesetzt, löscht man dann wieder auf unter 2000 Zeichen wird auf die aktuelle Hintergrundfarbe, sprich Ausgangsfarbe zurückgesetzt.

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

The Girl In The Red Jacket

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 | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Light'.
Jquery Smooth Scroll. Animiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

Individuelle Sidebar für Plus-Infos: Bei höheren Auflösungen steht die Sidebar (Seitenleiste) rechts vom Inhalt und bietet Platz für zusätzlichen Content. Auf den einzelnen Seiten haben wir den Inhalt der Sidebar mal verschieden angelegt, so gibt es dort mal 2 Boxen, 4 Boxen, 6 Boxen oder 8 Boxen, z.B. auch mal ein zweites oder drittes Menü sowie auch Bilder oder Texte in dieser Spalte. So haben Sie die Möglichkeit sich für ein Beispiel zu entscheiden oder eben auch alle zu nutzen.
Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.

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

CONSTRUCTION PARTICLES

Für NEUE Seiten
oder
In-BEARBEITUNG-Seiten
+ Jquery
Partikel-Animation

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome
Schrift: 'Open Sans Light'.

Besonderheiten

Under-Construction-Template ¹. Wenn Ihre Seite im Aufbau, Umbau oder Neu am Start ist.
Jquery-Particles Animation: ² Partikel in automat. Bewegung bei ständiger Erneuerung und Veränderung.
CSS-Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.
CSS-Animation: Puff-In-Effekt: Fenster blendet sich zunächst verkleinernd in die Seite hinein und poppt dann zur vollen Größe auf.

¹= Webseite im Aufbau / Umbau oder NEU am Start | 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 !
Warum so eine Vorab-Seite? Lange vor Beginn des Firmen-Starts beginnt sich ja schon die Medien-und Werbetrommel zu drehen und sowohl die Medien als auch die potenziellen Besucher wissen dies als professionelle und seriöse Ankündigung sehr zu schätzen.
Dieses Template verbindet eine dezente Hintergrund-Animation (sich ständig verändernde Partikel) mit 2 Info-Fenstern, welche animiert sind (Puff-In-Animation).

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

Kommerzieller Inhalt: einmalig Euro 24,-- | Wer es zusammen mit einem anderen Template bestellt nur 10,--

Awesome Limegreen

+ ONE-PAGER
+ Menü mit untersch. Icon bei jedem Link
+ CSS-Box-Fenster

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Light'.
CSS-Only-Menü mit Toggle-Schalter. Eine Javascript-freie Lösung, welche eine Funktion per Schalter (an/aus) ermöglicht um das Menü bei mobilen Auflösungen zunächst zu verstecken.
Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein animiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.

Besonderheiten

One-Pager:¹ Alle Inhalte innerhalb einer HTML-Seite.
CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.
Fixierte Menü-Leiste: Menü scrollt also nicht mit, sondern ist fest positioniert
Icons-Menü: Unterschiedliche Icons bei jedem Link im Hauptmenü.

¹= 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 mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden. 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 sowie das Öffnen von Boxfenstern innerhalb der selben Seite für weiteren Inhalt.

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

Visit All The Beautiful Places Worldwide

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Condensed'.
Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein annimiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.
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.

Besonderheiten

Fotos werden im Kopf-und Fussbereich kreisförmig per CSS ausgeschnitten.¹
Unterschiedliche Fotos im Kopf-und Fussbereich erzählen für jede HTML-Seite eine andere Geschichte. ²
Fixed Menü-Button: Bei mobilen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immer im sichtbaren Bereich des Displays.
Fixed Menü: Bei höheren Auflösungen ist die gesamte Menü-Leiste - ab Tablet-Auflösung bis Desktop-Auflösung - fest gesetzt und ist damit beim Scrollen immer im sichtbaren Bereich des Bildschirms.

¹= Halbkreisförmig ausgeschnittene Fotos | Im Kopfbereich ist das Foto per unterem Halbkreis ausgeschnitten. Im Fussbereich dagegen sieht man das Foto ausgeschnitten per oberen Halbkreis mit größerem Bildausschnitt oder ganz neuem Foto. Auch ihre Fotos werden so ausgeschnitten und zwar automatisch und ganz ohne Grafikprogramm.

²= Geschichten erzählen | Das menschliche Gehirn versucht immer aus zwei Bildern - dem Anfangszustand und dem Endzustand - den fehlenden Mittelteil gedanklich zu vervollständigen. Dies macht sich zum Beispiel das Comic-Genre zu Nutze.
Geschichten bleiben allgemein besser in Erinnerung - und somit auch Ihr zu bewerbendes Produkt.
Hier in diesem Template können Sie diese Art von "Geschichte-erzählen" selber einsetzen, beispielhaft dafür die Seiten:
    - Seite Primus (index1.html) zeigt oben eine verschneite Landschaft und unten eine Skilift-Anlage in den Wolken.
    - Seite Secundus (index2.html) zeigt oben eine Frau vor dem Swimming-Pool und unten, wie sie aus dem Pool hinaussteigt.
    - Seite Tertius (index3.html) zeigt oben eine schmale Wasser-Straße in Venedig und unten die Verbreiterung hin zur Lagune.

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

YOLO - Live Your Life

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Light'.
CSS-Only-Menü mit Toggle-Schalter. Eine Javascript-freie Lösung, welche eine Funktion per Schalter (an/aus) ermöglicht um das Menü bei mobilen Auflösungen zunächst zu verstecken.
Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein animiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.

Besonderheiten

CSS-Animation Menü: Das Menü wird hier bei allen Auflösungen zunächst versteckt und blendet sich nach Klick von klein nach groß sowie von innen nach außen ein, während es sich dabei dreht.
Fixed Menü-Button: Bei allen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immer im sichtbaren Bereich des Displays.
Halbtransparentes Menü, welches über einer Hintergrundgrafik liegt.
CSS-Animation Menü-Schalter: Während sich das Menü einblendet schiebt sich ein Schließen-Button von oben nach unten über den Öffnen-Button, so das man sofort weiß, wie man das Menü wieder schließen kann. Bei Klick auf dem Schließen-Button läuft es dann umgekehrt ab: Der Öffnen-Button wird wieder freigelegt während sich das Menü wieder ausblendet und zwar dabei von groß nach klein sowie von außen nach innen drehend.

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

Near The Station

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans 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.

Besonderheiten

Wechselnde Fotos im Kopfbereich. Auf jeder Seite ein anderes Foto, welches sich auch hinter den Halbkreis legt.
Verschachteltes Grid-System bei der Picture-Gallery. ¹

¹= Verschachteltes Grid | Die Bilder haben verschiedene Größen und einige Bilder strecken sich vertikal oder horizontal über mehrere andere Bilder hinweg.

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

Homepage Vorlagen - Templates

Webseiten 25-32

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten