Homepagevorlagen - Templates

Webseiten 81-88

81 LA BELLA VITA



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

  • Halbkreis-Menü, transparent, bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Font-Icon-Tausch beim Menü.
  • CSS-Animation: Bildwechsler (Slideshow auch hinter dem Halbkreis-Menü ablaufend/durchscheinend)
  • CSS-Animation: Drehen - Unendlich (Kleines Sonnen-Icon dreht dezent, automatisch startend)
  • CSS-Animation: Slide-Top (Bei Mausberührung auf HP-Namen,1 x Durchlauf)
  • CSS-Animation: Drehen - 3 Rotationen (Bei Mausberührung auf Nach-Oben-Icon, 1 x Durchlauf)

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
82 My little Company



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: Smooth Scroll To Top.
  • Jquery: Lightbox-Foto-Gallerie.
  • 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 (bei mobilen Auflösungen).

Besonderheiten

  • Big Icon: Jede Seite erhält ein extra großes eigenes Icon als Seitentitel.

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



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.
  • Google-Webfonts: Schrift 'BUNGEE' und 'Source Sans Pro'.

Besonderheiten

  • Menü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Logo-und Fussbereich: Auf jeder Seite unterschiedliche Fotos.
  • Automatisch generiertes Textzeichen (hier der rote Punkt) auf jeder Seite nach der H1-Überschrift.1
  • CSS-Animation: DREHEN.
1= Autom. generiertes Textzeichen: Per Pseudoelement ":after" und ":before" können Textzeichen nach (after) oder vor (before) einem HTML-Element platziert werden. Der Vorteil: Eine Änderung des Textzeichens (hier der Punkt) oder dessen Formatierung (Farbe, Größe, Schriftart o.ä) brauchen nur einmal in der CSS-Datei geändert werden und wirken sich dann auf alle HTML-Seiten aus.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
84 Blue And Green



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

  • FLAT-DESIGN Flach, Minimalistisch.
  • Diagonale Schrägen nach oben und unten mit CSS-linear-gradient.
  • Runde Fotos mit CSS-border-radius.
  • Fest am oberen Rand positionierte Menü-Leiste (Scrollt nicht mit).
  • CSS-Animationen: Drehen, Slide-Top.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
85 Webstarter Into Space



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

  • Launcher: Diese Homepage dient als Startplatz für Social Media Seiten / Webseiten.
  • Jquery-Particles-Animation: Weltraum-Animation mit blinkenden und sich bewegenden Sternen.
  • CSS-Animation: Space-Shuttle-Flug.
  • CSS-Button-Animation: Icon-Tausch
  • CSS-Premium-Buttons bestehend aus zwei Objekten:
    -  Objekt 1: Das dem Button vorangestelltes Objekt ist ein Icon.
    -  Objekt 2: Der eigentliche Button präsentiert ein weiteres Icon nach dem Button-Linktext.
    -  Objekt 1 und Objekt 2 enthalten jeweils untersch. Icons, hier also bei 6 Buttons insgesamt 12 Stück.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
86 PSYCHOLOGY OF LOVE



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

  • Paginierung: Verlinkte Seiten-Numerierung unten.
  • Jquery: Foto-Slideshow.1 In Seitenleiste eingebaut.
  • Paper-Like-Cards.2
  • CSS-Animation: Heartbeat (Herzschlag).

1= Foto-Slideshow in Sidebar:
Oft sieht man eine Foto-Slideshow nur im Kopf-Bereich der Webseite. Hier mal in die Seitenleiste eingebaut.

2= Paper-Like-Cards:
Die Paper-Like-Card besteht hier jeweils aus einem Foto mit dazugehörigem Textfeld. Wir haben es jedoch auf der Startseite im Inhaltsbereich besonders spannend angelegt, das heißt, bei den 3 Cards wurde jedes der drei Textfelder separat farblich an das jeweilige Foto angepaßt, sprich es handelt sich dabei um die Hintergrund-und Textfarbe, die Überschrift, die Linkfarbe sowie die Icon-Farbe.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
87 Pleased To Present My Drawings

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


Technik

  • Flexibles Layout, d.h. die Breite ist in Prozent oder Pixel einstellbar.
  • NICHT-Responsive-Style, sondern Analog-Style

Besonderheiten

  • Bleistift-Look.
    Teilweise zerrissenes, großkarriertes Rechenpapier liegt über durchgehendem kleineren, gekachelten Rechenpapier. Zeichnen-Effekt (per Grafik-Programm) auf den Fotos.
  • 5 Seiten bereits verlinkt, jede Seite mit anderem Foto.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 29,--
 
88 RESPONSIVE ONEPAGER BEGINNERS
ONEPAGER & RESPONSIVE ANFÄNGER
+ Reduzierter Code
+ Leichteres Verständnis



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.
  • One-Pager: Die ganze Homepage besteht nur aus einer einzigen HTML-Seite.
  • Jquery: Smooth Scroll To Sections.

Besonderheiten

  • Dieses Template ist für Responsive Anfänger + für ONE-PAGER Anfänger.
  • Reduzierung auf das Wesentliche: Es gibt in dieser Vorlage keine Font-Icons, keine Google Webfonts, kein Grid-System für die Anordnung von Spalten oder horizontalen Bildreihen sowie keine Animationen (außer Smooth-Scroll). Es wurde außerdem verzichtet auf ein Toggle-Menü und ein Aufklapp-Menü. Weggelassen haben wir auch Transparenzen per CSS sowie auch Farbverläufe per CSS. Somit mag die Konzentrierung auf die Responsive-Technik sehr viel angenehmer und hoffentlich leichter zu verstehen sein. Denn dies ist bei dieser Vorlage unser primäres Ziel.
  • Plus Onepager Reduzierung: Verzicht: Wir haben hier keine sich per Klick öffnenden Box-Fenster (div-box) eingebaut, welche sich sonst oftmals bei Onepagern innerhalb der selben Seite öffnen.

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