Homepagevorlagen - Templates

Webseiten 105-112

105 An der Küste - At The Coast
+ ONE-PAGER
+ Jquery-Slideshow
+ Full-Screen-Site
+ CSS-Box-Fenster



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ü bei mobilen Auflösungen zunächst zu verstecken.

Besonderheiten

  • Jquery: Slider (Automatischer Bildwechsler). Hier mit über 20 Fotos - RESPONSIVE und BILDSCHIRMFÜLLEND, damit Sie genau sehen, wie es funktioniert - sowohl bei kleinen (mobilen) als auch hohen Auflösungen. Inklusive alternativer Steuerung per Pfeile oder 'Thumbnails'. Bildunterschrift als Text bei jedem Foto der Slideshow möglich.
  • One-Pager:1 Alle Inhalte innerhalb einer HTML-Seite.
  • Full-Screen-Site. 2
  • 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 div-Boxfenster innerhalb der selben Seite aufgerufen werden.

2 = 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,--
 
106 Holz, Leder & Stein
+ ONE-PAGER
+ Jquery-Slider
+ CSS-Animationen
+ CSS-Box-Fenster



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: 'Roboto Light'.
  • Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein animiertes 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ü bei mobilen Auflösungen zunächst zu verstecken.

Besonderheiten

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • CSS-Action-Buttons ( Start/Angebot ) : 2 Lösen eine Aktion an prominenter Stelle ( Kopfbereich ) aus.
  • CSS Box-Fenster: Eine Javascript-freie Lösung, welche Fenster als div-Box innerhalb der selben Seite öffnet.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery-Bildwechsler, responsive: 2 x im Inhaltsbereich, unterschiedlich variert.
  • Jquery Smooth Scroll To Sections: Animiertes Angleiten der Link-Sprungziele
  • CSS-Animation: Kamera-Effekt. 3 Fotos werden horizontal, vertikal und diagonal abgefahren.
  • CSS-Animation: CSS-Streifen-Hintergrund-Pattern 4 wird animiert.

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 innerhalb einer Seite die verschiedenen Sektionen aufgerufen werden. Wichtiger Bestandteil eines One-Pagers ist das Smooth-Scroll-To-Sections sowie das Öffnen von (div-)Boxfenstern innerhalb der selben Seite für weiteren Inhalt.

2= CSS Action-Buttons | Act.Button-1 (Start) springt per Smooth-Scroll an den Anfang der Seite. Und Act.Button-2 (Angebot) öffnet ein CSS-Fenster. Gerne können Sie natürlich auch andere Aktionen für diese beiden Action-Buttons wählen.

3= CSS-Animation Kamerafahrt | Beim Abschnitt 'Information' sehen Sie unsere CSS-Keyframes-Animation, welche automatisch startet. Hier werden bei den Blöcken 1, 2 und 3 Hintergrundbilder unterschiedlich animiert und zwar bewegt sich das entsprechende Bild vertikal von links nach rechts, horizontal von unten nach oben und diagonal von oben links nach rechts unten. Und jeweils wieder zurück und von vorn beginnend.

4= CSS-Animation von CSS-Hintergrund-Pattern | Schauen Sie beim Abschnitt 'Kontakt' und Sie sehen einen CSS-Hintergrund mit verschieden breiten und colorierten Streifen. Diesen haben wir in der Art animiert, das sich nicht nur die Breite der Streifen ändert sondern auch deren Farben von 'Burlywood' nach 'Peru'. Wie immer können Sie natürlich auch ihre Lieblingsfarben verwenden, hier haben wir uns thematisch an holzähnliche Farben gehalten. Animationen dieser Art sieht man öfter im Fernsehen, insbesondere bei Nachrichten-Sendungen, es mag an der edlen Wirkung verbunden mit moderner, dynamischer Optik liegen, aber machen Sie sich doch selber einen Eindruck.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
107 Flat Designed One-Pager With Big Animated Icons
+ ONE-PAGER
+ Big Icons Animated
+ Smooth-Scrolling-To-Sections
+ Box-Fenster



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 To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein animiertes 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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Big Icons. Jeder Abschnitt im Inhaltsbereich enthält ein extra großes dekoratives Icon.
  • CSS-Animationen: Alle BIG ICONS 2 verschieden animiert (Kreisen, Pendeln, Wenden, Verschieben).
  • Section-Number: 3 Jeder Abschnitt (Section) erhält bei mobilen Auflösungen eine Orientierungsnummer.
  • Fixierte Menü-Leiste Menü scrollt also nicht mit, sondern ist fix positioniert
  • Jquery Smooth Scroll To Sections: Animiertes Angleiten der Link-Sprungziele.
  • Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.

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 innerhalb einer Seite die verschiedenen Sektionen aufgerufen werden. Wichtiger Bestandteil eines One-Pagers ist das Smooth-Scroll-To-Sections.

2= Big Icons | Die Icons sind ohne Grafik erstellt und jeweils verschieden per CSS animiert, wobei diese Animationen automatisch starten und dank der niedrig eingestellten Geschwindigkeit sehr dezent ablaufen, es handelt sich um die sog. Font-Icon-Schrift 'Fontawesome', so das Sie gerne auch leicht andere Icons verwenden können. Hier haben wir die Icons mal besonderns groß gemacht, jedoch sind Größe und Farbe beliebig zu ändern.

