Homepage Vorlagen - Templates

Webseiten 01-08

 
 
 
01 THE ART OF LIGHT


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
  • Schrift: 'JOSEFIN Sans'.

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Font-Icon-Tausch ( Fontawesome ) im Menü: Kreis-Symbol wird durch das Häkchen-Symbol getauscht
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
02 PIER WITH A LIGHTHOUSE


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 | 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-Halbtransparenz über Fotos / Navigation: Mit CSS-rgba, somit diesbezüglich Farbe und Deckungsgrad ggfls. anders einstellbar.
  • Variante: Auch Version ohne die Sidebar, d.h. die rechte Spalte, im Inhaltsbereich anbei.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
03 FOLLOW THE HORIZON
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Box-Fenster



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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Bildwechsler, responsive: Bilder-Slideshow automatisch startend. Tauscht 5 Bilder. Inklusive CSS-Bildgesamtanzahl-Anzeige
  • Jquery Smooth Scroll To Sections: 2
  • CSS-Box-Fenster: Inhaltsfenster öffnen sich per Klick als div-Box innerhalb der selben Seite - Eben ganz ohne Javascript (Jquery) und damit immer funktionabel, also auch wenn Javascript vom Besucher der Seite in seinem Browser deaktiviert wurde.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert

1= 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 innerhalb einer Seite die verschiedenen Sektionen aufgerufen werden. Wichtiger Bestandteil eines One-Pagers ist das Smooth-Scroll-To-Sections sowie das Öffnen von (div-)Boxfenstern innerhalb der selben Seite für weiteren Inhalt.

2= Smooth Scroll To Sections | Die Sprungziele, sprich die einzelnen Sektionen (Abschnitte) werden übrigens animiert sanft und sichtbar angesteuert. Gemeint ist das sogenannte 'Smooth Scrolling', welches der Übersichtlichkeit und besseren Orientierung dient. Man registriert also auch optisch, wohin man gelangt und springt nicht so abrupt wie sonst beim üblichen HTML-Anker.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
04 Ready For Input


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'.
  • 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-Animation: Aufblätter-Effekt: Die Links des Menüs werden nacheinander mit kleiner Verzögerung eingeblendet.
  • Ausblenden von FOTO zu FARBE: Beim Scrollen blendet das Foto im Kopf-Bereich allmählich in eine Farbe über und verschwindet damit sanft.
  • Auf jeder Seite andere Fotos im Kopf-und Fussbereich.
  • Menü-Button, fest positioniert: D.h, dieser ist beim Scrollen immer im sichtbaren Bereich des Browser-Fensters.
  • CSS-Animation: Scan-Effekt beim Homepagenamen ( startet automatisch ).
  • CSS-Animation: Shiny-Effekt bei den Buttons ( bei Mausberührung ).
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
05 START A NEW CREATIVE PROJECT
Aufklapp-Menü
bestehend aus:
+CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT



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

  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Akkordeon-Menü 2 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )

1= Aufklapp-Menü | Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten. 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,--
 
06 Italian Life Style


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 | Jquery: Lightbox-Foto-Gallerie
  • Schrift: 'OLD STANDARD' 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ü 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.
  • Jquery Smooth Scroll. Animiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • CSS Bildwechsler, responsive. Tauscht 10 Fotos. Inklusive CSS-Bildgesamtanzahl-Anzeiger.
  • Jquery 'Slick' - responsive Schieberegler - im Inhaltsbereich.
    Tauscht nicht nur Bilder sondern oder auch andere Objekte wie z.B. Icons oder Text.
  • CSS Boxfenster. Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet plus den Hintergrund der Webseite abdunkelt.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
07 Haircut 21st Century
+ ONE-PAGER
+ CSS-Box-Fenster



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 | Jquery: Lightbox-Foto-Gallerie
  • Schrift: 'Roboto 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.

Besonderheiten

  • One-Pager: Alle Inhalte innerhalb einer HTML-Seite angelegt.
  • CSS-div-Box-Fenster: Eine Javascript-freie Lösung, welche Fenster als CSS-div-Box innerhalb der selben Seite öffnet. Es funktioniert also immer, auch wenn Javascript im Browser des Besuchers deaktiviert wurde.
  • Fadenkreuz im Inhaltsbereich teilt vier wichtige Felder wie Menü, Fotogallerie und zweierlei Felder mit Kontaktdaten.
  • CSS-Animation: Font-Icon-Ventilator dreht automatisch beim Start der Seite und bei Mausberührung erhöht sich dessen Drehzahl.
  • CSS-Animation: Blink-Effekt bei Mausberührung der Links im Navigation-Menü, sofern man länger als eine Sekunde den Mauszeiger auf dem Objekt platziert.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
08 Driving Down That Road 45 Degree


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
  • Schrift: 'Open Sans Light'.

Besonderheiten

  • CSS-Animation:1 Fahrzeuge/Menschen fahren/laufen eine Straße mit 45Grad-Schräge hinab und liefern sich ein spannendes Rennen, welches dank Überholungen durch unterschiedlicher Geschwindigkeiten nie langweilig wird.
  • Launcher: Diese Homepage dient als Startplatz für mehrere Ihrer anderen Webseiten.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Menü schräg gestellt + Icon-Tausch: Menü nimmt bei exakt zweigeteilter Hintergrundfarbe 6 Buttons auf, welche durch ein vorangestelltes Icon auch einen Icon-Tausch bei Mausberührung haben.

1 = Fahrzeuge/Menschen - Animation | Sechs Objekte, nämlich ein Motorrad, ein Auto, ein Truck, ein Läufer, ein Wanderer und ein Rollstuhlfahrer fahren/laufen den steilen Hügel hinab. Verwendet wurden Font-Icons, welches wir jeweils unterschiedlich coloriert haben. Klar können Sie auch andere Icons, andere Farben oder auch mehr Objekte wählen sowie natürlich eigene Geschwindigkeiten für Ihre Objekte wählen. Dies ist eine CSS-Keyframes-Animation.
Eine kleine Überraschung in diesem Rennen ist der Rollstuhlfahrer, der dank seiner Olympia-Teilnahme sehr viel Körner verwerten kann um einen neuen Rekord in dieser Disziplin aufstellen zu können.

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