Mobile First Responsive Webdesign

ESCAPE PLUS ZERO

+ ONE-PAGER
+ Smooth-Scrolling-To-Sections

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: ¹ Alle Inhalte innerhalb einer HTML-Seite.
Jquery Smooth Scroll To Sections: ²
CSS-Animation: Lightbox-Erweiterung: ³ 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.

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

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

³= 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 39,--

Unicorn Horus Startup

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 ¹ welcher die Fotos mit dem Farbverlauf-Hintergrund verschmelzen läßt, also gfls. auch bei Ihren Fotos.

¹= 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 39,--

Meine Firma im Web

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 'Josefin Sans'.
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

Das Logo: ¹ Nehmen Sie Ihr eigenes grafisches Logo oder nutzen Sie die Font-Icon für ein Logo.
Fixed Menü-Button: Bei mobilen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immmer im sichtbaren Bereich des Displays.
CSS-Animation: Fade-In + Delay.
Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.

¹= Das Logo | In der Box, welche jetzt das Icon mit dem Schlüssel enthält, ist Platz für Ihr eigenes Logo. Sie können aber auch wie im Beipiel ein Icon benutzen, die Icon-Font 'Font Awesome' ist ja bereits installiert. So haben wir auf den Unterseiten mal verschiedene Icons als Beispiel eingebaut. Somit könnten Sie es leicht für ihre Firma anpassen, im Beispiel also Schlüsseldienst (Sicherheitstechnik), Handwerker, Elektronik (TV, Computer), Fotograf, Gastronomie, Friseur , Medizin (Ambulanz, Pharmazie).

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

CORONA Covid-19

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

Blue Diamond

+ 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

Ganz ohne Menü: Minimalistisch im Flat-Design-Sinn und dank One-Pager-Konstruktion möglich.
CSS Einfärbung von Fotos: Hier in Blau, dank CSS-rgba-Wert aber in jeder Farbe/Transparenzstärke möglich.
CSS Rautenförmige Icons: Es sind Quadrate, welche um 45 Grad gedreht werden (CSS transform:rotate), entscheidend aber ist, das der Inhalt nicht auch mit dreht und daher einen Wert von minus 45 Grad erhält.
One-Pager: Alle Inhalte innerhalb einer HTML-Seite.
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 39,--

ALL OVER THE WORLD

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

FORMULARE
Kostenlos zum Einbau in unsere Templates

6 x
DESIGN-FORMULARE
- kostenlos -
zum Einbau in unsere Templates

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: ¹ Platzhalter-Text fliegt nach Klick animiert und verkleinert nach oben (statt standardmässig zu verschwinden) und bleibt permanent dort sichtbar.

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

Chess - The Game Of Kings

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

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

Homepagevorlagen - Templates

Webseiten 17-24

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten