Homepage Vorlagen - Templates

Webseiten 09-16

09 A Guide To Be Happy



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

  • CSS-Bildwechsler: Per CSS-Slideshow werden 8 Fotos getauscht, inklusive CSS-Bildanzeiger
  • 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,--
 
10 Above The Clouds



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.
  • 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: Hineingleiten des Menüs.

Besonderheiten

  • CSS-Bildwechsler 1a schiebt die Fotos animiert nach links hinaus und wechselt die Richtung 1b.
  • Paginierung 2: Seiten-Numerierung unten.

1a= Bildwechsler:
Diese Slideshow funkioniert alleine per CSS-Keyframes-Animation. Es ist also eine Standard-Animation, welche ganz ohne weitere Scripte (z.B. Javascript oder Jquery) auskommt. Dazu gibt es noch einen Anzeiger per Font-Icons für die Anzahl der wechselnden Bilder (Offene bzw. volle Ringe ). Damit die Ringe auf nahezu jedem Foto gut sichtbar sind, wurde ein CSS-Textschatten auf diese gelegt.

1b= Richtungswechsel: Auf den Seiten Home, Secundus und Quartus läuft die Animation standardmässig vorwärts ab, auf den Seiten Primus, Tertius und Quintus lasssen wir die Slideshow zur Abwechslung rückwärts ablaufen (animation-direction: reverse). Und auf der Seite Sextus läuft die Animation gar vorwärts durch und gleich danach wieder rückwärts (animation-direction: alternate).

2= Paginierung:
Die Seiten-Numerierung bietet nicht nur praktischerweise im unteren Bereich die direkten Links zu den Unterseiten an, sondern schafft auch Strukur, denn es wird auch der jeweils aktuell angewählte Link (also die momentane Seite) angezeigt.
Zudem haben wir in diese Paginierung noch erweitert, indem jeweils ganz links und ganz recht sog. Font-Icons eingebaut wurden. Also hier die Icons "home" (um zur Startseite zu springen) und "pfeil-oben" (um nach oben an den Anfang der Seite zu springen).


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
11 An der Küste - At The Coast
+ ONE-PAGER
+ Jquery-Slideshow
+ Full-Screen-Site
+ 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.
  • 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: Lightbox-Foto-Gallerie.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.
  • CSS-Menü-Animation: Einblenden des Menüs.

Besonderheiten

  • Jquery: Slider (Automatischer Bildwechsler). Hier mit über 20 Fotos - RESPONSIVE und BILDSCHIRMFÜLLEND, damit Sie genau sehen, wie es funktioniert - sowohl bei kleinen (mobilen) als auch hohen Auflösungen. Inklusive alternativer Steuerung per Pfeile oder 'Thumbnails'. Bildunterschrift als Text bei jedem Foto der Slideshow möglich.
  • One-Pager:1 Alle Inhalte innerhalb einer HTML-Seite.
  • Full-Screen-Site. 2
  • CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.

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 mittels nur einzigen HTML-Seite die verschiedenen Links als div-Boxfenster innerhalb der selben Seite aufgerufen werden.

2 = Full-Screen-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,--
 
12 SONNENUNTERGANG - FLAT DESIGN



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.
  • 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 '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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • 100 % Flat-Design .1
  • Geometrische Form ( HALBKREIS, nur mit CSS erstellt ), steht für die untergehende Sonne.

1= Flat Design:
Flat-Design steht für eine Reduktion der Gestaltung auf das Wesentliche. Hierzu wird auf jegliche Tiefe verzichtet, d.h. es gibt keine Farbverläufe, Verzierungen, Schatten, Texturen oder Rahmen. Getreu dem Motto: "Weiniger ist mehr". Es gilt also eine Dreidimensionalität zu vermeiden. Auch das Stichwort 'Minimalismus' ist prägend.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
13 Check The News In The Morning



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.
  • Jquery: Particles. Animierte schwebende Objekte (Polygone, Kreise).
  • Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
  • Icon-Font: Font Awesome.
  • 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.
  • 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.

