Responsive Templates

09	Enjoy Home-Office - Work And Relax	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 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 UI Card Design: Der Inhalt wird hier auf einzelne, übersichtliche Karten (Blöcke) verteilt. 3 Bilder-Galerien: Zeigend im Beispiel, wie man 2, 3 oder 4 Bilder nebeneinander stellt sowie auch beliebig viele Bilder untereinander. ( Im Template: Auf Seite Quartus - index4.html ) Auf jeder Seite ein anderes Foto im Kopfbereich. Privater Inhalt: Vorlage ist kostenlos Kommerzieller Inhalt: einmalig Euro 29,--

Architects + Engineers

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

4 Fotos im Kopf-Bereich dekorativ bis an den Rand gezogen. Auf jeder Seite andere Fotos.
Schrägen mit CSS:¹ Auf den Hintergrund mit der Eigenschaft "background" großflächig deklariert, lockern diese die Struktur des Designs auf.

¹= Schrägen mit CSS | Mit CSS "background:linear-gradient" werden die unterschiedlichen Schrägen definiert und mit CSS "nth-child" legen wir diese im Template auf die Abschnitte 2 - 5 des Inhalt-Bereichs. Dadurch wäre auch ein ganz anderes Muster möglich, als jenes für das wir uns entschieden haben. Gerne probieren Sie mit unterschiedlichen Farben statt nur einer Farbe und/oder anderen Richtungen der Schrägen.

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

11	Profunda Materia	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 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 Hintergrund-Textur: Es gibt hier ein Zusammenspiel von CSS-Textur und CSS-Farbverlauf-Transparenzen Privater Inhalt: Vorlage ist kostenlos Kommerzieller Inhalt: einmalig Euro 29,--

Tischlerei Woodpecker

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 'Old Standard'.
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

Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
Auf jeder Seite ein anderes Foto im Kopfbereich.
CSS-Box-Fenster + Anleitung dafür: Bei einigen Links/Buttons öffnen sich neue Fenster als eine Javascript-freie Lösung, welche Fenster als CSS-div-Box innerhalb der selben Seite öffnet.

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

Winter Fun, Sport & Relaxation

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

Je nach Auflösung¹ verschiedene Fotos im Header: Ab mobil, ab Tablet-Portrait sowie ab Desktop
Facebook-Layout-Style: Großes Foto plus kleines versetztes Foto im Header | Über dem großem Foto liegt noch ein zur Hälfte nach unten versetztes kleines Foto, neben dem rechts daneben der Hompagename plus Seitentitel angezeigt wird.
Foto-Ausblendung mit CSS display:none. Das kleine, versetzte Foto blenden wir aus designtechnischen und optischen Gründen erst ab einer Auflösung von 580 Pixeln ein und vorher aus.

¹= Versch. Fotos abhängig von Auflösung | Klar könnte man auch immer das selbe Fotos für alle Aufösungen nehmen, aber wir wollten hier etwas Spannung reinbringen. Jedoch hat es auch einen praktischen Vorteil, nämlich bezgl. der Ladezeit, denn man kann jeweils verschieden kleine/große KB-Bilder ja nach Auflösung wählen.

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

RESTAURANT - FRESH FOOD

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 Geometrische Form: DREIECK ¹ enthält Slogan-Spruch.
Der Slogan-Spruch ist immer responsive unten rechts im oberen Bereich platziert.
CSS Geometrische Form: KREIS mit Umrahmung enthält hier ein Font-Icon ( Messer/Gabel ).

¹= Dreieck mit Slogan | In Wirklichkeit ist es ein großes Rechteck, per CSS gestaltet und absolut platziert. Diese Rechteck wird um 45Grad gedreht (transform:rotate) und der überstehende Teil wird abgeschnitten (overflow:hidden) bzw. verdeckt.

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

Fish In The Sea

+ ONE-PAGER
+ CSS-Wellen-Animation
+ CSS-Fische-Animation
+ Full-Screen-Site
+ CSS-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-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ü zunächst zu verstecken.

Besonderheiten

CSS-Wellen + CSS-Fische-Animation. ¹ Auch der Menü-Kreis bewegt sich in den Wellen.
One-Pager:² Alle Inhalte innerhalb einer HTML-Seite.
Full-Screen-Site. ³
CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb der selben Seite. Dies ist eine Javascript-freie Lösung.

¹ = CSS-Wellen + CSS-Fische-Animation | + Wellengang, welcher auch den Menü-Kreis mit einschließt. + Die Fische schwimmen nach rechts, drehen auf der horizontalen Achse um dann wieder nach links zu schwimmen usw. immer hin und her, unendlich oder so oft Sie es möchten. + Wenden des Ankers.

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

³ = Full-Screen-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.

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

16	Solutions Ideas & More	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'. 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 Vertikaler Bildwechsler: Die Bilder werden hierbei nach oben hinausgeschoben. Das sieht man eher selten und wir hoffen, Ihnen gefällt diese Idee daher umso besser. Inklusive Bildanzeiger (per Font-Icons) für die Anzeige der Gesamtzahl der wechselnden Bilder/Aktuelles Bild. 3-Spalten-Layout, wobei wir die erste Spalte mit nur 24 Prozent bewußt etwas schmaler gehalten haben, hier im Beispiel angelegt für Icons, Paginierung oder kleinere Bilder. CSS Paginierung: Seitenumerierung mit allen verlinkten Seiten, zeigt nicht nur die aktuelle Seite an, sondern bietet zusätzlich zur normalen Navigation die Möglichkeit schnell und spontan alle einzelnen Seiten anzuwählen. Privater Inhalt: Vorlage ist kostenlos Kommerzieller Inhalt: einmalig Euro 29,--