responsive , homepage vorlagen, homepagevorlagen ( templates )

CLASSIC STYLE TREND

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

Besonderheiten

Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
Hauptmenü mit Icon-Wechsel:
Bei Mausberührung wird das jeweilige Font-Icon durch ein anderes getauscht.
CSS-Animation: Drehen

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

I´M A ONE-PAGER

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: ¹ Alle Inhalte innerhalb einer HTML-Seite.
Big Icons. Jeder Abschnitt im Inhaltsbereich enthält ein großes dekoratives Icon.
Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
Jquery Smooth Scroll To Sections: ²
Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.
Google-Webfonts: Extra breite Schrift 'Bungee', zu sehen beim Homepagenamen + Überschrift.
CSS-Animationen: Einige CSS-Keyframes-Animationen automatisch startend und fortlaufend wie
- SLIDE LEFT/RIGHT
- DREHEN
- SLIDE UP/DOWN.

¹= 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.

²= 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.

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

Top Company

Technik

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

Besonderheiten

Das bogenförmig gezeichnete Haupt-Menü schiebt sich als Halbkreis effektvoll in das Foto (ggflls. auch Ihres) hinein.
Für Fortgeschrittene gibt es dieses Template auch in der Responsive-Version hier:

HP101/Top Company Responsive

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

CONSTRUCTION PARTICLES

Für NEUE Seiten
oder in
BEARBEITUNG-Seiten
+ Jquery
Partikel-Animation

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

Under-Construction-Template ¹. Wenn Ihre Seite im Aufbau, Umbau oder Neu am Start ist.
Jquery-Particles Animation: ² Cooler Effekt ! Partikel in Bewegung bei ständiger Erneuerung und Veränderung.
Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.
CSS-Animation: Puff-In-Effekt: Fenster blendet sich zunächst verkleinernd in die Seite hinein und poppt dann zur vollen Größe auf.
CSS-Animation: Drehen-Effekt: Bei den auf den Buttons vorangestellten Icons.

¹= Webseite im Aufbau / Umbau oder NEU am Start:
Die Zeit von diesbezüglichen Baustellen-Bildern ist schon lange vorbei. Der erste Eindruck ist entscheidend. Und für den ersten Eindruck gibt es keine zweite Chance. Dieses Template verbindet eine dezente Hintergrund-Animation (sich ständig verändernde Partikel) mit 2 Info-Fenstern, welche ebenfalls animiert sind (Puff-In-Animation).

²= Jquery Animation 'Particles':
Wir haben über diese Animation eine zweite Ebene (Inhalt mit Buttons und Text) sowie eine dritte Ebene (sich öffnende Info-Fenster) darüber gelegt. Diese Ebenen wurden mit 'position:relative/absolute' getätigt.

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

Quintessenz

Technik

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

Besonderheiten

Jede Seite erhält ein anderes Foto im Logo-Bereich, auch jeweils angepaßte Sidebar.
Transparente PNG-Maske: Gflss. auch Ihre Fotos legen sich automatisch hinter die rote Maske mit den schräg gestellten Blöcken.

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

KANZLEI RA LAWYER & PARTNER

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

Außergewöhnliches Hineingleiten des Menüs. Nämlich von unten nach oben und bei allen Auflösungen.

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

BOY MEETS GIRL

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 'Snippet' und 'Josefin Sans'.

Besonderheiten

Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
Navigation: Icon-Tausch Girl-Symbol ('venus') wird durch das Boy-Symbol ('mars') getauscht
Gegensätze: Mischt man die Farben Blue und Pink ergibt sich ein Lila-Ton als Verbindung.
CSS-Animation: DREHEN.

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

Near The Station

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

Wechselnde Fotos im Kopfbereich. Auf jeder Seite ein anderes Foto, welches sich auch hinter den Halbkreis legt.
Verschachteltes Grid-System inkl. Rahmen nur per CSS mit einfachem display:inline-block' ¹ bei der Picture-Gallery.

¹= Verschachteltes Grid.

Verschachteltes Grid heißt: Unregelmässig innerhalb des Raster-Systems, die Bilder haben verschiedene Größen und einige Bilder strecken sich vertikal oder horizontal über mehrere andere Bilder hinweg. Praktisch: Tatsächlich haben aber nur 2 der 9 Bilder eine abweichende Größe, alle anderen sind 900x500 Pixel groß. Trick: Bei den weißen Rahmen haben wir alternativ 'box-shadow' statt 'border' verwendet, denn ein border-Rahmen würde ja durch die Duplizierung bei z.B. 4 Fotos andere Abstände verursachen als z.B. bei nur 1 Foto. Plus: Wir haben hier zusätzlich noch eine Big Gallery mit 18 Fotos an Bord, das Schema wurde entsprechend erweitert.

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

Homepage Vorlagen ( Templates ) zum Download.

Webseiten 25 - 32 ( frei für privat, kostenpflichtig für kommerziell )

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten