33 I LIKE YOU



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download





[ Fotos zeigen Auflösungsansicht von TABLET und SMARTPHONE im Portraitmodus sowie Laptop und DESKTOP-PC ]

Technik

  • Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
  • Mobile-First-Technik.
  • Font-Icons. Grafische Icons (PNG-Grafik)
  • 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

  • Responsive Full Screen Image.
  • On-Focus (Beim Formular werden bei Klick in die aktiven Felder diese anders dargestellt).
  • CSS3-Animation Textüberlagerung, transparent mit Schiebeeffekt
  • CSS3-Animation Beben (Mouseover: Beim Logo-Feld).
  • CSS3-Animation Verzerrung/Ausblenden (Mouseover: Bei den Bildern auf Unterseiten im Text).
  • CSS3-Animation Drehen.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
34 We All Like Coffee Time



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 To Top.
  • 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 (bei mobilen Auflösungen).

Besonderheiten

  • Verschiedene Kaffee-Farben: Die Farbe PERU ist natürlich auch dabei.
  • CSS-Ausleuchtung von Objekten: Die Bilder im Inhaltsbereich plus die Box mit dem Homepagenamen besitzen einen Lichtteffekt per CSS und erhellen damit den Hintergrundbereich.
  • Menü-Button, fest positioniert: D.h, dieser ist beim Scrollen immer im sichtbaren Bereich des Browser-Fensters.
  • CSS-Animation: Menü dreht von 180 Grad auf 0 Grad und währendessen werden die Links nacheinander mit kleiner Verzögerung eingeblendet.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
35 UP TO THE TOP






Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download




ONE-PAGER Alle Inhalte innerhalb einer HTML-Seite. + Smooth-Scrolling-To-Sections
+ Box-Fenster

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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: 2
  • Viele Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.
  • Fixierte Menü-Leiste Menü scrollt als nicht mit, sondern ist fix positioniert
  • CSS-Animation: Box-Slider: 3 Halbtransparente Felder plus Text aus verschiedenen Richtungen kommend.
  • Google-Webfonts: Extra breite Schrift 'Bungee', zu sehen beim Homepagenamen, bereits installiert.

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

3= Box-Slider:
Wir haben die Lightbox erweitert bzw. optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery sehen Sie bei Mausberührung der Fotos einen Box-Slider-Effekt. Es wird ein farbiges, halbtransparentes Feld, welches eine Text-Aufschrift enthält, aus verschiedenen Richtungen herein gefahren. Transparenz-Farbe, Schriftfarbe und Schrift-Text lassen sich natürlich verändern.

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

Homepage Vorlage , templates , Homepage-Vorlagen,  free download


Technik

  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

  • Die Farben sind hier blau, weiss und grau und diese stehen damit für Sachlichkeit, Reinheit, Vertrauen und dezente Zurückhaltung. Gleichzeitig ergibt diese Kombination noch eine Frische-Assoziation (man denke an die Zahnpasta-Werbung oder andere Hygiene-Werbung) sowie eine Urlaubs-Assoziation (blauer Himmel oder Meer.
  • Für Fortgeschrittene gibt es dieses Template auch in der Responsive-Version hier:
  • HP56/Document Responsive

Homepage Vorlage , templates , Homepage-Vorlagen,  free download


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
37 START-UP!



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.
  • Google-Webfonts: Schrift 'EB-Garamond' und 'Quicksand'.
  • 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

  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • CSS-Animation: Perspektivisches Wenden - startet automatisch - ( auf Fotos im Text)
  • CSS-Animation: Einblenden-Effekt + Textüberlagerung 1 (bei Mouseover auf den Fotos)
  • CSS-Animation: Gummiband-Effekt (bei Mouseover auf dem Homepage-Namen)
  • CSS-Animation: Scale-Vergrößern-Effekt (bei Mouseover auf einigen runden Fotos)
  • CSS-Animation: Slide-Right-Effekt + Farbänderung Font-Icon (bei Mouseover auf den Listen im Text)
  • CSS-Animation: Drehen, schnell (bei Mousover auf Icons )
  • CSS-Animation: Drehen, langsam (bei Mousover auf einigen runden Fotos )
  • CSS-Animation: Drehen + Verkleinern (bei Mousover auf Icons )
  • CSS-Animation: Wählscheibe-Effekt (bei Mousover auf Lupe-Icon und Schraubenschlüssel-Icon )
1= Einblenden/Textüberlagerung: Es wird ein Textfeld über das Foto eingeblendet (für ergänzende Infos zum Foto) sowie auch ein Lupen-Symbol (für eine grössere Foto-Ansicht bei Klick). Das Lupen-Icon ist auch animiert. Bei "mouseout" (Verlassen des Bereiches mit der Maus) wird das Textfeld (mit Text und Font-Icon "Lupe") dann ausgeblendet und das Bild dafür wieder eingeblendet.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
38 Wunderschöne Natur



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

Besonderheiten

  • Perspektivisch schräg gestellte Buttons beim Menü sowie auch bei einigen Fotos und Texte. Mit CSS-transform:skewY.
  • CSS-Animation: Drehen.Bei Bei Mausberührung des Links dreht sich das vorangestellte Icon.
  • CSS-Animation: Slide-Right. Bei Mausberührung des Links verschiebt sich das vorangestellte Icon.
  • Strukturierte Abschnitte ( mit CSS-Strukturpseudoklassen ) .


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





Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , responsive templates , Homepage-Vorlagen,  free download
Responsive Homepage Vorlage , templates , Homepagevorlagen,  free download





+ ONE-PAGER
+ CSS-Chakra-Animation
+ Full-Screen-Only-Site
+ Sternen-Animation
+ CSS-Box-Fenster

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.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

  • CSS-Chakra-Animation: 1 Verschiedene farbige Objekte drehen mit unterschiedlicher Geschwindigkeit, hier symbolisch stehend für die Chakren-Theorie 2 .
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button
  • Jquery-Particles-Animation: Sternenhimmel

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. Anbei bieten wir aber noch eine Alternative an: Hierbei werden 7 Quadrate verwendet, wobei auf die Halbtransparenz verzichtet wird um volle Deckung der Farben zu ermöglichen.

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.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
40 IN THE OFFICE



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

  • Auf jeder Seite ein anderes Foto - Das schafft Struktur und macht jeden Link sozusagen unverwechselbar .
  • Menü zeigt schliessende + öffnende Ordner-Icons - passend zum Thema 'Office' .
  • H2-Überschrift zeigt oberhalb ein Büroklammer-Icon plus Linie1 - passend zum Thema 'Office' .

1= Überschrift mit Font-Icon plus Linie links + rechts davon:
Oberhalb jeder H2-Überschrift sehen sie eine Linie mit einem Font-Icon, hier eine Büroklammer. Dies wurde angelegt mit dem CSS-Pseudoelement ':after bzw. :before' .

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