responsive , homepage vorlagen, homepagevorlagen ( templates )

BÜRO - Organisation und Verwaltung

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 | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Condensed'.
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.

Besonderheiten

Auf jeder Seite ein anderes Foto im Kopfbereich.
Halbtransparentes Menü ( mit CSS-rgba ) mit vorangestellten Icons bei den Links.
CSS-Box-Fenster + Anleitung dafür: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet plus den Hintergrund der Webseite abdunkelt.
Jquery 'Slick' - responsive Schieberegler - im Inhaltsbereich.
Tauscht nicht nur Bilder sondern oder auch andere Objekte wie z.B. Icons oder Text.

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

START A NEW CREATIVE PROJECT

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
Schrift: 'Open Sans Light' 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.

Besonderheiten

Mit AUFKLAPP-MENÜ ¹ ( + Responsive + CSS-Only + Touch-Friendly ) - Komplett ohne Javascript.
Akkordeon-Menü ² ( Bei mobilen Auflösungen wandelt sich das Menü ins sog. Akkordeon-Menü und schiebt sich platzsparend zusammen. )

¹= Aufklapp-Menü | Das Menü ist responsive und nur mit CSS erstellt. Es funkioniert ohne Javascript - und das auch auf mobilen Geräten. 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.

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

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

LEGATUS DOMINUS

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'OPEN-SANS-CONDENSED' und 'BUNGEE'.
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.
CSS-Menü-Animation: Hineinfahren des Menüs.
Jquery Smooth Scroll. Animiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen ( Hier z.B. der 'Nach-Oben-Pfeil' ).

Besonderheiten

Transparentes Menü im Streifen-Look.
Ribbon-Style: Auf einigen Objekten liegt eine dekorative Schleife/Band.
Slogan-Kreis, transparent: Für Ihren Spruch, Slogan, kurze Info o.ä.
Wechselnde Logo-Fotos: Auf jeder der einzelnen HTML-Seiten gibt es im Kopf-Bereich ein anderes Foto. Das schafft Struktur und macht jeden Link einzigartig und vertraut.
Ausleuchten der Logo-Fotos per CSS-box-shadow ¹.
Doppel-Transparenz: Das transparente Menü liegt über dem ebenfalls transparentem Homepagenamen-Bereich im Kopf der Seite. Unter all dem scheint dann das Foto durch. Klar, genaugenommen spricht man natürlich von einer Halb-Transparenz, welche in Farbe und Deckkraft beliebig einstellbar ist. Und zwar über den CSS-Befehl 'background:rgba()'

¹= Ausleuchten mit 'CSS-box-shadow' | Normalerweise setzt man mit 'CSS-box-shadow' einen Schatteneffekt in der Farbe Schwarz bzw. beliebigen Grau-Tönen von Dunkel bis Hell. Wir haben hier mit der Wahl der Farbe (hier dezentes 'Lightskylbue, probieren Sie gerne 'Yellow' oder 'Red', dann fällt es noch mehr auf) sowie eines grösseren Bereichs einen Leucht-Effekt generiert.

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

100

BRÜCKEN - PONTS - BRIDGES

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Light' 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.

Besonderheiten

Transparenz ( mit CSS-rgba ) .
Slogan im Kreis Auf jeder Seite ein anderer Slogan.

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

101

Check The News In The Morning

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 | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans Light'.
Jquery: Particles. Animierte schwebende Objekte (Polygone, Kreise).
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.

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

102

Women In The City

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift: 'Open Sans 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.
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.

Besonderheiten

Auf jeder Seite ein anderes Foto im Kopfbereich.
Halbtransparentes Menü. Hier in Dunkelrot. Dank CSS-rgba-Wert ist aber auch jede andere Farbe sowie Transparenzstärke einstellbar.
Fest positionierte Hintergrund-Grafik scrollt nicht mit. Hier ist es die Stein-Mauer, welche eine behagliche Wärme ausstrahlt.
Verschachtelte Bilder.
Das heißt die Bilder sind unregelmässig bezüglich der Anzahl in Reihe und/oder Höhe der Bilder, trotzdem schließt der ganze Bilder-Block auf einer Grund-Linien-Höhe ab. Verschachtelte Bilder sehen Sie im Inhaltsbereich der Startseite (index.html) und der Seite Sextus (index6.html).

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

103

CAKES & COFFEE

JQUERY
3 x Foto-Show
+ ( Fotorama )
+ ( Lightbox )
+ ( Elastislide )

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift :'Open Sans 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.

Besonderheiten

Jquery: 3 verschiedene Foto-Shows.¹
CSS-Animation: Fade-In + Delay.
Alle Menü-Links werden bei mobilen Geräten nacheinander mit kurzer Verzögerung (Delay) eingeblendet.
Links beim Menü mit einem vorangestellten Icon ² Hier ist es ein Kaffeetasse-Icon ( veränderbar )
Fixed Menü-Button: Bei mobilen Auflösungen ist der Menü-Schalter fest gesetzt und ist damit beim Scrollen immmer im sichtbaren Bereich des Displays.
CSS-Animation: Hover: Vergrösserung ( Scale ) bzw. Wenden ( RotateY ) bei den Icons.

¹= 3 x verschiedene Foto-Shows |
1.)   Jquery: Foto-Slideshow 1 (Fotorama) - Startet automatisch. Variabel. Auf jeder Seite mit untersch. Bild-Anzahl.
2.)   Jquery: Foto-Show 2 (Lightbox-Foto-Gallery) - Startet auf Bild-Klick.
3.)   Jquery: Foto-Slideshow 3 (Elastislide) - Zeigt je nach Auflösung eine versch. Anzahl von Bilder in einem Schuber, welcher durch Pfeil-Klick die Bilder nach links verschiebt und somit weitere Bilder anzeigt um dann auf Ihren Bild-Klick das gewünschte Bild öffnet.

²= Objekt voran oder nach gestellt | Mit Pseudoelement 'before' bzw. 'after'. Vorteil: Die Angabe in der CSS-Datei hat Wirkung auf sämtliche HTML-Seiten. Somit könnnen Sie wie in diesem Fall das Kaffeetassen-Icon blitzschnell durch ein anderes Icon austauschen.

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

104

A Beautiful Day

Technik

Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
Mobile-First-Technik | Icon-Font: Font Awesome | Jquery: Lightbox-Foto-Gallerie
Schrift:'Open Sans Condensed'.
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.

Besonderheiten

Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
Auf jeder Seite andere Fotos im Kopf-und Fussbereich.
Icon-Abschnittstrenner erhält links und rechts vom Icon eine dekorative Linie bis an den Rand.
Animierte CSS-Buttons: Hintergrundfarbe füllt den Button bei Mausberührung ausgehend von der Mitte nach beiden Seiten aus.

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