responsive , homepage vorlagen, homepagevorlagen ( templates )

Cities And Towns

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

Der Goldene Schnitt ¹ Einige der Boxen im Inhaltsbereich sind im goldenen Schnitt angeordnet, stehend für ein perfektes Verhältnis von Proportion, das von vielen Menschen als besonders harmonisch empfunden wird.

¹= Goldener Schnitt | Es ist eine Gestaltungs-und Harmonie-Regel, welche in der Natur selbst sowie bei berühmten Gemälden von Künstlern, bei Fotos, in der Architektur und vielen anderen Bereichen vorkommt.

1. Grob gesagt kann man von einem Verhältnis von ca. Ein-Drittel zu Zwei-Drittel sprechen.
2. Genauer gesagt, in Prozent ausgedrückt: Ein Teil bekommt 61.8 Prozent und der andere Teil 38.2 Prozent.
3. Bei festen Werten könnte man auch eine Zahl durch 1.618 teilen, z.B.
1024 : 1,618 = 632 Pixel
1024 - 632 = 392 Pixel

Um bei unserem Template zu bleiben: Statt also zwei Spalten jeweils 50 Prozent zu geben, verwenden wir hier teilweise eine Aufteilung von 38 Prozent zu 62 Prozent.

Allerdings ist das Thema 'Goldener Schnitt' allgemein und nicht nur vom Webdesign aus betrachtet, sehr viel umfangreicher, hier wird der Goldene Schnitt einfach erklärt, auch das Web-Magazin T3n berichtet darüber.

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

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 29,--

Sweet Lingerie Dreams

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 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ü zu verstecken.

Besonderheiten

Menü-Button bei allen Auflösungen: Damit ist die Navigation zunächst versteckt, der Fokus wird auf das Wesentliche gelegt und der Blick nicht abgelenkt.
CSS-Animation Menü-Schalter: Bei Mausberührung gibt es eine 180-Grad-Drehung des Icons und bei Klick gleitet der Menü-Schalter nach oben hinaus, während das Menü kurz danach hineingleitet.
Zitat mit vorangestelltem Icon plus Trennlinie: Bei mobilen Auflösungen blenden wir das Icon/die Trennlinie zunächst aus (CSS display:none) um Platz für das Zitat zu sparen, die Wiedereinblendung ab Tablet Portrait-Auflösung (768px) erfreut dann aber charmant das Auge.

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

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 19,-- | Wer es zusammen mit einem anderen Template bestellt nur 10,--

29	Haus am Waldsee	Bestellen Download Anschauen
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 UI Card Design: Der Inhalt wird hier auf einzelne, übersichtliche Karten (Blöcke) verteilt. Big Icons: Neben den normalen kleinen Icons, gibt es hier auch dekorative große Icons in untersch. Anzahl, Farbe sowie mit und ohne Verlinkung, damit Sie es gut nachvollziehen können. CSS Button-Animation: Bei Mausberührung erfolgt Animation von 'Background' per CSS-Keyframes. Privater Inhalt: Vorlage ist kostenlos Kommerzieller Inhalt: einmalig Euro 29,--

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ü: Das Menü ist 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 29,--

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 29,--

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 29,--