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 | 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.
  • Jquery Smooth Scroll. Animiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • CSS-Bildwechsler: Per CSS-Slideshow werden 8 Fotos getauscht, inklusive CSS-Bildgesamtzahlanzeiger
  • 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 | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
  • Schrift: 'Open Sans 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-Bildwechsler, responsive 1a schiebt die Fotos animiert nach links hinaus und wechselt Richtung 1b. Natürlich inklusive CSS-Bildgesamtanzahl-Anzeiger.
  • 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 Metropolis City
+ ONE-PAGER
+ Jquery-Slideshow
+ 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: 'Open Sans 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.

Besonderheiten

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Animation: Im Kopfbereich ist auf Foto und Homepagename eine entgegengesetzte Skalierung gelegt, welche einen Fade-In / Fade-Out Effekt bewirkt.
  • Jquery-Bildwechsler, responsive: 2 x im Inhaltsbereich, unterschiedlich variert.
  • CSS-Action-Buttons ( Start/Kontakt ) : 2 Lösen eine Aktion an prominenter Stelle ( Kopfbereich ) aus.
  • CSS Box-Fenster: Eine Javascript-freie Lösung, welche Fenster als div-Box innerhalb der selben Seite öffnet.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: 3

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= Action-Buttons | Act.Button-1 (Start) springt per Smooth-Scroll an den Anfang der Seite. Und Act.Button-2 (Kontakt) öffnet ein CSS-Fenster. Gerne können Sie natürlich auch andere Aktionen für diese beiden Action-Buttons wählen. .

3= 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,--
 
12 Tischlerei Woodpecker


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

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Auf jeder Seite ein anderes Foto im Kopfbereich.
  • CSS-Box-Fenster + Anleitung dafür: Bei einigen Links/Buttons öffnen sich neue Fenster als eine Javascript-freie Lösung, welche Fenster als CSS-div-Box innerhalb der selben Seite öffnet.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
13 More Than Fashion - It's An Attitude


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

  • Edle Wirkung durch goldene Schrift. Mit 'CSS-rgba' legen wir ein halbtransparentes Feld zwischen Hintergrundgrafik und Homepagenamen bzw. Menü. Somit ermöglicht dieser Farbfilter 1 das diese goldene Schriftfarbe auf jedem Foto gut lesbar ist.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Auf jeder Seite ein anderes Foto im Kopfbereich, darüber liegt halbtransparent Menü und Homepagename.
  • CSS-Box-Fenster + Anleitung dafür: Bei einigen Links/Buttons öffnen sich neue Fenster als eine Javascript-freie Lösung, welche Fenster als CSS-div-Box innerhalb der selben Seite öffnet.
  • CSS-Animation: Dezenter Blink-Effekt bei Mausberührung der Links im Navigation-Menü, sofern man länger als eine Sekunde den Mauszeiger auf dem Objekt platziert.

1= Transparenz/Farbfilter | Beim 'CSS-rgba-Wert' können Sie Transparenz-Farbe und Deckungsgrad individuell einstellen. Der Wert setzt sich zusammen aus dem RGB-Farbwert (die ersten drei Stellen) sowie der Deckkraft (die vierte Stelle). Einige Beispiele wie folgt, hier auf 'CSS-background' gesetzt::
- background:rgba(0,0,0,0.4) = Farbe Schwarz, Transparenz 60%.
- background:rgba(255,255,255,0.7) = Farbe Weiß, Transparenz 30%.
- background:rgba(255,0,0,0.5) = Farbe Rot, Transparenz 50%.
Mit Werten von 0.1 bis 0.9 (wobei gilt: 0=volltransparent und 1= gar keine Transparenz), stellen Sie also mit der vierten Stelle die Deckkraft ein.

    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 | 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 Geometrische Form: DREIECK 1 enthält Slogan-Spruch.
    Der Slogan-Spruch ist immer responsive unten rechts im oberen Bereich platziert.
  • CSS Geometrische Form: KREIS mit Umrahmung enthält hier ein Font-Icon ( Messer/Gabel ).

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

    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 | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
  • Schrift: 'Open Sans Light'.
  • 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.

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 | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
  • Schrift: 'Open Sans Light'.
  • One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
  • 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-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, sanft gleitend 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,--