57 Profundis Vida Opus


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

  • Abgewinkelte Buttons: Schrägstellung der Buttons mit CSS transform:skew. Da die Schrift aber auf dem Ojekt damit auch schräg gestellt wird, geben wir der Schrift eine Schrägstellung in die andere Richtung. Ergebnis: Die Schrift wird gerade angezeigt.
  • 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 nacheinander mit kurzer Verzögerung eingeblendet ( bei mobilen Auflösungen ).
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
58 Standing On The Shore


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

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Big Icons - Großes Telefon und Handy-Symbol direkt oben an prominenter Position
  • Gedeckte Farben 1: Farbtöne in Blau, Beige und Erdfarben, stehend für Wasser, Sand und Strand.

1= Gedeckte Farben | Solche dezenten Farben, oft mit einem Grauton-Anteil, wirken edel, stylish und beruhigend, denn sie sind "nicht schreiend", springen dem Besucher also nicht direkt an. Es geht also um eine spannende, aber dezente Zurückhaltung.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
59 ON THE SUNNY SIDE OF LIFE


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'.
  • 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-Bildwechsler. Tauscht 10 Fotos.
  • Abgewinkelte Buttons ( Schräge Kanten )1 Mit CSS-transform:skew.
  • Strukturierte Abschnitte 2 CSS-Struktur-Pseudoklassen. Tutorial anbei.

1= Abgewinkelte Buttons | Wir haben hier eine Schrägstellung der Buttons um 15 Grad. Da die Schrift aber auf dem Ojekt damit auch schräg gestellt wird, geben wir der Schrift eine Schrägstellung von 15 Grad in die andere Richtung, mit dem Ergebnis das die Schrift jetzt gerade angezeigt wird.

2= Strukturierte Abschnitte | Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
60 Another Kind Of View
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Transparenz-Objekte
+ 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 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-Transparenz: Transparente Bilderrahmen und Buttons.
  • CSS-Grafische-Hintergründe. Zum Beispiel Sterne oder Streifen
  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: 2
  • CSS-Box-Fenster: Inhaltsfenster per div-Box öffnen sich per Klick auf der selben Seite ganz ohne Javascript.

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= 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,--
61 Metropolis City
+ ONE-PAGER
+ Jquery-Slideshow
+ 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: '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ü bei mobilen Auflösungen zunächst zu verstecken.

Besonderheiten

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Animation: Im Kopfbereich ist auf Foto und Homepagename eine entgegengesetzte Skalierung gelegt, welche einen Fade-In / Fade-Out Effekt bewirkt.
  • Jquery-Bildwechsler, responsive: 2 x im Inhaltsbereich, unterschiedlich variert.
  • CSS-Action-Buttons ( Start/Kontakt ) : 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 Smooth Scroll To Sections: 3

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

3= 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,--
62 Travel To Distant Lands


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'.
  • 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. In der Regel wird das Menü auf mobilen Geräten hierbei zunächst versteckt.

Besonderheiten

  • Fest positionierter Menü-Button ( bei moblilen Auflösungen ) : Somit auch beim Scrollen immer im Display sichtbar und das Menü ist deshalb jederzeit sofort erreichbar.
  • Grafisches Logo vs. Text-Schriftzug: Als Homepagenamen haben wir hier mal eine Grafik gewählt, für alle diejenigen, welche ein eigenes Logo einsetzen möchten. Alternativ erklären wir Ihnen aber, wie Sie stattdessen noch sehr viel einfacher einen Text-Schriftzug per HTML anstelle des Grafik-Logos einbauen.
  • CSS-Bildwechsler plus Anleitung für CSS-Bildwechsler: Demos und Erklärung anbei für 3, 4, 5 oder mehr Fotos in der Slideshow. Zur Info: Sie erhalten hier in diesem Template ein Tutorial für unseren CSS-Bildwechsler, welcher Sie schulen soll, eine beliebige Anzahl von Fotos innerhalb der Slideshow zu verwenden.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
63 Kirchengemeinde
Sankt Petri in Ville Gabriel


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

  • Spirituelle Farbe Violett steht als Kirchenfarbe für Stille und Besinnung, Umkehr und Buße sowie die Fastenzeiten im Advent und vor Ostern und am Buß- und Bettag. Auch einer stetigen Ausrichtung auf Gott soll damit ein Anreiz gesetzt werden.
  • Kirchliches Mauerwerk, hier hell (= Offenheit, Erleuchtung) symbolisiert den Schutz der Kirche für alle Schutzbedürftigen. Als Metapher soll es auf den Abbau von inneren und äußeren Mauern - persönlich sowie gesellschaftlich - hinweisen.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
64 White Swans On Blue Water


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

  • Spezieller Italic-Schriftschnitt: 1.
  • Icons-Premium-Menü:2

1= Fonts/Spezielle Schriftschnitte | Bei einem Italic-Schnitt hat der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt. Wenn aber dieser Italic-Schnitt nicht vorhanden ist, was ja die Regel ist (sondern eben nur der reguläre Schnitt), stellt der Browser auch bei der css-Anweisung 'font-style: italic' die Schrift einfach nur programmatisch schräg. Schauen Sie sich hier einmal die wunderschönen geschwungenen Linien bei der Schrift 'Old Standard' an, dann wird der Unterschied vielleicht deutlicher und was wir damit meinen.

2= Icons-Menü | Mit Premium Buttons: Denn der Button hat zwei Teile, welche jeweils unterschiedlich formatiert werden können, nämlich das Icon sowie den eigentlichen Link. Vergleichen Sie hier den Ausgangs-Button, den Button bei Mausberührung sowie den Button für die aktuell angezeigte Seite. Außerdem sind die Icons bei jedem Button unterschiedlich, wählen Sie gerne andere Icons.

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