Besonderheiten

  • Jquery-Animation: Schwebende Partikel. Die Partikel würden sich gfls. auch über ihre Fotos legen. Im Script selber gibt es unzählige Möglichkeiten zur Einstellung, sei es Geschwindigkeit, Anzahl, Farbe, Form der Objekte (Kreise, Quadrate, Polygone), Abschalten der Verbindungslinien, Verhalten bei Mausberührung oder Klick und vieles mehr. .
  • Menü-Button, fest positioniert: D.h, dieser ist beim Scrollen immer im sichtbaren Bereich des Browser-Fensters.
  • CSS-Animation: Aufblätter-Effekt: Die Links werden nacheinander mit kleiner Verzögerung eingeblendet.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
14 RESTAURANT - FRESH FOOD



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.
  • 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 '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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • Geometrische Form ( DREIECK 1 nur mit CSS erstellt ) enthält Slogan-Spruch.
    Der Slogan-Spruch ist immer responsive unten rechts im oberen Bereich platziert.
  • Geometrische Form ( KREIS mit Umrahmung nur mit CSS erstellt ) enthält hier noch ein Font-Icon (Messer/Gabel).
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter 2 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.

2= Dreieck mit Slogan: In Wirklichkeit ist es ein großes Rechteck, per CSS gestaltet und absolut platziert. Diese Rechteck wird um 45Grad gedreht (transform:rotate) und der überstehende Teil wird abgeschnitten (overflow:hidden) bzw. verdeckt.

2= Transparenz/Farbfilter: Im Gegensatz zum etwas leichter zu handhabenen CSS-Befehl 'opacity', welcher auch eine Transparenz ermöglicht, wird beim CSS-Befehl 'rgba' die Schrift auf dem Objekt nicht auch gleichzeitig mit transparent gesetzt, sondern bleibt in voller Deckungskraft erhalten. Beim 'rgba-Befehl' können Sie übrigens Farbe und Deckungsgrad auch anders einstellen.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
15 Fish In The Sea
+ ONE-PAGER
+ CSS-Wellen-Animation
+ CSS-Fische-Animation
+ Full-Screen-Site
+ 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.
  • CSS-Only-Menü mit Toggle-Schalter. Eine Javascript-freie Lösung, welche eine Funktion per Schalter (an/aus) ermöglicht um das Menü zunächst zu verstecken.
  • CSS-Menü-Animation: Einblenden des Menüs.
  • Jquery: Lightbox-Foto-Gallerie.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

  • CSS-Wellen + CSS-Fische-Animation. 1 Auch der Menü-Kreis bewegt sich in den Wellen.
  • One-Pager:2 Alle Inhalte innerhalb einer HTML-Seite.
  • Full-Screen-Site. 3
  • CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb der selben Seite. Dies ist eine Javascript-freie Lösung.

1 = CSS-Wellen + CSS-Fische-Animation:
+ Wellengang, welcher auch den Menü-Kreis mit einschließt.
+ Die Fische schwimmen nach rechts, drehen auf der horizontalen Achse um dann wieder nach links zu schwimmen usw. immer hin und her, unendlich oder so oft Sie es möchten.
+ Wenden des Ankers.

2= 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 mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden.

3 = Full-Screen-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,--
 
16 Corporate Business Since 1879
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ 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: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
  • Icon-Font: Font Awesome.
  • 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.
  • 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

  • Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster (bei Klick auf 'Weiter-Button') als div-Box innerhalb der selben Seite nur per CSS öffnet.
  • Smooth Scroll To Sections: Die Sprungziele, sprich die einzelnen Sektionen (Abschnitte) werden animiert (gleitend) sanft und sichtbar angesteuert. Somit dient das sogenannte 'Smooth Scrolling' der Übersichtlichkeit und besseren Orientierung. Man registriert also auch optisch, wohin man gelangt und springt nicht so abrupt wie sonst beim vergleichbaren HTML-Anker.

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