3= Section Number | Die bei jedem Abschnitt sichtbare Ziffer oben links ist eine wichtige Orientierungshilfe gerade bei mobilen Auflösungen. Da die Links im Menü ebenfalls eine Ziffer vorangestellt haben, erkennt man sofort welchen Abschnitt man nach Klick angleitet (Smooth-Scroll). Hinweis: Bei größeren Auflösungen haben wir diese Ziffer über die CSS-Media-Queries ausgeblendet (display:none}

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
108 Hopeful Stars In The Sky


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 Sterne.
  • Jquery Smooth Scroll To Top.
  • 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 Sterne würden sich gfls. auch über ihre Fotos legen. Übrigens kann man per Klick auf das Foto jeweils mehr Sterne generieren oder per Mausberührung die Sterne verschieben. 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 und vieles mehr. .
  • Auf jeder Seite ein anderes Foto im Kopfbereich mit darüberliegendem animierten Sterne-Script.
  • Name und Menü-Button, fest positioniert: D.h, dieser bleibt 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,--
 
109 START-UP!


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: 'EB-Garamond' und 'Quicksand'.
  • 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

  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • CSS-Animation: Perspektivisches Wenden - startet automatisch - ( auf Fotos im Text)
  • CSS-Animation: Einblenden-Effekt + Textüberlagerung 1 (bei Mouseover auf den Fotos)
  • CSS-Animation: Gummiband-Effekt (bei Mouseover auf dem Homepage-Namen)
  • CSS-Animation: Scale-Vergrößern-Effekt (bei Mouseover auf einigen runden Fotos)
  • CSS-Animation: Slide-Right-Effekt + Farbänderung Font-Icon (bei Mouseover auf den Listen im Text)
  • CSS-Animation: Drehen, schnell (bei Mousover auf Icons )
  • CSS-Animation: Drehen, langsam (bei Mousover auf einigen runden Fotos )
  • CSS-Animation: Drehen + Verkleinern (bei Mousover auf Icons )
  • CSS-Animation: Wählscheibe-Effekt (bei Mousover auf Lupe-Icon und Schraubenschlüssel-Icon )

1= Einblenden/Textüberlagerung | Es wird ein Textfeld über das Foto eingeblendet (für ergänzende Infos zum Foto) sowie auch ein Lupen-Symbol (für eine grössere Foto-Ansicht bei Klick). Das Lupen-Icon ist auch animiert. Bei "mouseout" (Verlassen des Bereiches mit der Maus) wird das Textfeld (mit Text und Font-Icon "Lupe") dann ausgeblendet und das Bild dafür wieder eingeblendet.

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


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

  • Seitentitel. 1 Auf jeder Seite ein anderes Font-Icon.
  • CSS-Halbkreise 2 werden zu einen Kreis zusammengefügt. Diese haben zwei unterschiedliche Farben -klar, denn andernfalls würde man ja nur einen Kreis statt zweier Halbkreise erkennen- und werden im Beispiel sowohl vertikal aus auch horizontal angelegt.
  • Strukturierte Abschnitte 3 ( mit CSS-Strukturpseudoklassen ) . Tutorial anbei.

1= Seitentitel | Auf jeder Seite ein anderes Font-Icon als Seitentitel, dekorativ innerhalb eines CSS-Halbkreises angeordnet sorgt für Ordnung und nimmt die Farbe des Inhaltsbereichs auf.

2= CSS-Halbkreise | Ein Halbkreis enthält Text und der andere Halbkreis enthält ein Font-Icon, beide werden zu einem Kreis geschlossen und es ergibt sich somit ein modernes Element, das grafisch wirkt, jedoch komplett ohne Grafik auskommt.

3= Strukturierte Abschnitte | Auf der Startseite sehen Sie bei diesem Template im Inhaltsbereich einige Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, erklären wir Ihnen in diesem Template in einem kleinen Tutorial zum Thema 'CSS-nth-child'.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
111 Safety Security Industry


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: 'ROBOTO LIGHT' 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.
  • Jquery Smooth Scroll To Top. Button, welcher erst später beim Scrollen eingeblendet wird und ein animiertes Hoch-Scrollen zum Kopf-Bereich der Webseite ermöglicht.
  • Jquery Smooth Scroll. Animiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen.

Besonderheiten

  • CSS extra aufwendig gestaltete Icons (Font Awesome).
  • Warn-Farben: Gelb, Schwarz, Orange.
  • Foto-Galerie auf der Startseite ist randlos, die Fotos sind also effektvoll bis an den Rand gezogen und bei Mausberührung werden die Fotos schräg gestellt, jedes zweite Foto dabei in die entgegengesetzte Richtung.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
112 Business, Personal & Private


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

Besonderheiten

  • Mit vorgeschalteter Startseite.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Transparenz ( mit CSS-rgba ). | Fixierter Background
  • HTML-Anker: Innerhalb der Unterseiten werden die Links per sog. Html-Anker angesprungen.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--