responsive , homepage vorlagen, homepagevorlagen ( templates )

Polaroid Open Country

ONE-PAGER
+ Polaroid-Fotos
+ schräge Objekte
+ CSS-Slideshow
+ CSS-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-Gallerie
Schrift: 'Open Sans Light' und 'Josefin Sans'.
Jquery: Smooth Scroll To Sections. Animiertes Angleiten der jeweiligen Abschnitte sprich Bereiche/Sektionen der Webseite.
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. In der Regel wird das Menü auf mobilen Geräten hierbei zunächst versteckt.

Besonderheiten

One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
CSS Polaroid-Fotos: Per CSS angelegt und mit typischer Textzeile im unterem Drittel des Polaroid-Fotos.
CSS Bildwechsler inklusive CSS-Bildgesamtzahlanzeiger, bei dem 6 Männer und eine Frau als kleine Font-Icons die Gesamtzahl der Bilder sowie das aktuelle Bild anzeigen.
CSS-Pause-Schalter (ON/OFF), welcher die CSS-Slideshow pausiert und bei Bedarf wieder startet.
CSS Box-Fenster: Eine Javascript-freie Lösung, welche Fenster als div-Box innerhalb der selben Seite öffnet.

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

Spicy & Fresh - Minimalism Series

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

Fixed Menü-Button: Bei allen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immmer im sichtbaren Bereich des Displays.
CSS-Animation: Seitentitel gleitet hinein, so das man gut erkennt, welchen Link bzw. welche Seite man gerade gewählt hat.
CSS-Animation: HTML-Seite blendet sich ein! Klickt man im Menü einen Link, so wird die angewählte HTML-Seite animiert dargestellt, in der Form, das diese beim Laden eingeblendet wird.
Minimalismus gibt es von alters her in vielen Bereichen, sei es bezüglich Musik, Kunst, Architektur, aber diese Einstellung gewinnt in heutiger Zeit zunehmend an Bedeutung wenn es insbesondere um einen reflektierten Lebensstil in der modernen Welt geht ( Natürliches Leben, Zurück zur Natur, Einkehr, Meditation, Einfachheit, Weniger ist Mehr, Purismus, Kontrast im Wesentlichen ). Klar hat es auch beim Webdesign Einzug gehalten, Flat-Design ist plötzlich in aller Munde.

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

Reliable Insurance Company

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.
CSS-Only-Menü mit Toggle-Schalter. Eine Javascript-freie Lösung, welche eine Funktion per Schalter (an/aus) ermöglicht. In der Regel wird das Menü auf mobilen Geräten hierbei zunächst versteckt.

Besonderheiten

Fest positionierter Menü-Button ( bei moblilen Auflösungen ) : Somit auch beim Scrollen immer im Display sichtbar und das Menü ist deshalb jederzeit sofort erreichbar.
CSS-Bildwechsler: Die CSS-Slidshow schiebt die Bilder im Kopfbereich animiert nach links hinaus und enthält zudem noch einen Anzeiger für die Gesamtzahl der zu wechselnden Bilder.
Grafisches Logo: Anstelle des Homepagenamens als Text, bauen Sie gerne ein grafisches Logo ein, Beispiel/Anleitung ist anbei.
Farben-Psychologie: Welche Farben könnten mehr Vertrauen schaffen als Dodgerblue und Orange in Verbindung mit Weiß? Betrachtet man es näher, so wird mit diesen Farben natürlich das Urlaubsgefühl, nämlich Sonne in Orange sowie Himmel und Meer in Blau - in Verbindung mit der Unschuldsfarbe Weiß - gespiegelt. Im Urlaub fühlt man sich beschwingt, frei und unbeschwert, eben weil der Arbeitssstress oder eintönige Routinen wegfallen. Klar möchte man dieses Gefühl dann auch im Alltag wieder erwecken und greift unbewußt zum entsprechend farbigem Produkt bzw. in diesem Fall löst die Webseite ein wohliges Gefühl aus.

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

Technical Solutions

AUFKLAPP-MENÜ:
+ CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT

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'.
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. CSS-Dreiecke im Inhaltsbereich verstärken optisch die Trennung der Abschnitte, Highlight ist hier, das die Dreiecke dabei jeweils die Farbe des vorstehenden Abschnitts übernehmen.
Mit CSS-AUFKLAPP-MENÜ ¹ ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
Akkordeon-Menü ² ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )

¹= Aufklapp-Menü | Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten.
Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'. "Getoggled" werden also nicht nur der Menü-Schalter sondern insbesondere auch die Top-Level-Links, welche die Untermenüs öffen.

