89 [ ... Noch Ohne Name ... ]
+ + + Ganz NEU + + + In Arbeit + + HP 89 geplant für ca. Mitte Sept. 2019



    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
90 DER KLEINE MARIENKÄFER



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.
  • Google-Webfonts: Schrift 'Josefin Sans' und 'Snippet'.

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • CSS-Animation: Kleiner Käfer krabbelt über die Webseite.
  • Natur-Farben1 Das Ausgangsfoto mit dem roten Käfer auf dem satten Blattgrün schaut so klasse aus, da konnten wir als Farbharmonie nur sehr viel Grün mit ein wenig Rot für das Design auswählen.
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter2 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.
  • CSS-Animation: Drehen.

1= Natur-Farben: Die Farben wirken auch natürlich, weil der grüne Farbton direkt aus dem Ausgangsfoto ausgewählt wurde. Hinweis: Um eine beliebige Farbe innerhalb eines Fotos zu bestimmen, gibt es ja kleine Freeware-Tools, welche z.B. Color Picker oder ähnlich heißen.

2= Transparenz/Farbfilter: Im Gegensatz zum etwas leichter zu handhabenen CSS-Befehl 'opacity', welcher auch eine Transparenz ermöglicht, wird beim CSS-Befehl 'rgba' die Schrift auf dem Objekt nicht auch gleichzeitig mit einer Transparenzstufe versehen. Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad einstellen. Je nach Foto ( falls Sie Ihres einfügen wollen ) oder Geschmack kommt man somit mit einer Schwarz-Transparenz (wie hier in diesem Template) oder einer Weiß-Transparenz bestens aus. Die Schrift, egal mit welcher Schriftfarbe hebt sich somit immer von den Farben des Fotos ab. Wer es noch individueller oder perfekter mag, wählt gar eine ganz andere Farbe.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
91 Ready For Input



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.
  • Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
  • Icon-Font: Font Awesome.
  • 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.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt '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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • CSS-Animation: Scan-Effekt beim Homepagenamen (startet automatisch).
  • CSS-Animation: Shiny-Effekt bei den Buttons (bei Mausberührung).
  • Auf jeder Seite andere Fotos im Kopf-und Fussbereich.
  • Ausblenden von FOTO zu FARBE: Beim Scrollen blendet das Foto im Kopf-Bereich allmählich in eine Farbe über und verschwindet damit sanft.
  • Menü-Button, fest positioniert: D.h, dieser ist beim Scrollen immer im sichtbaren Bereich des Browser-Fensters.
  • CSS-Animation: Aufblätter-Effekt: Die Links des Menüs werden nacheinander mit kleiner Verzögerung eingeblendet.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
92 COUNTDOWN LAUNCHER RIPPLES
Jquery
+ Water Ripples Effekt
+ Countdown Timer



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.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt '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 Water Ripples Animation: 1 Water Ripples Effekt (Animierte Wellen)
  • Jquery Countdown Timer 2. Mit Countdown-Zähler.
  • Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.
  • CSS-Animation: Puff-In-Effekt + Blur-Effekt: Fenster blendet sich zunächst verkleinernd und mit Weichzeichner (Blur) in die Seite hinein und poppt dann zur vollen Größe auf.
  • CSS-Animation: Perspektivisches Wenden.
  • CSS-Animation: Drehen-Effekt: Bei den auf den Buttons vorangestellten Icons.

1= Water Ripples Effekt:
Wasser-Wellen breiten sich bei Mausberührung / Touch auf dem Bild aus.
Wir haben über diese Animation eine zweite Ebene (Inhalt mit Buttons und Text) sowie eine dritte Ebene (sich öffnende Info-Fenster)darüber gelegt. Diese Ebenen wurden mit 'position:relative/absolute' getätigt.

