57 Profundis Vida Opus



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

Besonderheiten

  • Abgewinkelte Buttons: Schrägstellung der Buttons mit CSS transform:skew. Da die Schrift aber auf dem Ojekt damit auch schräg gestellt wird, geben wir der Schrift eine Schrägstellung in die andere Richtung. Ergebnis: Die Schrift wird gerade angezeigt.
  • CSS-Animation: Fade-In + Delay. Alle Menü-Links werden nacheinander mit kurzer Verzögerung eingeblendet (bei mobilen Auflösungen).

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

  • CSS-Bildwechsler. Tauscht 10 Fotos.
  • 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
+ ONE-PAGER
+ CSS-Slideshow
+ Smooth-Scrolling
+ 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.
  • 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 Pure & Clean - Minimalism Series



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

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Minimalismus gibt es von alters her in vielen Bereichen, sei es bezüglich Musik, Kunst, Architektur, aber diese Einstellung gewinnt in heutiger Zeit zunehmend an Bedeutung wenn es insbesondere um einen reflektierten Lebensstil in der modernen Welt geht (Natürliches Leben, Zurück zur Natur, Einkehr, Meditation, Einfachheit, Weniger ist Mehr, Purismus, Kontrast im Wesentlichen).
    Klar hat es auch beim Webdesign Einzug gehalten, Flat-Design ist plötzlich in aller Munde. Im Wesentlichen geht es beim Minimalismus um ein Zurücknehmen, eine Reflektion über das Wesentliche und Rückbesinnung zur Natürlichkeit und um eine Haltung wider der allgemeinen Hektik, welcher der Großstadtmensch permanent ausgesetzt ist.
  • CSS-Animation: HTML-Seite fällt beim Laden der Seite von oben nach unten herunter! Klickt man im Menü einen Link, so wird die angewählte Inhalts-Seite animiert dargestellt, in der Form, das diese beim Laden herunter gleitet. Ein schöner Effekt, da man es in diesem Kontext eher selten sieht.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
64 White Swans On Blue Water



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.
  • 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: Lightbox-Foto-Gallerie.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Standard'
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • Google-Webfonts. Hier spezieller, schicker Italic-Schriftschnitt1.
  • Icons-Premium-Menü:2

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

2= Icons-Menü:
Mit Premium Buttons: Denn der Button hat zwei Teile, welche jeweils unterschiedlich formatiert werden können, nämlich das Icon sowie den eigentlichen Link. Vergleichen Sie hier den Ausgangs-Button, den Button bei Mausberührung sowie den Button für die aktuell angezeigte Seite. Außerdem sind die Icons bei jedem Button unterschiedlich, wählen Sie gerne andere Icons. Übrigens lassen sich diese Icons im Menü ganz komfortabel in der CSS-Datei 'menue.css' austauschen, eine Änderung hier bewirkt, das die Menü-Icons gleichzeitig auf allen HTML-Seiten gewechselt werden.

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