Homepage Vorlagen - Templates

Webseiten 33-40

33 SMARTSURFGO WEBHOSTING


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

  • Jquery - Animate Elements when they come into view -.
    Wir präsentieren Ihnen in diesem Template eine spektakuläre responsive SCROLL-IN-Animation:
    Objekte werden erst animiert, wenn diese durch Scrollen im Viewport sichtbar werden.
    Also erst wenn man in einen bestimmten Abschnitt hineinscrollt, wird die Animation (z.B. Hineinfliegen der Objekte in die Seite) für diesen Bereich ausgelöst.
    Probieren Sie diesen Profi-Effekt aus. Als Animationen stehen zur Verfügung: Einblenden oder Hineinrollen jeweils aus allen Richtungen, Shake (Schütteln) sowie viele andere. Wir erklären es Ihnen innerhalb dieses Templates in einem kleinen Tuturial auf der dortigen Seite 'Quartus'.
  • CSS Pricing Tables. Zwei verschieden formatierte sog. Preis-Tabellen, welche natürlich auch ohne Preisangabe, nämlich als Produktvergleich dienen können und auch oft so angewendet werden.
    Bonus: Eine der Tabellen-Spalten enthält einen sog. Ribbon-Effekt, d.h. eine dekorative Schleife mit Text, hier oben rechts innerhalb der Spalte angeordnet, um das ökonomisch beste Angebot direkt hervorzuheben.
  • Jquery responsive Slider (Bildwechsler) in FULLSCREEN Ansicht. Die animierte Slideshow startet zunächst automatisch, läßt sich aber auch manuell über die Pfeile steuern, alternativ auch über Thumbnails (kleine Vorschau-Bilder). Auf jeder HTML-Seite sehen Sie im Beispiel unterschiedliche Fotos in unterschiedlicher Anzahl.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
34 We All Like Coffee Time


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

  • Verschiedene Kaffee-Farben: Die Farbe PERU ist natürlich auch dabei.
  • CSS-Ausleuchtung von Objekten: Die Bilder im Inhaltsbereich plus die Box mit dem Homepagenamen besitzen einen Lichtteffekt per CSS und erhellen damit den Hintergrundbereich.
  • Menü-Button, fest positioniert: D.h, dieser ist beim Scrollen immer im sichtbaren Bereich des Browser-Fensters.
  • CSS-Animation: Menü dreht von 180 Grad auf 0 Grad und währendessen werden die Links nacheinander mit kleiner Verzögerung eingeblendet.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
35 UP TO THE TOP
+ ONE-PAGER
+ 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 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

  • One-Pager: 1 Alle Inhalte innerhalb einer HTML-Seite.
  • Jquery Smooth Scroll To Sections: 2
  • Viele Box-Fenster: Eine Javascript-freie Lösung, welche Info-Fenster als div-Box innerhalb der selben Seite öffnet.
  • Fixierte Menü-Leiste Menü scrollt als nicht mit, sondern ist fix positioniert

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= 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,--
 
36 LECKER, FRISCH & GESUND


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

Besonderheiten

  • Flat-Design.
  • Zweite Version inklusive als Non-Flat-Version.1
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Icon-Font-Tausch: Im Hauptmenü wird ein Icon-Font ( Fontawesome ) durch ein anderes gewechselt.

1= Zweite Version | Hier kommen dann Farbverläufe, Box-und Textschatten zum Einsatz. Wie Sie diese zweite Version innerhalb weniger Sekunden aktivieren können beschreiben wir Ihnen im Template. Es ist somit eine sehr einfache Möglichkeit das Design ohne großen Aufwand kurzfristig je nach Wohlfühlgefühl, Jahreszeit oder Mode zu wechseln.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
37 The Babies Playground
+ ONE-PAGER
+ Font-Icons-Pyramide
+ Italic-Schriftschnitt
+ Boys & Girls-Farben



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: 'Old Standard' und '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.

Besonderheiten

  • Spezielle Schriftschnitte: Hier spezieller, schicker Italic-Schriftschnitt 1.
  • One-Pager: Alle Inhalte innerhalb einer HTML-Seite angelegt.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Boys and Girls - Farben: Lightskyblue und Lightpink werden hier vereinigt.
  • Font-Icons-Pyramide: Hier werden 6 einzelne (Würfel-) Icons zu einer Pyramide aufgebaut.
  • CSS-Animation: Font-Icon-Tausch. Vorder-und Rückseite der Würfel-Icons werden bei Mausberührung getauscht. Oh, das ist ja interessant, wussten Sie, das eine Addition der Würfelzahlen von Vorder-und Rückseite eines Würfels immer die Zahl Sieben ergibt?
  • CSS Box-Fenster: Eine Javascript-freie Lösung, welche Fenster als div-Box innerhalb der selben Seite öffnet.

1= Fonts/Spezielle Schriftschnitte | Bei einem Italic-Schnitt hat der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt. Wenn aber dieser Italic-Schnitt nicht vorhanden ist (sondern nur der reguläre Schnitt), stellt der Browser auch bei der Anweisung 'font-style: italic' die Schrift einfach nur programmatisch schräg. Schauen Sie sich hier einmal die wunderschönen geschwungenen Linien der Schrift 'Old Standard' an,, welche wir ja bereits installiert haben, dann wird der Unterschied vielleicht deutlicher und was wir damit meinen.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
38 Wunderschöne Natur


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

  • CSS-Perspektivisch schräg gestellte Objekte wie Buttons, Fotos und Texte.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
39 Black Couch + Green Palms


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. Beispiel: Der Nach-Oben-Scroll-Pfeil.

Besonderheiten

  • Viele Fotos durch Bild-Leiste im Kopfbereich und im Fussbereich machen das Template dekorativ.
  • Schwarzes Sofa - Grüne Palme = Die Farbkombi Grün + Schwarz gilt als klassisch und ist kein Zufall, denn diese ist längst im kollektiven Bewusstsein der Menschheit angekommen. Nicht umsonst wählen fast alle Firmen auf der gesamten Erde ganz unbewußt, aber wie selbstverständlich in ihren Büros diesen Kontrast, nämlich indem Sie ein schwarzes Sofa neben eine grüne Palme stellen.
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
40 IN THE OFFICE


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

  • Auf jeder Seite ein anderes Foto - Das schafft Struktur und macht jeden Link sozusagen unverwechselbar .
  • Menü zeigt schliessende + öffnende Ordner-Icons - passend zum Thema 'Office' .
  • H2-Überschrift zeigt oberhalb ein Büroklammer-Icon plus Linie1 - passend zum Thema 'Office' .

1= Überschrift mit Font-Icon plus Linie links + rechts davon | Oberhalb jeder H2-Überschrift sehen sie eine Linie mit einem Font-Icon, hier eine Büroklammer. Dies wurde angelegt mit dem CSS-Pseudoelement ':after bzw. :before'

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