2= Countdown Timer:
Zählt in Tagen, Monaten, Stunden und Sekunden herunter. Das End-Datum, an welchem der Zähler die Null erreicht, stellen Sie ganz leicht im Kopf-Bereich der HTML-Seite ein. Tipp: Verschiebt sich Ihr Projekt dann doch noch einmal kurzfristig, stellen Sie ganz einfach ein neues End-Datum ein und ändern den Text ('We Will Launching Soon').


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

Homepage Vorlage , templates , Homepage-Vorlagen, free download


Technik

  • NICHT-Responsive-Style, sondern Analog-Style
  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

  • Halb-Transparentes Menü in der Farbe Blau läßt auch Ihr Foto durscheinen. Auf jeder Seite ein anderes Foto, mehrere Beispielseiten anbei. Blau getäfeltes Holz.
  • Verschiedene Menü-Zustände beim Menü oben:
    Ausgangslink: Himmelblauer Hintergrund mit orangener Kugel.
    Mouseover-Link: Dunkelblauer Hintergrund mit weißer Kugel.
    Aktueller-Link:Orangener Hintergrund mit gelber Kugel.
  • CSS3-Effekte (Textschatten, Boxschatten, Abrundung = Schattenwurf und Abrundungsgrad individuell und flexibel einstellbar, da ohne Grafiken realisiert).

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
94 TRAVEL ON HIGHWAY



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.
  • Google-Webfonts: Schrift 'Old Standard'.
  • 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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • CSS-Bildwechsler (tauscht auf jeder Seite 4 verschiedene Bilder, also bei 6 Seiten sind das 24 untersch. Tauschbilder).
  • Plus CSS-Animation 'Kamerafahrt' beim Bildwechsler.
  • Spezieller Bild-Anzahl-Anzeiger beim Bildwechsler 1: Es ist ein Batterie-Akku-Anzeiger
  • Google-Webfonts. Hier spezieller, schicker Italic-Schriftschnitt 2.
  • Verschiedene ANIMATIONEN per CSS gestaltet.

1= Bild-Anzahl-Anzeiger: Bei einem Bildwechsler gibt es oft einen Anzeiger für die Bildanzahl der zu wechselnden Bilder. Man erkennt dann z.B. : Jetzt gerade ist Bild 2 von insgesamt 4 Bilder zu sehen. Dies sind häufig kleine Kreise, wobei der Kreis für das aktuelle Bild dann farblich anders formatiert wird. Wir haben diesen Bildanzeiger hier mal anders gestaltet. Es gibt ein Batterie-Symbol, das sich mit jedem angezeigten Bild der Slideshow weiter füllt. Sozusagen bis die Batterie voll geladen ist.

2= 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,--
 
95 MY FITNESS GIRL



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

Besonderheiten

  • Spezieller Logo-Bereich wie folgt:
    Im oberen Bereich sehen Sie drei Fotos, welche übereinander gelegt sind und durch die CSS-Pendel-Animaton jeweils unterschiedliche Auschnitte der Fotos zeigen können. Innerhalb eines dieser Fotos haben wir das Menü platziert, die Links dort erhalten als optische Unterstützung noch jeweils ein Icon vor sowie ein anderes Icon nach dem Link. Weiterhin: Das hintere Icon (transparentes Quadrat) wird bei Mausberührung durch ein anderes Icon (Häkchen innerhalb eines Quadrats) gewechselt, dieses ergibt somit einen schönen 'Abgehakt-Effekt' wie beim Ausfüllen eines Dokumentes.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • CSS-Animation: Pendel-Effekt, startet automatisch. (Auf dem Homepagnamen und den 3 Fotos oben).
  • CSS-Animation: Wobble-Effekt (Auf den Fotos im Inhaltsbereich).
  • CSS-Animation: Flipp-Effekt (Auf den Icons im Inhaltsbereich).
  • Geometrische Formen per CSS: Rechteck plus Halbkreis. (Im Fussbereich beim 'Nach-Oben-Pfeil')

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

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


Technik

  • NICHT-Responsive-Style, sondern Analog-Style
  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

  • Die Farben des Layouts ergaben sich aus den Augenfarben des Models.

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