113 MELANCHOLIA



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: Grafische Icons (PNG).
  • 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-SLIDESHOW (Bilderwechsel).
  • CSS-Textslider (wechselt reinen Text).
  • CSS-Animation beim Logo (Flug von rechts nach links, dabei 1x im Uhrzeigersinn drehend).
  • CSS-Animation beim Slogan (Flug von rechts nach links, dabei 3x gegen den Uhrzeigersinn drehend).
  • CSS-Animation Zoom (Mouseover: Bei den Links im Hauptmenü).
  • CSS-Animation Verzerrung (Mouseover: Bei den Bildern im Text).
  • CSS Animation Spinning Icons - Auf den Social Media Icons - Dreht bei Mausberührung.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
114 The Beauty In Architecture

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


Technik

  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

  • Mit transparentem Aufklapp-Menü.
  • Design: Rechenpapier sowie Lineal trifft auf grafisch goldgebräuntes Model.

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

Homepage Vorlage , templates , Homepage-Vorlagen,  free download


Technik

  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

  • Das Design ist hier auch optisch nett in drei vertikale Haupt-Bereiche aufgeteilt.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
116 GERMANY COLOR STYLE



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

  • Flaggen-SPEZIAL (Alle Flaggen nur mit CSS gestaltet, einfacher Code, hier in der Regel mit CSS-linear-gradient).
    Beispiele mit 8 Flaggen anbei plus Code-Schnipsel.
    Viele weitere Flaggen1 nach diesem Prinzip möglich.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Germany Design ( Schwarz, Rot, Gold )
  • Kreisförmige Anpassung der Links im Hauptmenü. Jeder Link muss anders eingerückt und damit innerhalb der Liste separat 2 angesprochen werden.
  • CSS-Animation: Drehen (Automatisch startend): Rechtsdrehung bei den Social Media Icons, wobei jedes zweite Icon (also jedes ungerade Element 3) davon links herum dreht.
  • CSS-Animation: Flaggen-Kugel rollt nach links und wieder zurück (Automatisch startend).

1= Weitere Flaggen.
Nach diesem Prinzip lassen sich andere Flaggen erstellen, z.B. Niederlande, Belgien, Luxemburg, Ungarn, Finnland, Rumänien, Lettland, Bulgarien, Russland, Littauen, Monaco, Ukraine, Irland, Estland, Armenien, Bolivien, Costa Rica, Elfenbeinküste, Gabun, Gambia, Guinea, Indonesien, Jemen, Kolumbien, Mali, Mauritius, Nigeria, Peru, Sierra Leone, Thailand, Tschad. Eine Übersicht von National-Flaggen finden sie hier.

2= Ansprechen jedes einzelnen Elements einer Liste.
Mit Pseudoelement ':nth-child(Zahl).

3= Ansprechen jedes ungeraden Elements einer Liste
Dies geschieht hier durch das Pseudoelement ':nth-child(odd)'.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
117 Dünengras

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


Technik

  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.

Besonderheiten

  • Milchglas-Effekt. Transparenz-Layout.
  • Auch Ihr Foto legt sich hinter die transparente Konstruktion.
  • Seite scrollt über feststehenden Hintergrund.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
118 ÜBER DEN WOLKEN AM MEER



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 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.
  • CSS-Menü-Animation: Hineingleiten des Menüs (bei mobilen Auflösungen).

Besonderheiten

  • CSS-Animation: Vogelflug I - Hinter 3 transparenten animierten Bildboxen läuft eine weitere Animation (Vogelflug) ab
  • CSS-Animation: Vogelflug II -Mehrere Vögel, fliegend mit untersch. Geschwindigkeiten und Wolken-Animation

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
119 PSYCHOLOGY OF LOVE



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

  • Paginierung: Verlinkte Seiten-Numerierung unten.
  • Jquery: Foto-Slideshow.1 In Seitenleiste eingebaut.
  • Paper-Like-Cards.2
  • CSS-Animation: Heartbeat (Herzschlag).

1= Foto-Slideshow in Sidebar:
Oft sieht man eine Foto-Slideshow nur im Kopf-Bereich der Webseite. Hier mal in die Seitenleiste eingebaut.

2= Paper-Like-Cards:
Die Paper-Like-Card besteht hier jeweils aus einem Foto mit dazugehörigem Textfeld. Wir haben es jedoch auf der Startseite im Inhaltsbereich besonders spannend angelegt, das heißt, bei den 3 Cards wurde jedes der drei Textfelder separat farblich an das jeweilige Foto angepaßt, sprich es handelt sich dabei um die Hintergrund-und Textfarbe, die Überschrift, die Linkfarbe sowie die Icon-Farbe.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
120 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

  • 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 Wobble-Effekt (Beim 'Nach-Oben-Pfeil' im Fussbereich).
  • CSS-Animation: Drehen-als-Flipp-Effekt (Auf den Icons im Inhaltsbereich).
  • Geometrische Formen: Rechteck plus Halbkreis. (Im Fussbereich beim 'Nach-Oben-Pfeil')
  • Spezieller Logo-Bereich wie folgt:
    Im oberen Bereich sehen Sie drei Fotos, welche übereinander gelegt sind. Innerhalb eines dieser Fotos haben wir das Menü platziert, die Links dort erhalten als optische Unterstützung noch eine dekorativen Pfeil als Font-Icon. Per CSS (transform:rotate) sind diese Fotos in verschiedenen Winkeln gedreht und reponsive angelegt, d.h. man sieht bei kleinen Auflösungen gewollt überwiegend das Foto mit dem Menü, denn der Platz ist ja -mal ausgehehend von der kleinsten Handy-Auflösungen mit einer Breite von 320 Pixel schon sehr rar und es gilt ja diesen wenigen Platz gut auszunutzen.

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