89 Gourmet Kitchen - Three Stars Cooking


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. Animiertes Scrollen bei allen internen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen. Beispiel: Der Nach-Oben-Scroll-Pfeil.

Besonderheiten

  • Viele Fotos durch responsive Bild-Leiste nicht nur im Inhaltsbereich sonder auch oben im Kopfbreich und unten im Fussbereich machen das Template überaus dekorativ.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
90 Sauna Wellness Spa Time


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

Besonderheiten

  • Menü-Button bei allen Auflösungen eingesetzt.
  • Facebook-Layout-Style: Großes Foto plus kleines versetztes Foto im Header | Über dem großem Foto liegt noch ein zur Hälfte nach unten versetztes kleines Foto, neben dem rechts daneben der Hompagename plus Seitentitel angezeigt wird.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
91 CUP OF COFFEE


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

  • Die warmen Farbtöne (Farbe names Peru) in Verbindung mit einer coolen Sachlichkeit in Form von hellen Grautönen machen hier den ganz speziellen Reiz aus und bilden einen schönen Kontrast. Unaufdringliche Gemütlichkeit, die zum Entspannen einlädt. Let us have a Cup of Coffee, please.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
92 KANZLEI RA LAWYER & PARTNER


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

  • Zweigeteilter Kopfbereich: mit Halbtransparenz und diagonal angeordnetem Text bei der Desktop-Version, sprich Homepagename 'oben links' und Slogan 'unten rechts'.
  • CSS-Animation:. Außergewöhnliches Hineingleiten des Menüs, nämlich von unten nach oben.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
93 Black & White Project


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

  • Transparenz-Menü.
  • Schwarz & Weiß-Design
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
94 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 animiertes 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 29,--
95 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 29,--
96 SLEEPING LITTLE BUDDHA
+ ONE-PAGER
+ CSS-Chakra-Animation
+ Full-Screen-Only-Site
+ Sternen-Animation
+ 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'.

Besonderheiten

  • CSS-Chakra-Animation: 1 Verschiedene farbige Objekte drehen mit unterschiedlicher Geschwindigkeit, hier symbolisch stehend für die Chakren-Theorie 2 .
  • Jquery-Particles-Animation: Sternenhimmel
  • One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button
  • Full-Screen-Only-Site: 3.
  • Mehrere Ebenen: 4 Die Reihenfolge der Ebenen, unten erklärt, trägt zum Verständnis der Vorlage bei.

1 = CSS Chakra-Animation | Sie sehen hier 5 halbtransparente CSS-Quadrate, welche sich jeweils um die Buddha-Grafik mit verschiedener Geschwindigkeit drehen um alle Farben zur Geltung zu bringen. Die Halbtransparenz läßt alle tiefer liegende Quadrate durchscheinen. Nach ca. 2 Minuten Drehung liegen dann alle wieder aufeinander und bilden ein einziges Quadrat. Der Kreislauf beginnt dann von vorn und man kann es dank der wechselnden Überlagerungen ständig ansehen, ohne das es langweilig wird.
Mit dieser Animation möchten wir die Chakren symbolisch darstellen. Halbtransparenz und Überlagerung bei unterschiedlicher Geschwindigkeit ermöglicht es, daß alle sieben Farben der Chakren insgesamt auch nur mit 5 Quadraten trotzdem dargestellt werden. Klar könnte man auch 7 oder mehr Quadrate drehen lassen, aber wir wollten es nicht so kompliziert machen.

2 = Die Chakren-Theorie | Aus Indien stammend kennt man die Chakren als Energiewirbel bzw. Energieräder in der Aura. Analog dazu kennen wir hier auch im Westen dieses Wissen, welches in Form von Heiligenscheinen auf alten Bildern bei Heiligen, Königen oder Engeln stark verankert ist. Es gibt 7 Hauptchakren -welche jeweils verschiedenen Bedeutungen sowie auch Blockaden entsprechen- in den Farben, Rot, Orange, Gelb, Grün, Blau, Indigoblau und Violett. Wenn alle Chakren geöffnet sind und sich drehen, sind Körper, Seele und Geist eins, wir sind dann sozusagen in unserer Mitte.

3 = Full-Screen-Only-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier als Highlight 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.

4 = Mehrere Ebenen | Hinter das Sterne-Partikel-Script haben wir 2 Ebenen und darüber 4 Ebenen gelegt. Hier die Reihenfolge von hinten nach vorn:
- Wasser-Landschafts-Foto
- CSS-Farbverlauf kreisförmig von innen halbtransparent nach außen blau-schwarz.
- Jquery-Sterne-Partikel-Script
- CSS-animierte Quadrate
- Buddha-Foto
- Menü
- Div-Box-Fenster

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