Homepage Vorlagen ( Templates ) zum Download

Webseiten 33 - 40  ( frei für privat, kostenpflichtig für kommerziell )


HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz



 33 I LIKE YOU Bestellen Downloaden Anschauen



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 ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Responsive Full Screen Image.
  • Transparenz per CSS-rgba (Farbe und untersch. Deckkraft somit schnell änderbar).
  • Mit Toggle-Menü. ( Bei mobilen Geräten erscheint platzsparendes Menü (Menü-Button An/Aus)
  • 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 Dünengras Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download    Homepage Vorlage, templates , Homepage-Vorlagen,  free download

Besonderheiten

Milchglas-Effekt. Transparenz-Layout. Auch Ihr Foto legt sich hinter die transparente Konstruktion.

Technik

Flexibles Layout.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 35 UP TO THE TOP Bestellen Downloaden Anschauen





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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
ONE-PAGER Alle Inhalte innerhalb einer HTML-Seite. + Smooth-Scrolling-To-Sections
+ Box-Fenster

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
One-Pager.
Jquery Smooth Scroll To Sections
Jquery Smooth Scroll To Top
  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Viele Box-Fenster: 5 Inhaltsfenster per div-Box öffnen sich per Klick auf der selben Seite.
  • Fixierte Menü-Leiste Menü scrollt als nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: 2
  • Jquery Smooth Scroll To Top: 3
  • CSS-Animation: Box-Slider: 4 Halbtransparente Felder plus Text aus verschiedenen Richtungen kommend.
  • Toggle-Schalter. 5 Button-Schalter: An/Aus (Öffnen/Schließen).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts: Extra breite Schrift 'Bungee', zu sehen beim Homepagenamen, bereits installiert.
  • Google-Webfonts: Schrift 'Open Sans' bereits installiert. Der Schriftschnitt 'Light' bei diesem Font ist zarter, weniger fett und hat damit eine vielfach elegantere Wirkung als Arial, Verdana & Co..

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= Smooth Scroll To Top:
Bei Bedarf scrollen Sie hier von jedem Abschnitt bzw. jedem beliebigen Puntk der Webseite wieder sanft animiert nach oben zum Menü zurück.

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

5= Toggle Schalter bei Menü und Box-Fenstern:
Eine Javascript-freie Lösung, welche insbesondere auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht. Hier öffnen und schließen sich das Haupt-Menü (bei mobilen Geräten) sowie viele Info-Fenster als div-Box innerhalb der selben Seite.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 36 Document Bestellen Downloaden Anschauen
Homepage Vorlage , templates , Homepage-Vorlagen,  free download

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

Technik

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!
Bestellen Downloaden Anschauen



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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]


Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Menü-Button An/Aus)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • 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 Bestellen Downloaden Anschauen



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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Webseiten-Konstruktion ohne Javascript.
Lightbox-Foto-Gallerie mit Javascript (Jquery).
  • Perspektivisch schräg gestellte Buttons beim Menü sowie auch bei einigen Fotos und Texte. Mit CSS-transform:skewY.
  • Foto-Gallerie über komplette Breite der Seite, also ganz ohne Rand. 1 (Lightbox-Foto-Gallery).
  • 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 ) .
  • Mit Toggle-Menü 2 - Menü-Button-Schalter: An/Aus.
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü wird sanft eingeblendet.

1= Lightbox Gallery -bis an den Rand der Seite:
Die Foto-Gallerie macht hier mächtig Eindruck, denn im Gegensatz zum Rest der Seite, geht diese Gallerie bis an den Rand der Seite.
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Übrigens erscheint bei Mausberührung auch ein Pfeil nach links um die Fotos wieder in anderer Richtung zu betrachten.

2= Toggle Menü:
Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 39 DRIVE MY CAR ! Bestellen Downloaden Anschauen



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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Komplette Webseite ohne Javascript.
  • Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (Menü-Button An/Aus)
  • Transparenz (mit CSS-rgba)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Font-Icons (Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar).
  • Pseudoelement ":first-letter". Erster Buchstabe anders formatiert.
  • Pseudoelement ":after" und ":before". Angewandt bei Listen-Font-Icons.
  • Animation FAHREN, kleines Auto fährt
  • Animation SCALE, vergrössern
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation GUMMIBAND
  • Animation EINBLENDEN + TEXTÜBERLAGERUNG
  • Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene |startet automatisch
  • Animation PERSPEKTIVISCHES WENDEN auf X-Ebene |startet automatisch
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN
  • Animation WAEHLSCHEIBE
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 40 IN THE OFFICE Bestellen Downloaden Anschauen



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 SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

Besonderheiten

So macht Surfen auch auf mobilen Geräten Spaß! (Dank Responsive Webdesign)
Responsive Webdesign = Anpassung/Optimierung der extrem unterschiedlichen Bildschirmgrößen (nur per CSS) von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite.

Technik

Mobile-First-Technik.
Webseiten-Konstruktion ohne Javascript.
  • 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' .
  • Mit Toggle-Menü 2 - Menü-Button-Schalter: An/Aus.
  • Transparenz.3 Transparenter Farbfilter mit CSS-rgba.
    ( Ermöglicht, das die Schrift auf jedem Hintergrundfoto gut zu lesen ist ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'ROBOTO LIGHT' und 'OPEN SANS LIGHT' bereits installiert ).
  • CSS-Animation: Toggle-Menü gleitet sanft von OBEN nach UNTEN hinein

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' .
Dieses Font-Icon können Sie auch durch ein beliebig anderes Font-Icon ersetzen, denn die Font-Icon-Schrift 'Font Awesome' ist ja bereits installiert. Dies geschieht alleine über die CSS-Datei format.css und die Änderungen dort gelten dann automatisch für alle HTML-Seiten.

2= Toggle Menü:
Eine Javascript-freie Lösung, welche auf mobilen Geräten ein Menü ermöglicht, welches sich per Schalter ein-und ausschalten läßt. Hier wurde das Toggle-Menü für alles Auflösungen und damit für ein spannendes Design eingesetzt.

3= Transparenz/Farbfilter:
Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9.
Ein Beispiel für die Deckungskraft von 70% ist der Wert 0.7, d.h. das ein Objekt zu 30% transparent ist.
Ein Beispiel für die Deckungskraft von 20% ist der Wert 0.2, d.h. das ein Objekt zu 80% transparent ist.

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