Homepagevorlagen - Templates

Webseiten 73-80

73 FERIENWOHNUNG HAUS SEEBLICK



Homepage Vorlage , templates , Homepage-Vorlagen, free download
Homepage Vorlage , templates , Homepage-Vorlagen, free download
Homepage Vorlage , templates , Homepage-Vorlagen, free download





  • Responsive Webdesign: Anpassung/Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC.
  • Mobile-First-Technik.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' 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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • Geometrische Form ( Kleines Dreieck, als Pfeil fungierend ) auf Fotos gelegt1 und nur mit CSS erstellt .
  • Transparenz ( mit CSS-rgba ). Dieser Farbfilter2 macht möglich, das die Schrift auf jedem Foto gut lesbar ist.

1= Das kleine Dreieck: Es ist nach oben gerichtet wie eine Art Pfeil, dabei am Fuße der jeweiligen Fotos im Inhaltsbereich platziert, auch responsive angelegt und stellt deshalb insbeondere bei Smartphone Auflösungen (wenn alle Fotos wegen des geringen zur Verfügung stehendes Platzes untereinander angeordnet werden) sicher, das Bild und der jeweilige Bildtext leichter als zusammenhängend erkannt werden. | Der Clou: Bei höheren Auflösungen wird dieses Dreieck nicht mehr benötigt und abgeschaltet (display:none).

2= Transparenz/Farbfilter: Im Gegensatz zum etwas leichter zu handhabenen CSS-Befehl 'opacity', welcher auch eine Transparenz ermöglicht, wird beim CSS-Befehl 'rgba' die Schrift auf dem Objekt nicht auch gleichzeitig mit einer Transparenzstufe versehen. Beim 'rgba-Befehl' können Sie Farbe und Deckungsgrad einstellen. Je nach Foto ( falls Sie Ihres einfügen wollen ) oder Geschmack kommt man somit mit einer Schwarz-Transparenz (wie hier in diesem Template) oder einer Weiß-Transparenz bestens aus. Die Schrift, egal mit welcher Schriftfarbe hebt sich somit immer von den Farben des Fotos ab. Wer es noch individueller oder perfekter mag, wählt gar eine ganz andere Farbe.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
74 BIG CITY WALK

Technik



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

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Transparenz Mit CSS-Opacity und CSS-rgba.
  • CSS-Animation: Bildwechsler / Fotoschau (im Kopfbereich, startet automatisch)
  • CSS-Animation: Einblenden-Effekt + Textüberlagerung 1 (bei Mouseover auf den Fotos)
  • CSS-Animation: Gummiband-Effekt (bei Mouseover auf den runden Fotos)
  • CSS-Animation: Wählscheibe-Effekt 2 (bei Mouseover auf den Icons im Kopfbereich)
  • CSS-Animation: Beben-Effekt (bei Mouseover auf dem Homepage-Namen)
  • CSS-Animation: Slide-Left-Effekt + Farbänderung von Schrift und Font-Icon (bei Mouseover im Haupt-Menü)
  • CSS-Animation: Schwingen-Effekt + Farbänderung Hintergrundfarbe (bei Mouseover auf den Zitat-Feldern)
  • CSS-Animation: Slide-Right-Effekt + Farbänderung Font-Icon (bei Mouseover auf den Listen im Text)
  • CSS-Animation: Perspektivisches Wenden -startet automatisch- ( auf Foto im Text)
  • CSS-Animation: Drehen (bei Mousover auf Icons im Text)

1= Einblenden/Textüberlagerung: Es wird ein Textfeld über das Foto eingeblendet (für 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.

2= Wählscheibe: Viertel-Drehung nach rechts, dann Viertel-Drehung nach links bei schnellem Durchlauf /
Dauer: 0.7sek / Ablauf 2x bei Mausberührung

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
75 Website Launcher SNOWY 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.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

Besonderheiten

  • Jquery-Schnee-Animation: Schneefall, welcher dank entsprechendem Hintergrundbild noch realistischer wirkt und gar eine meditative Wirkung hat. Schauen Sie 30 Sekunden und versprochen, Sie werden auch eine Entspannung bemerken.
  • Launcher: Diese Homepage dient als Startplatz für mehrere Ihrer anderen Webseiten.
  • CSS-Animation: Schlittschuh-Läufer (Icon) läuft am unteren Rand der Seite (autom. startend).
  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • CSS-Premium-Buttons.
    1.)  Buttons haben jeweils ein vorangestelltes eigenes Objekt, somit individuell formatierbar.
    2.)  Unser Design für dieses Template: Jeder Button erhält ein unterschiedliches Icon.
    3.)  CSS-Animation beim Icon: Pop-Up-Effekt + Icon-Tausch.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
