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 The Red Couch - Das rote Sofa
+ ONE-PAGER
+ CSS-ANIMATION:
" KREISEN UM HAUPTMENÜ"
+ Full-Screen-Site
+ CSS-Box-Fenster



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

Besonderheiten

  • One-Pager:1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Animation KREISEN UM DAS HAUPTMENÜ. 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 UM DAS HAUPTMENÜ | 8 Objekte (Font-Icons) kreisen um einen Mittelpunkt. Diese CSS-Animaton ist ganz ohne Grafiken erstellt.

  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.

Noch eine Besonderheit: Die 8 Font-Icons 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-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,--
 
103 Booking Travel Ltd.


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

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Doppel-Transparenz mit 2 transparenten Ebenen ( beim Hauptmenü ) mit 'CSS-rgba'.
  • Toggle-Schalter mit Doppelfunktion.1 Klick auf Schalter wechselt zwischen Menü und Infofenster.
  • CSS-Animation: DREHEN ( automatisch startend ), drehend links-und rechtsherum.

1= Toggle-Schalter mit Doppelfunktion | Normalerweise hat ein Toogle-Schalter ja nur die Option AN und AUS (also z.B. bei Klick wird ein Menü eingeblendet, bei erneutem Klick ausgeblendet). Hier gibt es jedoch eine Doppelfunktion, d.h. bei Klick wird ein Infofenster eingeblendet und gleichzeitig das Menü ausgeblendet sowie bei erneutem Klick wird das Menü wieder eingeblendet und gleichzeitig das Infofenster ausgeblendet.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
104 In Summer At The Swimming Pool


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'.
  • Jquery Smooth Scroll. Animiertes Scrollen bei allen internen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--