17 ESCAPE PLUS ZERO
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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'.
  • 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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: 2
  • CSS-Animation: Lightbox-Erweiterung: 3 Halbtransparente Felder plus Text aus verschiedenen Richtungen kommend.
  • CSS-Animation: Fade-In + Delay.
    Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.

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= Lightbox-Erweiterung | Wir haben die Lightbox optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery (Quartus) sehen Sie bei Mausberührung der Fotos einen Box-Slider-Effekt. Es wird ein farbiges, halbtransparentes Feld, welches eine Text-Aufschrift enthält, aus verschiedenen Richtungen herein gefahren. Transparenz-Farbe, Schriftfarbe und Schrift-Text lassen sich natürlich verändern.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
18 Unicorn Horus Startup


Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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'.
  • 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.
  • 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.

Besonderheiten

  • CSS Farbverlauf von Dunkelblau nach Violett. Bekannt sind diese bunten, vitalen und atmosphärisch sehr dichten Farbverläufe vom mobilen Betriebssystem ANDROID, längst wird es auch - um trendy zu sein - auf normalen Webseiten eingesetzt.
  • Auf jeder Seite andere Fotos im Kopfbereich, per CSS wird ein Filter erstellt 1 welcher die Fotos mit dem Farbverlauf-Hintergrund verschmelzen läßt, also gfls. auch bei Ihren Fotos.

1= Filter, Einarbeitung der Fotos in den Hintergrund |
Es ist ein linearer Farbverlauf mit CSS-rgba-Transparenz und damit sowohl in Farbe als auch Transparenz-Dichte veränderbar, wie folgt:
background:linear-gradient(to right,#5349A4,rgba(0,0,0,.3),#A0277B)

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


Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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

  • CSS Bildwechsler mit Fade-Effekt. Die Bilder in der Slideshow werden beim Wechsel sanft aus- und eingeblendet.
  • Der Goldene Schnitt 1 Die Boxen im Kopfbereich, Inhaltsbereich und Fussbereich sind im goldenen Schnitt angeordnet, stehend für ein perfektes Verhältnis von Proportion, das von vielen Menschen als besonders harmonisch empfunden wird.

1= 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 HP 19 zu bleiben:
Getreu dem Goldenen Schnitt müssten wir zwei Spalten im Verhältnis 38 Prozent zu 62 Prozent anlegen.
Wir arbeiten hier aber sogar mit drei Spalten, die erste und zweite Spalte bekommt je 38 Prozent und die dritte 24 Prozent.
Da wir die zweite Spalte (38 %) und dritte Spalte (24 %) optisch als zusammenhängend angelegt haben, landen wir letzendlich wieder beim Goldenen Schnitt, nämlich 38 % für Spalte 1 sowie 62 % zusammengenommen für Spalte 2 und 3 ( 38 % plus 24 % `= 62 %)

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.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
20 CORONA Covid-19


Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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 'BUNGEE'.
  • 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 annimiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.

Besonderheiten

  • Jquery - responsive Schieberegler (Slick) - im Inhaltsbereich.
  • CSS Boxfenster. Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet plus den Hintergrund der Webseite abdunkelt.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 19,--
21 Prometheus


Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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

  • Auf jeder Seite ein anderes Foto im Kopfbereich.
  • CSS-rgba-Transparenz: Dieser Filter (veränderbar in Farbe und Transparenz-Stärke) liegt über den Fotos im Kopfbereich und ermöglicht, das der Homepagename sowie auch die Navigation bei unterschiedlichen Fotos immer gut lesbar ist.
  • 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.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
22 ALL OVER THE WORLD



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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'.
  • 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.
  • 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.

Besonderheiten

  • 3 dekorative Fotos im Kopfbereich, bei mobilen Auflösungen lassen wir nur das mittlere Foto erscheinen und blenden die beiden anderen aus.
  • Abgerundete Fotos im ganzen Template.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
23 FORMULARE
Kostenlos zum Einbau in unsere Templates
6 x
DESIGN-FORMULARE
- kostenlos -
zum Einbau in unsere Templates



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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
  • Schrift: 'Open Sans Condensed'.

Besonderheiten

  • 6 x kostenlose responsive Design-Formulare zum Einbau in unsere Templates.
  • Mit Icons-Einbau im Formular: Schaut professionell aus und steigert die Übersichtlichkeit.
  • Formular-Besonderheit: 1 Platzhalter-Text fliegt nach Klick animiert und verkleinert nach oben (statt standardmässig zu verschwinden) und bleibt permanent dort sichtbar.

1= Formular-Besonderheit | Um ein Formular moderner und vor allem platzsparender zu gestalten, kann man auch die Beschriftung direkt in das 'input-Feld' schreiben, per sog. Platzhalter-Text, welcher verschwindet, sobald man den ersten Buchstaben einträgt. Der Nachteil dieser an sich schönen Technik ist jedoch: Wenn der Platzhalter-Text einmal verschwunden ist, so kommmt er nicht mehr wieder zurück und der Kunde hat keine Orientierungsmöglichkeit mehr, weiss also nicht mehr um was für ein Feld es handelt (Email, Text, Nummer usw.)
Hier ist unsere Lösung um den kleinen Nachteil mit dem Platzhalter-Text auszugleichen: Die Beschriftung (Label) steht im Feld, fliegt aber nach Klick animiert und verkleinert nach oben und bleibt dort permanent stehen. Darunter ist dann wie gewohnt Platz für den Feld-Eintrag. Das ist nicht nur praktisch und nett anzusehen sondern macht auch einen seriösen, vertrauenserweckenden Eindruck.

    Privater Inhalt:   Formulare kostenlos zum Einbau in unsere Templates.
    Kommerzieller Inhalt: einmalig Euro 0,--   Formulare kostenlos zum Einbau in unsere Templates.
24 Chess - The Game Of Kings
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Benötigt kein Menü
+ Box-Fenster



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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-Galerie
  • Schrift: 'Open Sans Condensed'.

Besonderheiten

  • Ganz ohne Menü: Macht es luftiger und ist dank One-Pager-Konstruktion möglich.
  • One-Pager: Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: Sanftes Scrollen = Animiertes Angleiten einzelner Abschnitte.
  • 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.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--