76 Die Welt ist bunt
+ Farbleitsystem
+ ONE-PAGER
+ Smooth-Scrolling-To-Sections
+ Längere Linkwörter
+ 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.
  • One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
  • Jquery: Smooth Scroll To Sections.
  • Jquery Smooth Scroll To Top.
  • Jquery: Lightbox-Foto-Gallerie.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.
  • Google-Webfonts: Extra breite Schrift 'Bungee', zu sehen beim Homepage-Namen.
  • 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.
  • CSS-Menü-Animation: Hineingleiten des Menüs (bei mobilen Auflösungen).

Besonderheiten

  • Farbleitsystem: Jeder Link im Menü führt zu einer entsprechenden Farbe im Abschnitt des Inhaltsbereichs.
  • Lange Linkwörter: Platz für längere Link - außerdem geht ein Link zudem über zwei Zeilen.
  • CSS-Only-Fenster mit Toggle-Schalter: Fenster öffnen sich als div-Box innerhalb der selben Seite ohne Javascript.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
77 Style & Emotions



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

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Farb-Tipp: "TEAL".
    Kennen Sie schon die Farbe "TEAL"?
    Dann schauen Sie hier einmal und genießen den dezenten Schick, der sich insbesondere mit der Farbe Schwarz ergibt. Klassisch macht diese Farbkombination Sinn, denken Sie an grüne Palme, die neben einer schwarzen schicken Leder-Couch platziert ist. Zeitlos. Denn dies ist seit Jahrzehnten in Büros und privaten Wohnungen gebräuchlich.
  • Diagonaler (45Grad) Streifen-Hintergrund ohne Grafik (CSS-linear-gradient).
  • Fixierter Background Seite scrollt also über den Hintergrund.
  • CSS-Animationen: Schwingen, Hoch-Schrauben (= Drehen + Slide-Top - bei Mouseover auf den Fuss-Icons).

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
78 THE COFFEE LOUNGE



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.
  • Google-Webfonts: Schrift 'Open Standard'

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Google-Webfonts. Hier spezieller, schicker Italic-Schriftschnitt1.
  • CSS-Animation: DREHEN.

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 bei der Schrift an, dann wird der Unterschied vielleicht deutlicher und was wir damit meinen.


    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
79 Imaginibus-Media



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.
  • Jquery: Lightbox-Foto-Gallerie. Alle Gallerie-Fotos komplett innerhalb eines neuen Fensters durchsehen bzw. Vor-und Zurück-Schalten.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt '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.
  • CSS-Menü-Animation: Hineingleiten des Menüs.

Besonderheiten

  • Foto-Präsentation. Alle Fotos auf der Startseite bis an den Rand gezogen sowie enthaltend Fototitel.
  • CSS-Animation beim Toogle-Schalter. Der Info-Button gleitet aus der Seite hinaus und gibt dann einen einem Schließen-Button frei.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
80 We Take Care



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.
  • Google-Webfonts: Schrift 'Open Sans' und 'Roboto Light'.

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Geometrische Formen: Das Menü besteht aus einem Rechteck, einem Kreis, zwei Halbkreisen und einem Dreieck.
  • CSS-Animation: Pendel-Effekt1, startet automatisch und schwingt meditativ wie eine Glocken-Schwing-Bewegung.
  • CSS-Animation: Menü dreht bei Mausberührung von vertikal in die horizontale Lage.
  • CSS-Animation Dreh-Effekt plus Move-Effekt auf den Social Media Icons (Startet automatisch).
    - Jedes zweite Icon dreht sich dabei andersherum und bewegt sich in entgegengesetzter Richtung.
    - Jedes Icon innerhalb der Liste hat eine andere Farbe.

1= Pendel-Effekt.
Der Effekt läuft innerhalb (CSS-overflow:hidden) einer halbransparenten Box (CSS-rgba) ab und ist hier auf den Slogan-Spruch gelegt. Auf jeder Seite haben wir einen anderen Slogan-Text platziert. Optisch unterstützt wird der Effekt noch durch einen kleinen, farbigen und mitschwingendem Kreis, welcher an den Text-Beginn des Slogans gelegt ist.


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