49 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,--
 
50 New Purism

Homepage Vorlage , templates , Homepage-Vorlagen,  free download


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,--
 
51 Ferris Wheel - Riesenrad





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





+ 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: 1 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: 2.

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

2 = 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,--
 
52 Technical Solutions






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




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Ü 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Strukturierte Abschnitte 2 ( mit CSS-Strukturpseudoklassen ) . Tutorial sowie weiterführende Links anbei.
  • Akkordeon-Menü 2 ( 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 )

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

2= 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,--
 
53 The Blue Racer

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


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,--
 
54 Diamonds and Girls


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.
  • 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,--
 
55 Sofa Social Media






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




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 1 - Geometrische Form ( TRAPEZ nur mit CSS erstellt ).
  • Gedeckte Farbtöne.

1= 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,--
 
56 DOCUMENT RESPONSIVE



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
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.

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 2 (bei Mouseover auf den Fotos)

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