01 THE ART OF LIGHT



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





[ Fotos zeigen Auflösungsansicht von SMARTPHONE und TABLET im Portraitmodus sowie DESKTOP-PC ]

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

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Icon-Tausch: Kreis-Symbol wird durch das Häkchen-Symbol getauscht
  • CSS-Animation: DREHEN.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
02 PIER WITH A LIGHTHOUSE



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

  • Farbfilter in Blau sowie halbtransparent: Mit CSS-rgba ( Farbe und Deckungsgrad ggfls. anders einstellbar ).
  • CSS-Animation: DREHEN.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
03 FOLLOW THE HORIZON






Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  free download
Homepage Vorlage , templates , Homepage-Vorlagen,  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.
  • 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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: 2
  • Viele Box-Fenster: 3 Inhaltsfenster per div-Box öffnen sich per Klick auf der selben Seite.
  • CSS-Animation: CSS Bilder-Slideshow automatisch startend.

1= One Pager:
Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Klicken Sie die Links im Menü und sehen Sie wie innerhalb einer Seite die verschiedenen Sektionen aufgerufen werden. Wichtiger Bestandteil eines One-Pagers ist das Smooth-Scroll-To-Sections sowie das Öffnen von (div-)Boxfenstern innerhalb der selben Seite für weiteren Inhalt.

2= Smooth Scroll To Sections:
Die Sprungziele, sprich die einzelnen Sektionen (Abschnitte) werden übrigens animiert sanft und sichtbar angesteuert. Gemeint ist das sogenannte 'Smooth Scrolling', welches der Übersichtlichkeit und besseren Orientierung dient. Man registriert also auch optisch, wohin man gelangt und springt nicht so abrupt wie sonst beim üblichen HTML-Anker.

3= Box-Fenster:
Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
04 CUP OF COFFEE



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

  • Die warmen Farbtöne (Farbe names Peru) in Verbindung mit einer coolen Sachlichkeit in Form von hellen Grautönen machen hier den ganz speziellen Reiz aus und bilden einen schönen Kontrast. Unaufdringliche Gemütlichkeit, die zum Entspannen einlädt. Let us have a Cup of Coffee, please.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
05 START A NEW CREATIVE PROJECT






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




Aufklapp-Menü
bestehend aus:
+ CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT

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

  • Mit AUFKLAPP-MENÜ 1 ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
  • Akkordeon-Menü 2 ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )
  • Transparenz.3 Transparenter Farbfilter mit CSS-rgba. ( Hier beim Homepagenamen-Feld )
    ( Ermöglicht, das die Schrift auf jedem Hintergrundfoto gut zu lesen ist ).
  • CSS-Animation: Der Toggle-Schalter hat ebenfalls eine Slider-Funkion, nach Klick schiebt er sich hinaus und gibt den darunter liegenden Schließen-Button frei.

1= Aufklapp-Menü:
Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten.
Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'. "Getoggled" werden also nicht nur der Menü-Schalter sondern insbesondere auch die Top-Level-Links, welche die Untermenüs öffen.

2= Akkordion-Menü:
Unter einem Akkordeon versteht man einen Aufklappmechanismus (hier auf das Menü bei mobilen Auflösungen angewandt), der nur einen Teilbereich eines Objektes zeigt und erst durch click oder touch weitere Teilbereiche aufschiebt.

3= Transparenz/Farbfilter:
Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad auch anders einstellen (mit Werten von 0 bis 1, wobei gilt: 0=volltransparent und 1= gar keine Transparenz). Dazwischen gelten die eigentlich interessanten Werte von 0.1 bis 0.9.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
06 Astronaut To Ground Control





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





+ ONE-PAGER
+ CSS-ANIMATION:
" KREISEN AUF RUNDEN HAARLINIEN "
+ Full-Screen-Only-Site
+ CSS-Box-Fenster

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ü zunächst zu verstecken.
  • CSS-Menü-Animation: Einblenden des Menüs.
  • Jquery: Lightbox-Foto-Gallerie.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

  • One-Pager:1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Animation KREISEN AUF RUNDEN HAARLINIEN. 2
  • Full-Screen-Only-Site. 3
  • CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.

