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
+ Big Icons Animated
+ 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.
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 extra großes dekoratives Icon.
Google-Webfonts: Extra breite Schrift 'Bungee', zu sehen beim Homepagenamen + Überschrift.
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.
CSS-Animationen: Alle BIG ICONS verschieden animiert (Kreisen, Pendeln, Wenden, Verschieben).

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

The Girl In The Red Jacket

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.
Jquery Smooth Scroll. Annimiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

CSS-Bildwechsler: Per CSS-Slideshow werden 8 Fotos getauscht, inklusive CSS-Bildanzeiger
Individuelle Sidebar für Plus-Infos: Bei höheren Auflösungen steht die Sidebar (Seitenleiste) rechts vom Inhalt und bietet Platz für zusätzlichen Content. Auf den einzelnen Seiten haben wir den Inhalt der Sidebar mal verschieden angelegt, so gibt es dort mal 2 Boxen, 4 Boxen, 6 Boxen oder 8 Boxen, z.B. auch mal ein zweites oder drittes Menü sowie auch Bilder oder Texte in dieser Spalte. So haben Sie die Möglichkeit sich für ein Beispiel zu entscheiden oder eben auch alle zu nutzen.
Bildtext bei den Fotos wahlweise kombinierbar: Highlights sind hier die Fotos im Inhaltsbereich, die sowohl ohne Bildtext als auch mit Bildtext angelegt sind sowie die Möglichkeit beides miteinander zu kombinieren.
Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.

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,--

Awesome Limegreen

+ ONE-PAGER
+ Menü mit untersch. Icon bei jedem Link
+ 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ü bei mobilen Auflösungen zunächst zu verstecken.
Jquery: Lightbox-Foto-Gallerie.
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.
Icon-Font: Font Awesome.
Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.
CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

One-Pager:¹ Alle Inhalte innerhalb einer HTML-Seite.
CSS-Box-Fenster: Inhaltsfenster als div-Box öffnen sich per Klick innerhalb selben Seite. Dies ist eine Javascript-freie Lösung.
Fixierte Menü-Leiste: Menü scrollt also nicht mit, sondern ist fest positioniert
Icons-Menü: Unterschiedliche Icons bei jedem Link im Hauptmenü.

¹= 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. 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 Boxfenstern innerhalb der selben Seite für weiteren Inhalt.

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

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

Webseiten 25-32

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten

Technik

Besonderheiten