Homepage Vorlagen - Templates

Webseiten 65-72

65 My Favorite Workplace


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 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-Animation: Leuchtstoffröhren-Effekt: Kurzes Aufflackern bei Mausberührung.
  • CSS-Animation: Aufblätter-Effekt: Die Links werden nacheinander mit kleiner Verzögerung eingeblendet.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
66 Launcher COUNTDOWN


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
  • 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-Animation: Countdown-Zähler.
    Zählt in Tagen, Monaten, Stunden und Sekunden herunter. Das End-Datum, an welchem der Zähler die Null erreicht kann jederzeit neu eingestellt werden. Stellen Sie ganz leicht im Kopf-Bereich der HTML-Seite ein, bei: new Date("December 31, 2022, 00:00:00")
  • CSS-Animation: Fade-In: Fenster blendet sich als CSS-Box horizontal und vertikal zentriert hinein.
  • Neues oder -Under-Construction-Template 1. Wenn Ihre Seite im Aufbau, Umbau oder Neu am Start ist.

1= Webseite im Aufbau / Umbau oder NEU am Start | Die Zeit von diesbezüglichen Baustellen-Bildern ist schon lange vorbei. Der erste Eindruck ist entscheidend. Und für den ersten Eindruck gibt es keine zweite Chance. Dieses Template verbindet einen Countdown-Timer mit einem Kontakt-Fenster, welches sich innerhalb der Seite nur per CSS öffnet und zwar per CSS-Einblend-Animation.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 24,--   | Wer es zusammen mit einem anderen Template bestellt nur 10,--
 
67 At The Beach -
Am Strand von Summerland
+ ONE-PAGER
+ CSS-Beach-Animation
+ Full-Screen-Only-Site
+ CSS-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-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ü zunächst zu verstecken.

Besonderheiten

  • CSS-Beach-Animation. 1 Hund, Ball und Schwimmer sind hier am Strand animiert.
  • One-Pager:2 Alle Inhalte innerhalb einer HTML-Seite.
  • Full-Screen-Only-Site. 3
  • CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.

1 = Beach-CSS-Animation | Strand-Animation per CSS-Keyframes mit Font-Icons: Die Animation beginnn mit einer Verzögerung (delay) von 12 Sekunden für den Schwimmer und 14 Sekunden für den Hund sowie den Ball. Diese Werte sind genauso veränderbar, wie die Anzahl der Durchläufe für die versch. genannten Objekte, welche wir auf eine Anzahl von unter 10 begrenzt haben. Gerne ändern Sie z.B.die Werte mit weitaus mehr oder weitaus weniger Durchläufen oder Sie setzen für einen unendlichen Durchlauf das Schlüsselwort 'infinite'. Übrigens landet der Hund nach dem 'in die Höhe springen' auf ganz realistischer Weise erst auf den Vorderpfoten und danach auf den Hinterpfoten.

2= 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 mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden.

3 = Full-Screen-Only-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
68 Favourite Location Tour Guide


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

Besonderheiten

  • Transparenz-Menü.
  • CSS-Animation bei den Font-Icons1
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.

1= Font-Icon-Animation | Im Kopfbereich sehen Sie verschieden formatierte und animierte Icons-Fonts, wie die Social-Media Icons, das Kompass-Icon, welches per automatisch startender Animation abwechselnd links und rechts herum dreht oder die 'Location-Arrows-Icons' beim Menü.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
69 A Day in Venice


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 animiertes 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-Aufklapp-Menü.
  • CSS-Animation: Shiny-Effekt beim Fussnamen ( startet automatisch ).
  • Auf jeder Seite andere Fotos im Kopf-und Fussbereich, welche beim Scrollen ausgeblendet werden.
  • Ausblenden von FOTO zu FARBE: Beim Scrollen blendet das Foto, welches einen Übergang vom Kopf-Bereich zum Inhaltsbereich bildet, allmählich halbkreisförmig in eine Farbe aus und verschwindet damit sanft.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
70 FINE PIZZA & FRESH BAGUETTE
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Box-Fenster
+ Section-Number



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: 'Old Standard' und 'Open Sans Light'.
  • Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein animiertes 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

  • Section-Number: 1 Jeder Abschnitt (Section) erhält bei mobilen Auflösungen eine Orientierungsnummer.
  • Weiße Schrift auf 'Pizzateig in Farbe Beige' 2 Wie funktioniert das beim Namen trotz der ähnlichen Farben?
  • Fixierte Menü-Leiste bei allen Auflösungen. Menü scrollt also nicht mit, sondern ist fest positioniert und damit immer sichtbar.
  • One-Pager: 3 Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: 4
  • 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.

1= Section Number | Die bei jedem Abschnitt sichtbare Ziffer oben links ist eine wichtige Orientierungshilfe gerade bei mobilen Auflösungen. Da die Links im Menü ebenfalls eine Ziffer vorangestellt haben, erkennt man sofort welchen Abschnitt man nach Klick angleitet (Smooth-Scroll). Hinweis: Bei größeren Auflösungen haben wir diese Ziffer über die CSS-Media-Queries ausgeblendet (display:none}

