105 Morning Dew - Morgentau


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ü zu verstecken.

Besonderheiten

  • Grafische, minimalistische Uhr (Jquery) 1: Ggfls. komplett änderbar in Farbe, Größe, Hintergrund, Zeiger ...

1= Analog-Uhr | Ab Tablet-Landscape Auflösung von 960 Pixel in der Breite sehen Sie oben im Header eine grafische Analog-Uhr, bei mobilen Auflösungen haben wir diese aus designtechnischen Gründen ausgeblendet (display:none).
Anbei auch ein Beispiel ohne die Uhr.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
106 Holz, Leder & Stein
+ ONE-PAGER
+ Jquery-Slider
+ CSS-Animationen
+ 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 animiertes 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ü bei mobilen Auflösungen zunächst zu verstecken.

Besonderheiten

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Action-Buttons ( Start/Angebot ) : 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-Bildwechsler, responsive: 2 x im Inhaltsbereich, unterschiedlich variert.
  • Jquery Smooth Scroll To Sections: Animiertes Angleiten der Link-Sprungziele
  • CSS-Animation: Kamera-Effekt. 3 Fotos werden horizontal, vertikal und diagonal abgefahren.
  • CSS-Animation: CSS-Streifen-Hintergrund-Pattern 4 wird animiert.

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

3= CSS-Animation Kamerafahrt | Beim Abschnitt 'Information' sehen Sie unsere CSS-Keyframes-Animation, welche automatisch startet. Hier werden bei den Blöcken 1, 2 und 3 Hintergrundbilder unterschiedlich animiert und zwar bewegt sich das entsprechende Bild vertikal von links nach rechts, horizontal von unten nach oben und diagonal von oben links nach rechts unten. Und jeweils wieder zurück und von vorn beginnend.

4= CSS-Animation von CSS-Hintergrund-Pattern | Schauen Sie beim Abschnitt 'Kontakt' und Sie sehen einen CSS-Hintergrund mit verschieden breiten und colorierten Streifen. Diesen haben wir in der Art animiert, das sich nicht nur die Breite der Streifen ändert sondern auch deren Farben von 'Burlywood' nach 'Peru'. Wie immer können Sie natürlich auch ihre Lieblingsfarben verwenden, hier haben wir uns thematisch an holzähnliche Farben gehalten. Animationen dieser Art sieht man öfter im Fernsehen, insbesondere bei Nachrichten-Sendungen, es mag an der edlen Wirkung verbunden mit moderner, dynamischer Optik liegen, aber machen Sie sich doch selber einen Eindruck.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
107 One-Pager With Big Animated Icons &
Particles Animation
+ ONE-PAGER
+ CSS Big Icons plus
Jquery Particles Animation
+ 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 animiertes 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.
  • Big Icons. Jeder Abschnitt im Inhaltsbereich enthält ein extra großes dekoratives Icon.
  • CSS-Animationen: Alle BIG ICONS 2 verschieden animiert (Kreisen, Pendeln, Wenden, Verschieben).
  • Jquery-Particles-Animation: Bildschirmfüllend im Kopfbereich über CSS-Regenbogen-Farbverlauf liegend.
  • Section-Number: 3 Jeder Abschnitt (Section) erhält bei mobilen Auflösungen eine Orientierungsnummer.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: Animiertes Angleiten der Link-Sprungziele.
  • Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.

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.

2= Big Icons | Die Icons sind ohne Grafik erstellt und jeweils verschieden per CSS animiert, wobei diese Animationen automatisch starten und dank der niedrig eingestellten Geschwindigkeit sehr dezent ablaufen. Für diese Icons verwenden wir die Font-Icon-Schrift 'Fontawesome', so das Sie gerne auch leicht andere Icons tauschen können. Hier haben wir die Icons mal extra groß gemacht, jedoch sind Größe und Farbe beliebig zu ändern.

3= Section Number | Die bei jedem Abschnitt sichtbare Ziffer oben links ist eine wichtige Orientierungshilfe gerade bei mobilen Auflösungen. Da die Links im Menü ebenfalls eine Ziffer vorangestellt haben, erkennt man sofort welchen Abschnitt man nach Klick angleitet (Smooth-Scroll). Hinweis: Bei größeren Auflösungen haben wir diese Ziffer über die CSS-Media-Queries ausgeblendet (display:none}

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
108 Hopeful Stars In The Sky


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: Particles. Animierte schwebende Sterne.
  • Jquery Smooth Scroll To Top.
  • 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

  • Jquery-Animation: Schwebende Partikel. Die Sterne würden sich gfls. auch über ihre Fotos legen. Übrigens kann man per Klick auf das Foto jeweils mehr Sterne generieren oder per Mausberührung die Sterne verschieben. 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 und vieles mehr. .
  • Auf jeder Seite ein anderes Foto im Kopfbereich mit darüberliegendem animierten Sterne-Script.
  • Name und Menü-Button, fest positioniert: D.h, dieser bleibt 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 29,--
109 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 29,--
 
110 Noch kein Name

...In Arbeit ...


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
111 Meine Firma im Web


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

  • Das Logo: 1 Nehmen Sie Ihr eigenes grafisches Logo oder nutzen Sie die Font-Icon für ein Logo.
  • Fixed Menü-Button: Bei mobilen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immmer im sichtbaren Bereich des Displays.
  • CSS-Animation: Fade-In + Delay.
    Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.

1= Das Logo | In der Box, welche jetzt das Icon mit dem Schlüssel enthält, ist Platz für Ihr eigenes Logo. Sie können aber auch wie im Beipiel ein Icon benutzen, die Icon-Font 'Font Awesome' ist ja bereits installiert. So haben wir auf den Unterseiten mal verschiedene Icons als Beispiel eingebaut. Somit könnten Sie es leicht für ihre Firma anpassen, im Beispiel also Schlüsseldienst (Sicherheitstechnik), Handwerker, Elektronik (TV, Computer), Fotograf, Gastronomie, Friseur , Medizin (Ambulanz, Pharmazie).

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
112 Business, Personal & Private


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

  • Mit vorgeschalteter Startseite.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Transparenz ( mit CSS-rgba ). | Fixierter Background
  • HTML-Anker: Innerhalb der Unterseiten werden die Links per sog. Html-Anker angesprungen.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--