responsive , homepage vorlagen, homepagevorlagen ( templates )

Wide 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.
One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
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 annimiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.
Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light' sowie 'Josefin Sans'.
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.
CSS-Menü-Animation: Hineingleiten des Menüs bei mobilen Auflösungen.

Besonderheiten

Polaroid-Fotos: Per CSS angelegt und mit typischer Textzeile im unterem Drittel des Polaroid-Fotos.
CSS-Pause-Schalter (ON/OFF), welcher die Slideshow pausiert und bei Bedarf wieder startet.
CSS Bildwechsler Slideshow inklusive Bildanzeiger, bei dem 6 Männer und eine Frau als kleine Icons die Gesamtzahl der Bilder sowie das aktuelle Bild anzeigen.
Box-Fenster CSS-Only: Diverse Inhaltsfenster öffen sich als div-Box mittels Klick auf den 'Weiter-Button' innerhalb der selben Seite als CSS-Konstrukt.
CSS-Animation Bei Mausberührung werden die schräg-gestellten Objekte wieder gerade gerichtet.

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.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt '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.
CSS-Menü-Animation: Hineingleiten des Menüs (bei mobilen Auflösungen).

Besonderheiten

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. Im Wesentlichen geht es beim Minimalismus um ein Zurücknehmen, eine Reflektion über das Wesentliche und Rückbesinnung zur Natürlichkeit und um eine Haltung wider der allgemeinen Hektik, welcher der Großstadtmensch permanent ausgesetzt ist.
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.
CSS-Menü-Animation: Menü-Button dreht bei Hover und entgegengesetzt bei Klick.

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

Ferris Wheel - Riesenrad

+ ONE-PAGER
+ CSS-Karussell-Animation
+ Full-Screen-Only-Site
+ CSS-Box-Fenster

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik.
One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
Jquery: Lightbox-Foto-Gallerie.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

CSS-Karussell-Animation:¹ Verschiedene farbige Objekte kreisen wie bei einem Karussell (Riesenrad) um einen Mittelpunkt.
Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button
Full-Screen-Only-Site: ².

¹ = CSS Karussell-Animation:
Eine Riesenrad-CSS-Animaton ganz ohne Grafiken erstellt. 4 Font-Icons (Gondeln) bleiben beim Kreisen immer in waagerechter Position. Das ist nicht selbstverständlich, denn bei einem einfachen Kreisen per CSS-Animation um einen Mittelpunkt herum würde ja die oberste Gondel, wenn sie sich an unterer Position befindet, auf dem Kopf stehen. Unsere Lösung dafür ist es, alle 4 Icons mit gleicher Geschwindigkeit per Block rechts herum und jedes einzelne Icon mit einer zweiten Animation links herum drehen zu lassen. Man kann es also physikalisch vergleichen mit einem realen Riesenrad, welches ja auch technisch dafür sorgt, das die einzelnen Gondeln mitsamt der Menschen darin niemals Kopf stehen.

² = Full-Screen-Only-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 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.
Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' 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.
CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

Geometrische Form. CSS-Dreiecke verstärken optisch die Trennung der Abschnitte, Highlight ist hier, das die Dreiecke dabei jeweils die Farbe des vorstehenden Abschnitts übernehmen.
Mit AUFKLAPP-MENÜ ¹ ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
Strukturierte Abschnitte ( mit CSS-Strukturpseudoklassen ) . Tutorial sowie weiterführende Links anbei.
Akkordeon-Menü ² ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
CSS-Animation: Der Toggle-Schalter hat ebenfalls eine Slider-Funkion, nach Klick schiebt er sich hinaus und gibt den darunter liegenden Schließen-Button frei.
CSS-Animation: Wenden. ( Icons im Fussbereich )

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

Rendez-Vous Tonight

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik.
Jquery: Lightbox-Foto-Gallerie.
Jquery Smooth Scroll. Annimiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

Font-Icon-Tausch: Im Hauptmenü wird ein Font-Icon (Fontawesome) durch ein anderes gewechselt.
Individuelle Sidebar für Plus-Infos: Bei höheren Auflösungen steht die Sidebar (Seitenleiste) rechts vom Inhalt und bietet Platz für zusätzlichen Content. Auf den einzelnen Seiten haben wir den Inhalt der Sidebar mal verschieden angelegt, so gibt es dort mal 2 Boxen, 4 Boxen, 6 Boxen oder 8 Boxen, z.B. auch mal ein zweites oder drittes Menü sowie auch Bilder oder Texte in dieser Spalte. So haben Sie die Möglichkeit sich für ein Beispiel zu entscheiden oder eben auch alle zu nutzen.
Bildtext bei den Fotos wahlweise kombinierbar: Highlights sind hier die Fotos im Inhaltsbereich, die sowohl ohne Bildtext als auch mit Bildtext angelegt sind sowie die Möglichkeit beides miteinander zu kombinieren.
Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.

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

Diamonds and Girls

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik.
Icon-Font: Font Awesome.
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-Ribbons (engl:ribbon = Band, Schleife, Farbband).
1 x Ribbon schräggestellt, wickelt sich um die jeweiligen Boxen platziert links oben.
1 x Ribbon horizontal und vertikal zentriert, umwickelt die Box also mittig (siehe beim Logo).
Responsive Full Screen Image.
On-Focus (Beim Formular werden bei Klick in die aktiven Felder diese anders dargestellt).
CSS3-Animation Ausblenden (Mouseover: Bei den Boxen-Bildern auf Start sowie Bildern auf Unterseiten).
CSS-Animation Drehen (Mouseover: Bei den Social Media Icons).

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

Sofa Social Media

3D - KONSTRUKTION
mit Trapez-Form
nur per CSS erstellt

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik.
Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt '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.
CSS-Menü-Animation: Einblenden des Menüs.

Besonderheiten

3D-Konstruktion ¹ - Geometrische Form ( TRAPEZ nur mit CSS erstellt ).
Gedeckte Farbtöne.

¹= 3D-Effekt
Eine Trapez-Form verschafft uns hier im oberen Bereich einen wundervollen 3-D-Effekt. 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,--

DOCUMENT RESPONSIVE

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik.
Icon-Font: Font Awesome.

Besonderheiten

Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
Hochgestelltes Zeichen (Sup). Für eine ergänzende Texterklärung einzelner Begriffe am Ende der Seite.
CSS-Animation: Schwingen-Effekt + Farbänderung Rahmen/Schriftfarbe (bei Mouseover auf den Zitat-Feldern)
CSS-Animation: Verschiedene Slide (Verschieben) - Effekte ² (bei Mouseover auf den Fotos)

¹= Versch. Effekte auf den Fotos: SLIDE-TOP, SLIDE-BOTTOM, SLIDE-LEFT, SLIDE-RIGHT, SLIDE-DIAGONAL, SLIDE-ZICKZACK.

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