Top Company A Responsive Template
Home

Home. Introducing.

Das Layout

Das Design

Dieses Template heißt TOP COMPANY RESPONSIVE. Für dieses Template gibt es auch eine normale Version (Top Company) im Paket anbei, welche nicht responsive angelegt ist und somit für weniger Fortgeschrittene leichter zu bearbeiten ist. Mehr Info weiter unten in unseren Infoboxen. Please Click the link above for smooth scrolling downwards.

Abgerundetes Haupt-Menü

Das schicke Menü fügt sich effektvoll in das grosse Foto hinein. Auch Ihr Foto würde sich ggflls. hinter dieses bogenförmige Menü legen. Die Pfeile im Menü sind übringes Font-Icons, welche hier mit dem Pseudoelement ":after" angelegt wurden. Vorteil: Mit nur einer Änderung in der CSS-Datei tauschen Sie die Menü-Icons in allen HTML-Seiten auf einmal. Übrigens: Bei Mausberührung erfolgt ein Icon-Tausch.


Die Technik

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

Responsive testen.

Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.


Die Info

Bereits verlinkt

Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt. Für diejenigen, die mehr Links benötigen, haben wir in der "Sidebar" rechts ein zweites Menü eingebaut, welches beliebig erweiterbar ist. So, wir wünschen Ihnen viel Spaß und vor allem viel Erfolg mit diesem Template.

Smooth-Scroll

Oberhalb des Fussbereichs gibt es einen 'Nach-Oben-Pfeil', welcher die Scroll-Aktion sanft gleitend, also per Smooth-Scroll ausführt. Dieses wurde mit einem Jquery-Script getätigt. Ebenso verhält es sich mit dem Beispiel-Link 'Mehr Info' zu sehen relativ oben im Inhaltsbereich. Auch dieser nutzt das Smooth-Scrolling-Script, mit welchem sie somit auch jeden anderen beliebigen Abschnitt, der eine CSS-ID enthält, unkompliziert angleiten lassen können. Halt wie ein normaler HTML-Anker, nur hier eben mit Jquery-Unterstützung für das animierte Gleiten.


Liste mit eigenem Aufzählungszeichen, hier per Font-Icon:
  • Curabitur
  • Ullamcorper
  • Magna
  • Aenean

Nachstehend zwei Info-Boxen.

Info Box 1

Flexible Box. Schließt bei unterschiedlich langem Inhalt bei nebeneinander liegenden Boxen trotzdem in gleicher Höhe ab. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Info Box 2

Hier auf index6.html erwartet Sie eine kleine technische Übersicht. Praesent abhorreant vim at. Et quaerendum accommodare qui. Vix malis fierent an, viris timeam cum at. Ut nam mutat nominati eu. Id qui dicam habemus constituam. Cu est zril volutpat aliquando. Usu iuvaret lucilius an, vim cibo invenire patrioque eu dicit. At sea facer deleniti sol.


Für diejenigen, die mehr Links benötigen, haben wir in der "Sidebar" rechts ein zweites Menü eingebaut, welches beliebig erweiterbar ist.

So, wir wünschen Ihnen jede Menge Spaß und vor allem viel Erfolg mit diesem Template. Ius ei eripuit torquatos neglegentur, viris nobis ut eos. Sed et dicat veniam, te eros dicant probatus mei.

Mei te eirmod splendide, est vidit altera tincidunt ei, novum democritum efficiantur id eos. Eos ex error aliquip ullamcorper, discere maiestatis reformidans.

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Navigation 2nd


Vero Eos

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Agua liquid dolor sit amet. Magna dias es bella terra mi sol.

Social Media



Kontakt

Tel: +49 089 12345 67
Fax: +49 089 12345 68
infokontaktmail@muster.de

Legal Conditions


Find Us

Ron Robertson
Roxanne Street 12
GB - London
© 2040 Top Company Responsive