Homepagevorlagen - Templates

Webseiten 73-80

73 SONNENUNTERGANG - FLAT DESIGN


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

  • 100 % Flat-Design .1
  • CSS-Geometrische Form: CSS-HALBKREIS steht für die untergehende Sonne.

1= Flat Design | Flat-Design steht für eine Reduktion der Gestaltung auf das Wesentliche. Hierzu wird auf jegliche Tiefe verzichtet, d.h. es gibt keine Farbverläufe, Verzierungen, Schatten, Texturen oder Rahmen. Getreu dem Motto: "Weiniger ist mehr". Es gilt also eine Dreidimensionalität zu vermeiden. Auch das Stichwort 'Minimalismus' ist prägend.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
74 BIG CITY WALK


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

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Transparenz Mit CSS-Opacity und CSS-rgba.
  • CSS-Animation: Bildwechsler / Fotoschau ( im Kopfbereich, startet automatisch )
  • CSS-Animation: Einblenden-Effekt + Textüberlagerung 1 (bei Mouseover auf den Fotos)
  • CSS-Animation: Gummiband-Effekt ( bei Mouseover auf den runden Fotos )
  • CSS-Animation: Wählscheibe-Effekt 2 (bei Mouseover auf den Icons im Kopfbereich)
  • CSS-Animation: Beben-Effekt ( bei Mouseover auf dem Homepage-Namen )
  • CSS-Animation: Slide-Left-Effekt + Farbänderung von Schrift / Font-Icon ( bei Mouseover im Haupt-Menü )
  • CSS-Animation: Schwingen-Effekt + Farbänderung Hintergrundfarbe ( bei Mouseover auf Zitat-Feldern )
  • CSS-Animation: Slide-Right-Effekt + Farbänderung Font-Icon ( bei Mouseover auf den Listen im Text )
  • CSS-Animation: Perspektivisches Wenden -startet automatisch- ( auf Foto im Text )
  • CSS-Animation: Drehen ( bei Mouseover auf Icons im Text )

1= Einblenden/Textüberlagerung | Es wird ein Textfeld über das Foto eingeblendet (für Infos zum Foto) sowie auch ein Lupen-Symbol (für eine grössere Foto-Ansicht bei Klick). Das Lupen-Icon ist auch animiert.
Bei "mouseout" (Verlassen des Bereiches mit der Maus) wird das Textfeld (mit Text und Font-Icon "Lupe") dann ausgeblendet und das Bild dafür wieder eingeblendet.

2= Wählscheibe | Viertel-Drehung nach rechts, dann Viertel-Drehung nach links bei schnellem Durchlauf /
Dauer: 0.7sek / Ablauf 2x bei Mausberührung

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
75 Website Launcher SNOWY SKY


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

Besonderheiten

  • CSS-Premium-Buttons.
    1.)  Buttons haben jeweils ein vorangestelltes eigenes Objekt, somit individuell formatierbar.
    2.)  Jeder Button erhält ein unterschiedliches Icon.
    3.)  CSS-Animation beim Icon: Pop-Up-Effekt + Icon-Tausch.
  • Jquery-Schnee-Animation: Schneefall, welcher dank entsprechendem Hintergrundbild noch realistischer wirkt und gar eine meditative Wirkung hat. Schauen Sie 30 Sekunden und versprochen, Sie werden auch eine Entspannung bemerken.
  • Launcher: Diese Homepage dient als Startplatz für mehrere Ihrer anderen Webseiten.
  • CSS-Animation: Schlittschuh-Läufer (Icon) läuft am unteren Rand der Seite (autom. startend).
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Kommerzieller Inhalt: einmalig Euro 24,--   | Wer es zusammen mit einem anderen Template bestellt nur 10,--
 
76 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,--
 
77 Where Is The Red Dot?


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.

Besonderheiten

  • Strukturierte Abschnitte:1 Nicht nur auf der Startseite, sondern auch auf allen Unterseiten.
  • Jquery-Schiebe-Regler, responsive: 3 x im Inhaltsbereich.
    Kann nicht nur Bilder tauschen sondern oder auch andere Objekte wie z.B. Icons oder Text usw.
  • CSS-Box-Fenster + Anleitung dafür: Bei einigen Links/Buttons öffnen sich Fenster als CSS-div-Box innerhalb der selben Seite, dies ist eine praktikable Javascript-freie Lösung.

1= Strukturierte Abschnitte: | Mit CSS nth-child(n) lassen sich gleiche Passagen/Abschnitte 'quellcode-reduzierter' und übersichtlicher anlegen. In diesem Template z.B. haben die 'ungeraden Abschnitte' (also Abschnitt 1, 3, 5 usw.) und die 'geraden Abschnitte' (also Abschnitt 2, 4. 6 usw.) jeweils eine andere Farbe. Zudem wird nur für den dritten Abschnitt eine eigene Regel diesbezüglich definiert, hier ist es die Foto-Galerie auf der Startseite, welche ohne jegliche Abstände bis an den Rand gelegt wird und damit nur für diesen dritten Abschnitt die nth-child-Regeln der 'ungeraden und geraden' Abschnitte überschreibt.
   - Ungerade Abschnitte = nth-child(odd)
   - Gerade Abschnitte = nth-child(even)
   - Dritter Abschnitt = nth-child(3)

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
78 THE COFFEE LOUNGE


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: 'Old Standard'

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Spezieller Italic Schriftschnitt 1.

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 (sondern nur der reguläre Schnitt), stellt der Browser auch bei der Anweisung 'font-style: italic' die Schrift einfach nur programmatisch schräg. Schauen Sie sich hier einmal die wunderschönen geschwungenen Linien bei der Schrift an, dann wird der Unterschied vielleicht deutlicher und was wir damit meinen.

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


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

  • Foto-Präsentation. Alle Fotos auf der Startseite bis an den Rand gezogen sowie enthaltend Fototitel.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 24,--
 
80 We Take Care


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' und 'Roboto Light'.

Besonderheiten

  • CSS-Geometrische Formen: Das Menü besteht aus einem Rechteck, einem Kreis, zwei Halbkreisen und einem Dreieck.
  • CSS-Animation: Pendel-Effekt1, startet automatisch und schwingt meditativ wie eine Glocken-Schwing-Bewegung.
  • CSS-Animation: Menü dreht bei Mausberührung von vertikal in die horizontale Lage.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.

1= Pendel-Effekt | Der Effekt läuft innerhalb einer halbransparenten Box ab und ist hier auf den Slogan-Spruch gelegt. Auf jeder Seite haben wir einen anderen Slogan-Text platziert. Optisch unterstützt wird der Effekt noch durch einen kleinen, farbigen und mitschwingendem Kreis, welcher an den Text-Beginn des Slogans gelegt ist.

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