Homepagevorlagen - Templates

Webseiten 97-104

97 ON THE ROAD AGAIN



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 CONDENSED'.
  • 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-Autobahn-Animation (Zweispurig mit entgegenkommender Verkehr)
    Auf einer von Wäldern begrenzten Autobahnstrecke fahren Autos von rechts nach links, ihnen kommen auf der Gegenfahrbahn andere Autos entgegen, die natürlich von links nach rechts fahren.
  • CSS-Bildwechsler (Im Inhaltsbereich)
  • Multipler CSS-Background

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



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 Condensed' und 'Poiret One'.
  • 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

  • Buchdruck (Emboss)- Text-Erhaben-Effekt beim Homepagenamen (mit CSS-textshadow)
  • Perspektivische Rotation , hier Schrägstellung (mit CSS-perspective/rotate)
  • Schrägen ohne Grafik: (mit CSS-linear-gradient).
  • Animation HEARTBEAT, Herzschlag | startet automatisch
  • Animation POSITIONSÄNDERUNG HINTERGRUNDBILD | startet automatisch )
  • Animation BLITZEN | startet automatisch )
  • Animation PERSPEKTIVISCHES WENDEN auf X und Y-Ebene
  • Animation ROTATION + VERKLEINERN BIS UNSICHTBAR
  • Animation ZOOM-IN + ROTATION, Reinzoom-Effekt weil Vergrösserung + Rotation innerhalb der Box abläuft
  • Animation SCALE, vergrössern
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON
  • Animation GUMMIBAND
  • Animation DREHEN, schnell
  • Animation DREHEN, langsam
  • Animation DREHEN + VERKLEINERN

    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.
  • Jquery: Lightbox-Foto-Gallerie.
  • 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. Annimiertes Scrollen bei allen Links möglich, denn der Link muß nur auf eine CSS-ID verweisen (Hier z.B. der 'Nach-Oben-Pfeil').
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'OPEN-SANS-CONDENSED' und 'BUNGEE'.

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

  • Transparenz ( mit CSS-rgba ) .
  • CSS-Animation: DREHEN.

    Privater Inhalt: Vorlage ist kostenlos
    Kommerzieller Inhalt: einmalig Euro 39,--
 
101 TOP COMPANY RESPONSIVE



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ü bei allen Auflösungen immer sichtbar: Also ohne den sog. Hamburger Button.
  • Font-Icon-Tausch im Menü bei Mausberührung.
  • Smooth-Scrolling unkompliziert bei jedem Link, welcher auf eine CSS-Id verweist.
  • Special Edition: Responsive-Version + NICHT-RESPONSIVE-Version im Paket.

    Homepage Vorlage , templates , Homepage-Vorlagen,  free download   2 für einen Preis: Die NICHT-RESPONSIVE-Version ist zusätzlich anbei.

    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.
  • 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.
  • CSS-Menü-Animation: Einblenden des Menüs.
  • Jquery: Lightbox-Foto-Gallerie.
  • Icon-Font: Font Awesome.
  • Google-Webfonts: Schrift 'Open Sans' im Schriftschnitt 'Light'.

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.
  • 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' 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: SLIDE-TOP plus DREHEN (bei Mausberührung).
  • Strukturierte Abschnitte: Mit CSS-Pseudo-Element 'nth-child(n)'.
  • CSS-Animation: DREHEN (automatisch startend), drehend links-und rechtsherum.
  • CSS-Animation: SLIDE-RIGHT (bei Mausberührung) auf den Buttons im Hauptmenü.

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 Our Latest Project



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

  • Individuelle Icon-Leiste 1 mit zwei Farbgruppen sowie spez. Icon-Design - hier am Fussende.
  • Sidebar - Seitenleiste 2 enthält mehrere Boxen.
  • Zitat 3, wechselnd auf jeder Seite mit anderem Spruch.
  • Kleines Logo-Symbol 4 eingearbeitet.
  • CSS-Animation: Vergrösserung ( Scale ) bei Mausberührung auf einigen Icons.

1= Spezielle Icon-Leiste:
Wir haben hier sozusagen die Icons von "Fontawesome" ein wenig 'getunt'. Denn die Icons werden nicht nur in zwei Farbgruppen von je 4 Icons unterteilt ( auch eine jeweils unregelmässige Anzahl mit mehr oder weniger Icons pro Gruppe ist möglich ), sondern die Icons bekommen auch eine abgerundete, quadratische Bauklötzchen-Form sowie auch einen leichten Farbverlauf als Hintergrund.

2= Sidebar:
Die Seitenleiste mit ihren vier Boxen bietet Platz für wichtige Informationen, wie Öffnungszeiten, Telefon-Nummern, ein weiteres Menü, ein Bild, einen kurzen Text zur jeweiligen Unterseite.

3= Zitat:
Das Zitat ( enthält links und rechts zwei Icon-Fonts als gut zu formatierende Apostroph-Zeichen ) wird bei mobilen Auflösungen ausgeblendet ( display:none ) um dort das Foto nicht zu sehr zu verdecken und ab mittleren Auflösungen wieder eingeblendet, da hier mehr Platz zur Verfügung steht. Bei hohen Auflösungen verändern wir zur Optimierung noch mal die Breite des Zitat-Feldes.

4= Logo-Symbol:
Hier ist es im Beispiel ein Icon-Font (Television). Man kann natürlich auch ein anderes Icon-Font wählen oder ein kleines Foto um das Logo darzustellen.


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