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 Unicorn Horus Startup


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

Besonderheiten

  • CSS Farbverlauf von Dunkelblau nach Violett. Bekannt sind diese bunten, vitalen und atmosphärisch sehr dichten Farbverläufe vom mobilen Betriebssystem ANDROID, längst wird es auch - um trendy zu sein - auf normalen Webseiten eingesetzt.
  • Auf jeder Seite andere Fotos im Kopfbereich, per CSS wird ein Filter erstellt 1 welcher die Fotos mit dem Farbverlauf-Hintergrund verschmelzen läßt, also gfls. auch bei Ihren Fotos.

1= Filter, Einarbeitung der Fotos in den Hintergrund |
Es ist ein linearer Farbverlauf mit CSS-rgba-Transparenz und damit sowohl in Farbe als auch Transparenz-Dichte veränderbar, wie folgt:
background:linear-gradient(to right,#5349A4,rgba(0,0,0,.3),#A0277B)

    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





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

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 24,--
 
21 Blue Diamond
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Benötigt kein Menü
+ 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-Galerie
  • Schrift: 'Open Sans Condensed'.

Besonderheiten

  • Ganz ohne Menü: Minimalistisch im Flat-Design-Sinn und dank One-Pager-Konstruktion möglich.
  • CSS Einfärbung von Fotos: Hier in Blau, dank CSS-rgba-Wert aber in jeder Farbe/Transparenzstärke möglich.
  • CSS Rautenförmige Icons: Es sind Quadrate, welche um 45 Grad gedreht werden (CSS transform:rotate), entscheidend aber ist, das der Inhalt nicht auch mit dreht und daher einen Wert von minus 45 Grad erhält.
  • One-Pager: Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Box-Fenster: Inhaltsfenster öffnen sich per Klick als div-Box innerhalb der selben Seite - Eben ganz ohne Javascript (Jquery) und damit immer funktionabel, also auch wenn Javascript vom Besucher der Seite in seinem Browser deaktiviert wurde.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
22 ALL OVER THE WORLD



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

Besonderheiten

  • 3 dekorative Fotos im Kopfbereich, bei mobilen Auflösungen lassen wir nur das mittlere Foto erscheinen und blenden die beiden anderen aus.
  • Abgerundete Fotos im ganzen Template.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
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 Chess - The Game Of Kings
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Benötigt kein Menü
+ Box-Fenster



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-Galerie
  • Schrift: 'Open Sans Condensed'.

Besonderheiten

  • Ganz ohne Menü: Macht es luftiger und ist dank One-Pager-Konstruktion möglich.
  • One-Pager: Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: Sanftes Scrollen = Animiertes Angleiten einzelner Abschnitte.
  • CSS-Box-Fenster: Inhaltsfenster öffnen sich per Klick als div-Box innerhalb der selben Seite - Eben ganz ohne Javascript (Jquery) und damit immer funktionabel, also auch wenn Javascript vom Besucher der Seite in seinem Browser deaktiviert wurde.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--