Homepage-Vorlagen ( Templates ) zum Download

Webseiten 137 - 144  ( frei für privat, kostenpflichtig für kommerziell )

Wie dürfen diese Templates eingesetzt werden?

Bitte lesen Sie vor dem Download einer Homepagevorlage unbedingt unsere Nutzungsbedingungen.
Diese Homepage-Vorlagen können für den privaten Gebrauch umsonst heruntergeladen, und angepasst werden. Das Anbieten der Templates auf anderen Webseiten, der Weiterverkauf sowie auch die Verwendung als direkter Download ist nicht gestattet. Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.

Eine kommerzielle Nutzung ist erlaubt. Die kommerzielle Nutzung ist jedoch nur gegen Bezahlung gestattet. Für kommerziell gilt: Die Preise finden sie immer direkt neben dem Vorschaubild - als letzte Zeile vom Beschreibungstext.

Auch wenn Sie die Vorlagen anpassen, bleibt das Copyright für das Design beim Autor der Vorlagen. Für Ihren eingefügten Inhalt, sei es Text, spezielle Grafiken o.a., haben Sie dann selbstverständlich Ihr Copyright.



HomeVorlagen(c) NutzungKontakt
ImpressumBestellungWiderrufDatenschutz




 137 My little Company 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.
Jquery: Lightbox-Foto-Gallerie
Jquery: Smooth-Scroll-To-Top
  • Big Icon: Jede Seite erhält ein eigenes Icon als Seitentitel
  • Jquery: Smooth-Scrolling-To-Top.1
  • Jquery: 'Lightbox Picture Gallery'.2 ( Die beliebte Foto-Gallerie-Schau ).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • Google-Webfonts ( Schrift 'Open Sans' bereits installiert ). Schriftschnitt:Light.
  • CSS-Animation: Hineinschieben des Menüs von links nach rechts in die Seite hinein (bei mobilen Geräten)

1= Smooth-Scrolling-To-Top:
Wenn man ein wenig scrollt, blendet sich ein kleiner Button (mit Pfeil-nach-oben) ein. Ein Klick oder Touch auf diesen Button fährt die Seite sanft scrollend nach oben an den Anfang der Seite. Es ist also kein plötzlicher Sprung sondern ein animiertes Hinaufgleiten.

2= Lightbox Picture Gallery: So funktioniert diese Foto-Schau:
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl 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

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
 138 RESPONSIVE ONEPAGER BEGINNERS 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 ]
Template für
Onepager & Responsive ANFÄNGER + Reduzierter Code
+ Leichteres Verständnis

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.
Jquery: Smooth-Scroll
  • Dieses Template ist für Responsive Anfänger + für ONEPAGER Anfänger.
  • Auf das Wesentliche reduziert1. Der Quellcode ist damit kurz und knapp, übersichtlich und leichter.

1= Reduzierung auf das Wesentliche:
Es gibt in dieser Vorlage keine Font-Icons, keine Google Webfonts, kein Grid-System für die Anordnung von Spalten oder horizontalen Bildreihen sowie keine Animationen (außer Smooth-Scroll). Es wurde außerdem verzichtet auf ein Toggle-Menü und ein Aufklapp-Menü. Weggelassen haben wir auch Transparenzen per CSS sowie auch Farbverläufe per CSS. Somit mag die Konzentrierung auf die Responsive-Technik sehr viel angenehmer und hoffentlich leichter zu verstehen sein. Denn dies ist bei dieser Vorlage unser primäres Ziel.
Plus Onepager Reduzierung: Verzicht: Wir haben hier keine sich per Klick öffnenden Box-Fenster (div-box) eingebaut, welche sich sonst oftmals bei Onepagern innerhalb der selben Seite öffnen.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
 139 Die Welt ist bunt Bestellen Downloaden Anschauen






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





[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]
+ Farbleitsystem
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Längere Linkwörter
+ 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
  • Farbleitsystem: Jeder Link im Hauptmenü führt zu einer entsprechenden Farbe im dazugehörigen Abschnitt im Inhaltsbereich.
  • Lange Linkwörter: Platz für längere Links - außerdem geht ein Link zudem über zwei Zeilen.
  • 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,--
 
 140 Pure & Clean - Minimalism Series Bestellen Downloaden Anschauen



Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , responsive templates , Homepage-Vorlagen,  free download
Responsive Homepage Vorlage , templates , Homepagevorlagen,  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.
  • Minimalismus: Hier als Layout-Style, aber es geht auch darum den Grundgedanken des Minimalismus 1 zu erfassen.
  • CSS-Animation ( beim Laden ) : HTML-Seite fällt beim Laden der Seite von oben nach unten herunter. 2
  • CSS-Animation: Schriftzug ( Seitentitel ) schiebt sich in die Seite hinein, nachdem die Lade-Animation abgelaufen ist.
  • Toggle-Schalter. 3 Button-Schalter: An/Aus (Öffnen/Schließen).
  • Font-Icons ( Icon-Schrift bereits installiert, somit Icons tauschbar/erweiterbar ) .
  • 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= Minimalismus:
Minimalismus gibt es von alters her in vielen Bereichen, sei es bezüglich Musik, Kunst, Architektur, aber diese Einstellung gewinnt in heutiger Zeit zunehmend an Bedeutung wenn es insbesondere um einen reflektierten Lebensstil in der modernen Welt geht (Natürliches Leben, Zurück zur Natur, Einkehr, Meditation, Einfachheit, Weniger ist Mehr, Purismus, Kontrast im Wesentlichen).
Klar hat es auch beim Webdesign Einzug gehalten, Flat-Design ist plötzlich in aller Munde. Im Wesentlichen geht es beim Minimalismus um ein Zurücknehmen, eine Reflektion über das Wesentliche und Rückbesinnung zur Natürlichkeit und um eine Haltung wider der allgemeinen Hektik, welcher der Großstadtmensch permanent ausgesetzt ist.

2= CSS-Animation: Website falling down!
Klickt man im Menü einen Link, so wird die angewählte Inhalts-Seite animiert dargestellt, in der Form, das diese beim Laden herunter gleitet. Ein schöner Effekt, da man es in diesem Kontext eher selten sieht.

3= Toggle Schalter beim Menü:
Eine Javascript-freie Lösung, welche insbesondere auf mobilen Geräten eine Funktion per Schalter (an/aus) ermöglicht.

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