Homepagevorlagen - Templates

Webseiten 17-24

17 ESCAPE PLUS ZERO
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections



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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: 2
  • CSS-Animation: Lightbox-Erweiterung: 3 Halbtransparente Felder plus Text aus verschiedenen Richtungen kommend.
  • CSS-Animation: Fade-In + Delay.
    Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.

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= Lightbox-Erweiterung | Wir haben die Lightbox optimiert, indem wir eine CSS-Animation hinzugefügt haben. Bei der Gallery (Quartus) 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,--
 
 
18 Motorized Vehicles & Technology


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: 'ROBOTO LIGHT' und 'BUNGEE'.
  • 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.
  • Jquery Smooth Scroll. Annimiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • Quick Gallery To Go. Kleine pragmatische Bilder-Gallerie (per Jquery Lightbox) im Fussbereich jeder Seite mit im Beispiel unterschiedlicher Anzahl von Bildern auf den jeweiligen HTML-Seiten. 'To Go' bedeutet hier: Am Seitenende ankommend nimmt man die Bild-Eindrücke schnell nochmal im Vorbeigehen gerne mit.
  • Transparente Objekte: Menü & transparentes Homepagenamenfeld sowie Fussbereich.
  • Ribbon-Style: Auf einigen Objekten liegt eine dekorative Schleife/Band, teils auch transparent.
  • Pricing-Table. Zwei versch. formatierte sog. Preis-Tabellen, welche nat. auch ohne Preisangabe, nämlich als Produktvergleich dienen können.
  • Wechselnde Logo-Fotos im Kopf- und Fussbereich : Auf jeder der einzelnen HTML-Seiten gibt es ein anderes Foto. Das schafft Struktur und macht jeden Link einzigartig und vertraut.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
19 Meine Firma im Web


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

  • Das Logo: 1 Nehmen Sie Ihr eigenes grafisches Logo oder nutzen Sie die Font-Icon für ein Logo.
  • 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 bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.

1= Das Logo | In der Box, welche jetzt das Icon mit dem Schlüssel enthält, ist Platz für Ihr eigenes Logo. Sie können aber auch wie im Beipiel ein Icon benutzen, die Icon-Font 'Font Awesome' ist ja bereits installiert. So haben wir auf den Unterseiten mal verschiedene Icons als Beispiel eingebaut. Somit könnten Sie es leicht für ihre Firma anpassen, im Beispiel also Schlüsseldienst (Sicherheitstechnik), Handwerker, Elektronik (TV, Computer), Fotograf, Gastronomie, Friseur , Medizin (Ambulanz, Pharmazie).

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
20 CORONA Covid-19


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





SONDER-HINWEIS | Für dieses CORONA-Template gilt:
  • Komplett kostenlos für Ärzte, Krankenhausmitarbeiter, Pfleger, Altenpfleger sowie generell für alle medizinischen Berufe. (Bitte in diesem Fall trotzdem bestellen mit entsprechendem Hinweis).
  • Für öffentliche Schulen und freiwillige Feuerwehren sind unsere Templates ja sowieso kostenfrei.
  • Preis aus Solidaritätsgründen in diesen emotionalen Zeiten für alle Anderen bei
    kommerzieller Nutzung nur 29,- (statt 39,-)
  • Der Inhalt des Templates ist frei wählbar und muß nicht zwingend mit dem Thema 'Corona' zu tun haben.

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: 'ROBOTO LIGHT' und 'BUNGEE'.
  • 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.
  • 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.
  • Jquery Smooth Scroll. Animiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • Jquery - responsive Schieberegler (Slick) - im Inhaltsbereich.
  • CSS Boxfenster. Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet plus den Hintergrund der Webseite abdunkelt.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
21 CAKES & COFFEE
JQUERY
3 x Foto-Show
+ ( Fotorama )
+ ( Lightbox )
+ ( Elastislide )



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

  • Jquery: 3 verschiedene Foto-Shows.1
  • CSS-Animation: Fade-In + Delay.
    Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.
  • Links beim Menü mit einem vorangestellten Icon 2 Hier ist es ein Kaffeetasse-Icon ( veränderbar )
  • 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: Hover: Vergrösserung ( Scale ) bzw. Wenden ( RotateY ) bei den Icons.

1= 3 x verschiedene Foto-Shows |
1.)   Jquery: Foto-Slideshow 1 (Fotorama) - Startet automatisch. Variabel. Auf jeder Seite mit untersch. Bild-Anzahl.
2.)   Jquery: Foto-Show 2 (Lightbox-Foto-Gallery) - Startet auf Bild-Klick.
3.)   Jquery: Foto-Slideshow 3 (Elastislide) - Zeigt je nach Auflösung eine versch. Anzahl von Bilder in einem Schuber, welcher durch Pfeil-Klick die Bilder nach links verschiebt und somit weitere Bilder anzeigt um dann auf Ihren Bild-Klick das gewünschte Bild öffnet.

2= Objekt voran oder nach gestellt | Mit Pseudoelement 'before' bzw. 'after'. Vorteil: Die Angabe in der CSS-Datei hat Wirkung auf sämtliche HTML-Seiten. Somit könnnen Sie wie in diesem Fall das Kaffeetassen-Icon blitzschnell durch ein anderes Icon austauschen.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
22 RESPONSIVE BEGINNERS - Für Responsive Anfänger
+ RESPONSIVE ANFÄNGER
+ Reduzierter Code
+ Leichteres Verständnis



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.

Besonderheiten

  • Dieses Template ist für Responsive Anfänger.
  • Auf das Wesentliche reduziert1. Der Quellcode ist damit kurz und knapp, übersichtlich und leichter.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Thematisch passend finden Sie hier: HP 88 |Responsive ONEPAGER Beginners unsere ONEPAGER-Vorlage für Responsive Anfänger

1= Reduzierung auf das Wesentliche | Es gibt in dieser Vorlage keine Font-Icons, keine Animationen, keine Google Webfonts, kein Grid-System für die Anordnung von Spalten oder horizontalen Bildreihen. Es wurde außerdem verzichtet auf ein Toggle-Menü und ein Aufklapp-Menü. Weggelassen haben wir auch Transparenzen per CSS oder per PNG-Grafiken sowie auch Farbverläufe per CSS. Auch nicht zum Einsatz kamen hier unterschiedlich formatierte Abschnitte im Inhaltsbereich. Schatten-Effekte auf Boxen oder Texte per CSS wurden hier ebenfalls nicht angewendet. Auch die Lightbox Fotogalerie oder einen Bildwechsler werden Sie hier gerne vermissen. Somit mag die Konzentrierung auf die Responsive-Technik sehr viel angenehmer und hoffentlich leichter zu verstehen sein, das ist bei diesem Template unser Ziel allein.

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


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'.
  • Jquery Smooth Scroll. Animiertes Scrollen bei allen internen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • CSS Background: Wirkt grafisch und schafft hier als heller Holz-Hintergrund in Verbindung mit halbtransparentem Rahmen eine skandinavische Wohlfühl-Atmospäre ( lesend im gemütlichem Holzhaus )
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
24 TRENDSETTER COMPANY


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

  • CSS Geometrische Form: CSS-KREIS, immer horizontal und vertikal mittig platziert.
  • CSS Umwandlung von Kreis in Halbkreis ( Bei kleinen Auflösungen wird aus dem Kreis ein Halbkreis, um Platz zu sparen ) .
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--