09 Spicy & Fresh - 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'.
  • 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

  • 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: Seitentitel gleitet hinein, so das man gut erkennt, welchen Link bzw. welche Seite man gerade gewählt hat.
  • CSS-Animation: HTML-Seite blendet sich ein! Klickt man im Menü einen Link, so wird die angewählte HTML-Seite animiert dargestellt, in der Form, das diese beim Laden eingeblendet wird.
  • CSS-Menü-Animation: Menü-Button dreht bei Hover und entgegengesetzt bei Klick.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
10 Above The Clouds



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

Besonderheiten

  • CSS-Bildwechsler 1a schiebt die Fotos animiert nach links hinaus und wechselt die Richtung 1b.
  • Paginierung 2: Seiten-Numerierung unten.

1a= Bildwechsler:
Diese Slideshow funkioniert alleine per CSS-Keyframes-Animation. Es ist also eine Standard-Animation, welche ganz ohne weitere Scripte (z.B. Javascript oder Jquery) auskommt. Dazu gibt es noch einen Anzeiger per Font-Icons für die Anzahl der wechselnden Bilder (Offene bzw. volle Ringe ). Damit die Ringe auf nahezu jedem Foto gut sichtbar sind, wurde ein CSS-Textschatten auf diese gelegt.

1b= Richtungswechsel: Auf den Seiten Home, Secundus und Quartus läuft die Animation standardmässig vorwärts ab, auf den Seiten Primus, Tertius und Quintus lasssen wir die Slideshow zur Abwechslung rückwärts ablaufen (animation-direction: reverse). Und auf der Seite Sextus läuft die Animation gar vorwärts durch und gleich danach wieder rückwärts (animation-direction: alternate).

2= Paginierung:
Die Seiten-Numerierung bietet nicht nur praktischerweise im unteren Bereich die direkten Links zu den Unterseiten an, sondern schafft auch Strukur, denn es wird auch der jeweils aktuell angewählte Link (also die momentane Seite) angezeigt.
Zudem haben wir in diese Paginierung noch erweitert, indem jeweils ganz links und ganz recht sog. Font-Icons eingebaut wurden. Also hier die Icons "home" (um zur Startseite zu springen) und "pfeil-oben" (um nach oben an den Anfang der Seite zu springen).


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
11 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,--
 
12 Style & Emotions



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.
  • Farb-Tipp: "TEAL".
    Kennen Sie schon die Farbe "TEAL"?
    Dann schauen Sie hier einmal und genießen den dezenten Schick, der sich insbesondere mit der Farbe Schwarz ergibt. Klassisch macht diese Farbkombination Sinn, denken Sie an grüne Palme, die neben einer schwarzen schicken Leder-Couch platziert ist. Zeitlos. Denn dies ist seit Jahrzehnten in Büros und privaten Wohnungen gebräuchlich.
  • Diagonaler (45Grad) Streifen-Hintergrund ohne Grafik (CSS-linear-gradient).
  • Fixierter Background Seite scrollt also über den Hintergrund.
  • CSS-Animationen: Schwingen, Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Fuss-Icons).

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
13 Check The News In The Morning



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: Particles. Animierte schwebende Objekte (Polygone, Kreise).
  • 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

  • Jquery-Animation: Schwebende Partikel. Die Partikel würden sich gfls. auch über ihre Fotos legen. Im Script selber gibt es unzählige Möglichkeiten zur Einstellung, sei es Geschwindigkeit, Anzahl, Farbe, Form der Objekte (Kreise, Quadrate, Polygone), Abschalten der Verbindungslinien, Verhalten bei Mausberührung oder Klick und vieles mehr. .
  • Menü-Button, fest positioniert: D.h, dieser ist beim Scrollen immer im sichtbaren Bereich des Browser-Fensters.
  • CSS-Animation: Aufblätter-Effekt: Die Links werden nacheinander mit kleiner Verzögerung eingeblendet.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
14 RESTAURANT - FRESH FOOD



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' 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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • Geometrische Form ( DREIECK 1 nur mit CSS erstellt ) enthält Slogan-Spruch.
    Der Slogan-Spruch ist immer responsive unten rechts im oberen Bereich platziert.
  • Geometrische Form ( KREIS mit Umrahmung nur mit CSS erstellt ) enthält hier noch ein Font-Icon (Messer/Gabel).
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter 2 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.

2= Dreieck mit Slogan: In Wirklichkeit ist es ein großes Rechteck, per CSS gestaltet und absolut platziert. Diese Rechteck wird um 45Grad gedreht (transform:rotate) und der überstehende Teil wird abgeschnitten (overflow:hidden) bzw. verdeckt.

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 transparent gesetzt, sondern bleibt in voller Deckungskraft erhalten. Beim 'rgba-Befehl' können Sie übrigens Farbe und Deckungsgrad auch anders einstellen.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
15 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.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

  • 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.
  • CSS-Premium-Buttons.
    1.)  Buttons haben jeweils ein vorangestelltes Icon als eigenes Objekt, somit individuell formatierbar.
    2.)  Jeder Button erhält ein unterschiedliches Icon.
    3.)  CSS-Animation beim Icon: Pop-Up-Effekt + Icon-Tausch.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
16 Corporate Business Since 1879






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. + Smooth-Scrolling-To-Sections
+ Box-Fenster

Technik

  • Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
  • Mobile-First-Technik.
  • One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
  • 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 (bei mobilen Auflösungen).

Besonderheiten

  • Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster (bei Klick auf 'Weiter-Button') als div-Box innerhalb der selben Seite nur per CSS öffnet.
  • Smooth Scroll To Sections: Die Sprungziele, sprich die einzelnen Sektionen (Abschnitte) werden animiert (gleitend) sanft und sichtbar angesteuert. Somit dient das sogenannte 'Smooth Scrolling' der Übersichtlichkeit und besseren Orientierung. Man registriert also auch optisch, wohin man gelangt und springt nicht so abrupt wie sonst beim vergleichbaren HTML-Anker.

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