1= One Pager:
Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Klicken Sie die Links im Menü und sehen Sie, wie mittels nur einzigen HTML-Seite die verschiedenen Links als Boxfenster innerhalb der eigenen Seite aufgerufen werden.

2 = CSS-Animation KREISEN AUF RUNDEN HAARLINIEN:
Objekte (Font-Icons) kreisen mit versch. Geschwindigkeiten und Richtungen um einen Mittelpunkt - und zwar spektakulär, weil nicht irgendwo im freien Raum, sondern exakt dünnen kreisförmigen Haarlinien folgend.
  1. Äußerer Kreis: Ein Rakete-Icon.
  2. Mittlerer Kreis: Ein Satellit-Icon.
  3. Innerer Kreis: 8 x Icons, aufgeteilt wie folgt:
    1. ) Vier Stück Social Media Icons = verlinkt zum jeweiligen Social-Media-Anbieter.
    2. ) Vier Stück diverse Icons = öffnen Boxfenster innerhalb der eigenen Seite.
Diese CSS-Animaton ist ganz ohne Grafiken erstellt. Noch eine Besonderheit: Die 8 Font-Icons des inneren Rings bleiben beim Kreisen immer in waagerechter Position. Das ist nicht selbstverständlich, denn bei einem einfachen Kreisen per CSS-Animation um einen Mittelpunkt herum würde ja das oberste Icon, wenn es sich an unterer Position befindet, auf dem Kopf stehen.
Unsere Lösung dafür ist es, alle 8 Icons mit gleicher Geschwindigkeit per Block rechts herum und jedes einzelne Icon mit einer zweiten Animation links herum drehen zu lassen.
Man kann es also physikalisch vergleichen mit einem Riesenrad, welches ja auch technisch dafür sorgt, das die einzelnen Gondeln mitsamt der Menschen darin trotz des Kreisens niemals Kopf stehen müssen.

3 = Full-Screen-Only-Site:
Volle Bildschirm-Ansicht: Während die Gesamtkonstruktion hier bei allen Auflösungen nicht mitscrollt und immer jeweils responsive das Display ausfüllt, lassen sich die öffnenden Inhalts-Fenster (Box-Fenster) sehr wohl scrollen.

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



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

  • Seitentitel. 1 Auf jeder Seite ein anderes Font-Icon.
  • CSS-Halbkreise 2 vertikal. ( Zwei vertikale Halbkreise werden zu einem Kreis zusammengesetzt ).
  • CSS-Halbkreise 2 horizontal. ( Zwei horizontale Halbkreise werden zu einem Kreis zusammengefügt ).
  • Strukturierte Abschnitte 3 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.
  • CSS-Animation: DREHEN bei Icons im Fuss-Bereich.

1= Seitentitel:
Auf jeder Seite ein anderes Font-Icon als Seitentitel, dekorativ innerhalb eines CSS-Halbkreises angeordnet sorgt für Ordnung und nimmt die Farbe des Inhaltsbereichs auf.

2= CSS-Halbkreise:
Ein Halbkreis enthält Text und der andere Halbkreis enthält ein Font-Icon, beide werden zu einem Kreis geschlossen und es ergibt sich somit ein modernes Element, das grafisch wirkt, jedoch komplett ohne Grafik auskommt.

3= 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,--
 
08 Website Launcher SNOWBOARDING



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

  • CSS-Animation:1 Snowboarder fahren einen Hügel mit 45Grad-Schräge hinab und liefern sich ein spannendes Rennen, welches dank Überholungen durch unterschiedlicher Geschwindigkeiten nie langweilig wird.
  • Launcher: Diese Homepage dient als Startplatz für mehrere Ihrer anderen Webseiten.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Menü schräg gestellt + Icon-Tausch: Menü nimmt bei exakt zweigeteilter Hintergrundfarbe 6 Buttons auf, welche durch ein vorangestelltes Icon auch einen Icon-Tausch bei Mausberührung haben.

1 = Snowboarder-Animation:
Verwendet wurde ein Icon-Font, welches wir jeweils unterschiedlich coloriert haben und somit kann das Icon leicht durch ein anderes Icon getauscht werden bzw. denkbar sind auch mehrere verschiedene Icons oder stattdessen auch eigene Grafiken, Logo etc.

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