responsive , homepage vorlagen, homepagevorlagen ( templates )

Wide Open Country

Homepage Vorlage , templates , Homepage-Vorlagen, free download

Homepage Vorlage , responsive templates , Homepage-Vorlagen, free download

Responsive Homepage Vorlage , templates , Homepagevorlagen, free download

ONE-PAGER
+ Polaroid-Fotos
+ schräge Objekte
+ CSS-Slideshow
+ 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: 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.
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 Bildwechsler Slideshow inklusive Bildanzeiger, bei dem 4 Männer und eine Frau als kleine Icons die Gesamtzahl der Bilder sowie das aktuelle Bild anzeigen.
CSS-Animation Bei Mausberührung werden die schräg-gestellten Objekte wieder gerade gerichtet.

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

New Purism

Technik

Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

Kleine Bilder-Gallerie im Fussbereich.
Startseite + 2 alternative Unterseiten anbei.

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

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. Sie sehen hier 4 Font-Icons (Gondeln) welche beim Drehen immer in waagerechter Position bleiben. Also ganz so wie beim richtigen Riesenrad. 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. Wir mussten uns also dafür eine Lösung ausdenken und haben deshalb mit gleicher Geschwindigkeit alle vier Icons per Block rechts herum und jedes einzelne Icon mit einer zweiten Animation links herum drehen lassen.

² = Full-Screen-Only-Site:
Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier als Highlight 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ü
bestehend aus:
+ 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,--

The Blue Racer

Technik

Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

Viele Menüs.
Kalenderblätter für News-Bereich.

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

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.
Special Edition. Responsive-Version unseres Templates Nr. 36/Document.
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 Vorlage ( Template ) zum Download

Webseiten 49 - 56 ( frei für privat, kostenpflichtig für kommerziell )

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten