57 Ancient Times

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

  • Die Menü-Spalte schiebt sich in den Kopfbereich hinein. Das Foto, also ggflls. auch Ihres, legt sich automatisch hinter das Menü. Trotzdessen ist die Menü-Spalte mit ihrem Inhalt unabhängig vom Rest der Konstruktion, d.h. anpassbar z.B. in der Breite, Höhe und Inhalt.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
58 Standing On The Shore



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

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Big Icons - Großes Telefon und Handy-Symbol direkt oben an prominenter Position
  • Gedeckte Farben 1: Farbtöne in Blau, Beige und Erdfarben, stehend für Wasser, Sand und Strand.
  • Jeweils andere Fotos im oberen Bereich auf den Unterseiten.
  • CSS-Animation: Mausberührung auf den Links löst eine Vergrösserung (Scale) beim jeweils vorangestelltem Icon aus.

1= Gedeckte Farben:
Gedeckte Farben, oft mit einem Grauton-Anteil, wirken edel, stylish und beruhigend, denn sie sind "nicht schreiend", springen dem Besucher also nicht direkt an. Es geht also um eine spannende, aber dezente Zurückhaltung.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
59 ON THE SUNNY SIDE OF LIFE



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.
  • 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: Einblenden des Menüs.

Besonderheiten

  • Abgewinkelte Buttons (Schräge Kanten)1 Mit CSS-transform:skew.
  • Strukturierte Abschnitte 2 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • CSS-Animation: DREHEN bei Icons im Fusstop-Bereich.
  • CSS-Animation: VERZERREN bei Icons im Fuss-Bereich.

1= Abgewinkelte Buttons:
Wir haben hier eine Schrägstellung der Buttons um 15 Grad. Da die Schrift aber auf dem Ojekt damit auch schräg gestellt wird, geben wir der Schrift eine Schrägstellung von 15 Grad in die andere Richtung, mit dem Ergebnis das die Schrift jetzt gerade angezeigt wird.

2= Strukturierte Abschnitte:
Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
60 Jump Into The Sky

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

  • Auf dem Foto liegen eine schön ausgeleuchtete Menüleiste (Blau) sowie Homepagenamenleiste (Rot).
  • 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,--
 
61 Pension In Traumlage






Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , responsive templates , Homepage-Vorlagen,  free download
Responsive Homepage Vorlage , templates , Homepagevorlagen,  free download




ONE-PAGER
Alle Inhalte innerhalb einer HTML-Seite
+ CSS-Slideshow
+ Smooth-Scrolling
+ CSS-Box-Fenster

Technik

  • Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
  • Mobile-First-Technik.
  • 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.
  • Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
  • 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. In der Regel wird das Menü auf mobilen Geräten hierbei zunächst versteckt.
  • CSS-Menü-Animation: Hineingleiten des Menüs bei mobilen Auflösungen.

Besonderheiten

  • One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
  • CSS Bildwechsler Slideshow inklusive Bildanzeiger, bei dem kleine Icons die Gesamtzahl der Bilder sowie das aktuelle Bild anzeigen.
  • CSS-Objektwechsler: Tauscht Bild und/oder Text im Inhaltsbereich.
  • Jquery: Smooth Scroll To Sections. Animiertes Angleiten der jeweiligen Abschnitte innerhalb der Webseite.
  • Strukturierte Abschnitte: Mit CSS-Pseudo-Element 'nth-child(n)'.
  • Box-Fenster CSS-Only: Diverse Inhaltsfenster öffen sich als div-Box mittels Klick auf den 'Weiter-Button' innerhalb der selben Seite als CSS-Konstrukt.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
62 Auf meinem Boot bin ich der Kapitän



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.
  • Google-Webfonts: Schrift 'Josefin Sans' und '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: Einblenden des Menüs.

Besonderheiten

  • Wellen per CSS. 1
  • Handschrift-Feeling. 2 Zwei unterschiedliche Handschriften-Fonts eingearbeitet.
  • Transparente Segelboot PNG-Grafiken anbei. Verschiede Farben, 4 x mit Ziffer und alternativ 4 x ohne Ziffer.

1= Wellen per CSS:
Es ergibt sich somit eine grafische Wirkung ohne den Einsatz von Grafiken.

2= Handschrift-Feeling:
Der Einsatz von Handwriting-Fonts verleiht der Webseite einen individuellen Charakter. Doch allzu leicht ist hier des Guten zuviel. Es gilt sorgsam abzuwägen, um die richtige Entscheidung zu treffen. Wir geben hier letztendlich den Überschriften einen stärkeren Handwriting- Look als dem Text, indem wir 2 verschiedene Fonts einsetzen.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
63 The Tower Building

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

  • Transparentes Menü-Feld
  • Startseite + 2 alternative Unterseiten anbei.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
64 Der Grüne Weg

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

  • Tooltip (Bei Mausberührung erscheint Link-Beschreibungstext per CSS).
  • Diagonale Schrägen nach oben und unten (mit CSS-linear-gradient).
  • Runde Fotos (mit CSS-border-radius).
  • Menü-Leiste bei allen Auflösungen fest oben positioniert (scrollt also nicht).
  • CSS-Animationen:Gummiband, Drehen, Schwingen, Slide-Top, Slide-Left.
  • Mit Toggle-Menü. (Bei mobilen Geräten wird ein platzsparendes Menü aktiviert (mit Umschalt-Button An/Aus).

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