Homepagevorlagen - Templates

Webseiten 97-104

97 Jüdische Gemeinde


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 | Jquery: Lightbox-Foto-Gallerie
  • Schrift: 'POIRET ONE'.
  • 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

  • Es soll pur und rein sein, der Blick richtet sich auf das Synagoge-Icon. Deshalb kein Foto im Kopfbereich.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • CSS-Box-Fenster + Anleitung dafür: Bei einigen Links/Buttons öffnen sich neue Fenster als eine Javascript-freie Lösung, welche Fenster als CSS-div-Box innerhalb der selben Seite öffnet.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
98 START A NEW CREATIVE PROJECT
Aufklapp-Menü
bestehend aus:
+CSS-ONLY
+ RESPONSIVE
+ TOUCH-FRIENDLY
+ KEIN JAVASCRIPT



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

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

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.

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


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 | 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 1.
  • 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()'

1= 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 39,--
 
100 BRÜCKEN - PONTS - BRIDGES


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 | 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 39,--
 
101 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 | 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 39,--
 
102 Women In The City


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 | 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ü.
  • 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 39,--
 
103 CAKES & COFFEE
JQUERY
3 x Foto-Show
+ ( Fotorama )
+ ( Lightbox )
+ ( Elastislide )



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

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

2= 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 39,--
 
104 Fresh Sea


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

  • CSS Farbverlauf von Türkis nach Blau über die ganze Seite.
    Bekannt sind diese bunten, vitalen und atmosphärisch sehr dichten Farbverläufe vom mobilen Betriebssystem ANDROID, längst wird es auch - um trendy zu sein - auf normalen Webseiten eingesetzt.
  • Auf jeder Seite andere Fotos im Kopfbereich, so das Sie gut sehen können, wie sich das diesmal halbransparente türkis-blaue Homepagenamen-Feld ( plus Icon und Action-Button ) sich den verschiedenen Hintergrund-Fotos, also gfls. auch Ihren, super anpasst.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--