2= Ähnliche Farben beim Namen und dem dahinterliegenden Foto | Hier Weiß (Schrift) auf Beige (Pizza-Teig): Wir haben zwei Maßnahmen per CSS ergriffen, je nach Farben des Hintergrundfotos können Sie die entsprechenden Werte ändern:
- Maßnahme 1: Textschatten auf dem Namen mit 'CSS-text-shadow'.
- Maßnahme 2: Farbdimmmer mit 'CSS-background:rgba' auf einem zusätzliches Element zwischen Namen und Foto.
Hinweis dazu: Beim 'CSS-rgba-Wert' können Sie Transparenz-Farbe und Deckungsgrad individuell einstellen. Der Wert setzt sich zusammen aus dem RGB-Farbwert (die ersten drei Stellen) sowie der Deckkraft (die vierte Stelle).
Einige Beispiele wie folgt, hier auf 'CSS-background' gesetzt:
   - background:rgba(0,0,0,0.4) = Farbe Schwarz, Transparenz 60%.
   - background:rgba(255,255,255,0.7) = Farbe Weiß, Transparenz 30%.
   - background:rgba(255,0,0,0.5) = Farbe Rot, Transparenz 50%.
Mit Werten von 0.1 bis 0.9 (wobei gilt: 0=volltransparent und 1= gar keine Transparenz), stellen Sie also mit der vierten Stelle die Deckkraft ein.

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

4= 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 39,--
 
71 Astronaut To Ground Control
+ ONE-PAGER
+ CSS-ANIMATION:
" KREISEN AUF RUNDEN HAARLINIEN "
+ Full-Screen-Only-Site
+ CSS-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-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ü zunächst zu verstecken.

Besonderheiten

  • One-Pager:1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Weltraum-Animation: 2 Unterschiedliche Objekte kreisen auf RUNDEN HAARLINIEN in diversen Richtungen und Geschwindigkeiten.
  • Full-Screen-Only-Site. 3
  • CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.

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 mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden.

2 = CSS-Animation KREISEN AUF RUNDEN HAARLINIEN | Objekte (Font-Icons) kreisen mit versch. Geschwindigkeiten und Richtungen um einen Mittelpunkt - und zwar spektakulär, weil nicht irgendwo im freien Raum, sondern exakt dünnen kreisförmigen Haarlinien folgend.

  1. Äußerer Kreis: Ein Rakete-Icon.
  2. Mittlerer Kreis: Ein Satellit-Icon.
  3. Innerer Kreis: 8 x Icons, aufgeteilt wie folgt:
    1. ) Vier Stück Social Media Icons = verlinkt zum jeweiligen Social-Media-Anbieter.
    2. ) Vier Stück diverse Icons = öffnen Boxfenster innerhalb der eigenen Seite.

Diese CSS-Animaton ist ganz ohne Grafiken erstellt. Noch eine Besonderheit: Die 8 Font-Icons des inneren Rings bleiben beim Kreisen immer in waagerechter Position. Das ist nicht selbstverständlich, denn bei einem einfachen Kreisen per CSS-Animation um einen Mittelpunkt herum würde ja das oberste Icon, wenn es sich an unterer Position befindet, auf dem Kopf stehen.
Unsere Lösung dafür ist es, alle 8 Icons mit gleicher Geschwindigkeit per Block rechts herum und jedes einzelne Icon mit einer zweiten Animation links herum drehen zu lassen.
Man kann es also physikalisch vergleichen mit einem Riesenrad, welches ja auch technisch dafür sorgt, das die einzelnen Gondeln mitsamt der Menschen darin trotz des Kreisens niemals Kopf stehen müssen.

3 = Full-Screen-Only-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
72 Some Nice Places
+ ONE-PAGER
+ Jquery-Fullscreen-Slideshow
+ Full-Screen-Site
+ 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. Hier ist das Menü bei allen Auflösungen immmer sichtbar und verschwindet bei Klick auf den Schalter - und als Besonderheit wird nicht nur das Menü, sondern gleich die gesamte Mittel-Leiste ( Homepagename, Menü und Fuss-Menü ) nach oben hinaus geschoben.

Besonderheiten

  • Jquery: Slideshow ( Automatischer Bildwechsler ). Inklusive alternativer Steuerung per Pfeile, welche auch ein manuelles Durschalten der Fotos ermöglichen.
  • Full-Screen-Site. 1
  • Full-Screen-Slideshow. Mit nur einem Klick! Wir haben folgenden CSS-Schalter als Besonderheit hinzugefügt: Klicken Sie das 'Schließen-Icon', so verschwindet die Mittel-Leiste komplett (also mitsamt Name, Menü und Fuss-Links) und wird animiert nach oben hinausgeschoben und Sie haben somit volle Sicht auf die Slideshow. Ein erneuter Klick blendet die Leiste wieder ein.
  • One-Pager:2 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.

1 = Full-Screen-Site | Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.

2= 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 mittels nur einzigen HTML-Seite die verschiedenen Links als div-Boxfenster innerhalb der selben Seite aufgerufen werden.

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