Homepage Vorlagen - Templates

Webseiten 01-08

01 The Honest Company
+ 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-Galerie
  • 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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • 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
  • 3 Fotos im Kopfbereich, wobei über dem mittleren Foto ein halbtransparenter Spruchkreis liegt. Bei mobilen Auflösungen lassen wir nur das mittlere Foto erscheinen und blenden die beiden anderen aus.

1= One Pager | Dies ist ein responsive One-Pager. 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,--
 
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 bei Foto / 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. 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 BÜRO - Organisation und Verwaltung



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 Condensed'.
  • 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

  • Auf jeder Seite ein anderes Foto im Kopfbereich.
  • Halbtransparentes Menü ( mit CSS-rgba ) mit vorangestellten Icons bei den Links.
  • CSS-Box-Fenster + Anleitung dafür: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet plus den Hintergrund der Webseite abdunkelt.
  • Jquery 'Slick' - responsive Schieberegler - im Inhaltsbereich.
    Tauscht nicht nur Bilder sondern oder auch andere Objekte wie z.B. Icons oder Text.
    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 Woman In Beautiful Lavender Field


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

  • Multiple Colours:1a Unsere Idee: Das Foto im Kopfbereich soll farblich immer zu dem umgebenden Bereich passen. Und auf jeder HTML-Seite soll es dort ein anderes Foto geben. Das Besondere an diesem Template ist, das mit nur einer Änderung der Hintergrund-Farbe mittels CSS nicht nur die Hintergrund-Farbe im Kopfbereich sondern gleichzeitig auch die im Fussbereich mit geändert wird.
  • Ausleuchtung der Fotos im Kopfbereich:1b Mit CSS box-shadow.
    Hier adaptieren wir sozusagen die Ambilight-Technologie, welche bestimmte Fernsehgeräte verwenden:
    Info: https://de.wikipedia.org/wiki/Ambilight
  • Fixed Menü-Button: Bei mobilen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immmer im sichtbaren Bereich des Displays.

1a,b = Multiple Colours | Nur per CSS: Farb-und Fotoänderung für alle Seiten plus Ausleuchtung der Fotos sowie Streifen-Hintergrund . Anleitung dafür ist anbei. Es gibt also bei den 7 farblich unterschiedlichen Beispiel-Seiten, jeweils den selben Aufbau, jedoch untersch. Farben/Fotos/Ausleuchtung und somit könnten Sie auch ggfls. Ihre eigenen Bilder effektvoll anpassen.

    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 und hier einer der schnellsten ist.

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