²= Akkordion-Menü | Unter einem Akkordeon versteht man einen Aufklappmechanismus (hier auf das Menü bei mobilen Auflösungen angewandt), der nur einen Teilbereich eines Objektes zeigt und erst durch click oder touch weitere Teilbereiche aufschiebt.

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

Bamboo & Wheat

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.

Besonderheiten

Auf jeder Seite ein anderes Foto im Kopfbereich.
Bambus-Farben von Beige bis Lemonchiffon im CSS-Farbverlauf.
Fest positionierte Hintergrund-Grafik (Bambus) scrollt nicht mit.
Halbtransparenz-Menü: Die Menü-Links mit vorangestelltem Icon.

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

The Great Silver Tower

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 annimiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.

Besonderheiten

Jquery 'Slick' - responsive Schieberegler im Inhaltsbereich.
Tauscht nicht nur Bilder sondern oder auch andere Objekte wie z.B. Icons oder Text.
CSS-Box-Fenster: Inhaltsfenster öffnen sich per Klick als div-Box innerhalb der selben Seite.
Auf jeder Seite ein anderes Foto im Kopfbereich.
Zentrierte Grundlinien-Plazierung: Icons im Kopfbereich sind bei mobilen Auflösungen bezogen auf die Grundlinie des unteren Fotorandes ¹ exakt horizontal platziert und innerhalb dessen auch vertikal zentriert angeordnet. Ab 960 Pixel gilt: Bezogen auf die Grundlinie des rechten Fotorandes sind diese Icons dann vertikal platziert und innerhalb dessen auch horizontal zentriert angeordnet.

¹= Grundlinien-Platzierung | Beispiel-Grafik nachstehend:

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

Sofa Social Media

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

CSS 3D-Konstruktion ¹ - Geometrische CSS-TRAPEZ-Form.

¹= 3D-Effekt mit CSS | Ein Podest ragt in die Seite hinein, darauf liegen einige Icons sowie an der Seitenkante das Menü. Eine Trapez-Form verschafft uns hier im oberen Bereich einen wundervollen 3-D-Effekt, der ohne jede Grafik und nur per CSS erstellt ist. Im unteren Bereich der Webseite wird dieses gespiegelt und rundet damit diesen Effekt perfekt ab. Außerdem verstärken die auch perspektivisch angeordneten Social Media Icons nochmal diesen 3D-Effekt.

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

Blue Gear Under Silver Moon

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
Google-Webfonts: 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

Zahnrad-Icon als Metapher. ¹
CSS-animiertes Zahnrad ² inkl. CSS-Schaltfunktion (3 x Geschwindigkeiten / Pause / Farbe)
Wechselnde Fotos im Kopfbereich auf jeder Seite: Nachfolgend Beispiele wie folgt, beliebig änderbar:
- Startseite mit Bild in Bild ³.
- Unterseiten '1-5' mit jeweils wechselnden Bildern über dem Hintergrundbild.
- Unterseite '6' mit Doppeltausch von Bild und Hintergrundbild.
Menü bei allen Auflösungen immer sichtbar. Also ohne den sog. Hamburger Button.

¹= Zahnräder Metapher | Denn Zahnräder als solches werden generell gern verwendet um zu zeigen, das bei einem Projekt alles rund läuft und Prozesse exakt abgestimmt sind. Präzise wie ein Uhrwerk, ein Rad greift ins andere. Dynamik und Verläßlichkeit sind garantiert.

²= CSS-Zahnrad-Animation mit CSS-Schaltfunktion | Beim Start der Seite dreht das Zahnrad zunächst automatisch, per Auswahlschalter können Sie es dann pausieren bzw. drei versch. Geschwindigkeiten einstellen. Und noch besser: Ein weiterer Auswahlschalter läßt Sie dabei drei versch. Farben für das Zahnrad wählen. Der Clou: Beide Auswahlschalter funktionieren unabhängig von einander, somit sind Kombinationen möglich, wie z.B.: Geschw. 1 mit Farbe 2, Geschw. 3 mit Farbe 3, Geschw. 0 ( Pause ) mit Farbe 1 usw.
Hinweis: Eine CSS-Animation wie hier die CSS-Schalt-Funkion funktioniert in jedem Browser immer, ganz im Gegensatz zu einer Javascript (Jquery) - Komponente , welche bei seitens des Besuchers deaktiviertem Javascript im Browser nicht mehr funktioniert.

³= Bild in Bild | Nur auf der Startseite. Der Eine oder Andere kennt es von TV-Trailern bei Blockbuster-Ankündigungen ( PRO 7 ).

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

Homepage Vorlagen - Templates

Webseiten 49 - 56

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten