responsive webdesign templates

Quotes, Sayings & Idioms

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

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-Galerie
Schrift: 'Open Sans Condensed' und 'Old Standard'.
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-Box-Fenster: Inhaltsfenster öffnen sich per Klick als div-Box innerhalb der selben Seite - Eben ganz ohne Javascript (Jquery) und damit immer funktionell, also auch wenn Javascript vom Besucher der Seite in seinem Browser deaktiviert wurde.
Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fest positioniert
CSS Ghost Buttons ³ passend zum Flat Design.

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

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

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

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

PIER WITH A LIGHTHOUSE

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'.
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-Halbtransparenz bei Foto / Navigation: Mit CSS-rgba, somit diesbezüglich Farbe und Deckungsgrad ggfls. anders einstellbar.
Variante: Auch Version ohne die Sidebar, d.h. die rechte Spalte, im Inhaltsbereich anbei.

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

FOLLOW THE HORIZON

+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ 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'.
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.
CSS-Bildwechsler, responsive: Bilder-Slideshow automatisch startend. Tauscht 5 Bilder. Inklusive CSS-Bildgesamtanzahl-Anzeige
Jquery Smooth Scroll To Sections: ²
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.
Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fest positioniert

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

Golden October

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: Halbtransparenter Hintergrund-Farbverlauf bei Homepagename und Menü in jeweils unterschiedlichen Farben.
Bildunterschrift-Text inklusive Font-Icon-Pfeil-Symbol (Font Awesome) zeigend zum Bild.

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

Fitness Girl In The Morning

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

Zarte Pastellfarben.
Story-Telling: Im Kopfbereich ist ein großes Foto und direkt darunter 3 kleinere platziert. Somit wird in diesem Set eine kleine Mini-Geschichte erzählt.
Auf jeder Seite andere Fotos im Kopfbereich.

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

Knock On Wood

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

Natürliche Holz-Textur. Konstruktion liegt auf Holz-Hintergrund und bewirkt einen edlen, wertigen Look .
Auf jeder Seite ein anderes Foto im Kopfbereich.
Fest positionierte Hintergrund-Grafik scrollt nicht mit.

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

Technical Enjoyment

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

Slogan-Kreis, halbtransparent¹: Per CSS-rgba im Kopfbereich angelegt, nimmt sowohl Text als auch Icons auf bzw. gemischte Formen. Wir haben verschiedenen Beispiele angelegt.
Platzierung des Slogan-Kreises mit CSS position: Sie können den Kreis, der hier unten links angeordnet ist, also an jede beliebige Stelle innerhalb des Kopfbereiches platzieren. Wir haben einige Code-Beispiele im Template angegeben, z.B. auch eine Zentrierung (vertikal und horizontal).
Klassische, edle Farbharmonie: Schwarz- und Weissfarbgebung mit dezenten grauen und dunkelroten Tupfern. Das ist zeitlos modern, ähnlich wie die Farbharmonien der Print- und Online-Ausgaben der großen Tageszeitungen.

¹ = CSS rgba-Transparenz | Bezüglich der Transparenz läßt sich bei Bedarf sowohl die Farbe als auch die Deckkraft (Transparenzstärke) beliebig ändern. Hier ist ein ein roter Kreis mit weißer Schrift. Es würde zum Beispiel auch ein hell-transparenter Kreis mit dunkler Schriftfarbe möglich sein, somit läßt sich dieses ganz individuell auf verschiedene Hintergrundbilder anpassen.

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

Staying In Bed With My Favourite Hobby

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.
Durchsichtiger Homepagename: Als Highlight ist hier Homepagename ebenfalls halbtransparent.

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