Big City Walk A Responsive Template

- Home
- Primus
- Secundus
- Tertius
- Quartus
- Quintus
- Sextus

# Home. Welcome.

## Das Layout

### Das Design

Dieses Template heißt BIG CITY WALK. Es ist responsive angelegt und enthält viele Animationen. Diese Animationen sind per CSS angelegt und es wird diesbezüglich keinerlei Javascript verwendet. Oben sehen Sie eine CSS-Fotoschau, also einen Bildwechler. Hier auf der Seite index4.html (Quartus) erfahren Sie welche weiteren Animationen es gibt.
Außerdem erklären wir Ihnen dort, wie Sie Einstellungen zur Transparenz vornehmen können. (Gemeint sind die beiden Felder über der Fotoschau in Transparent-Schwarz und Transparenz-Rot).

> Black. Red. Grey. White.
> Die klassische Farbkombination , wie in den Printmedien, so auch beim Webdesign

### Klassische Farben

Schwarz, Weiß und Rot werden gerne in den Print-Medien verwendet. Denke Sie an Ihre Tageszeitung. Rot wird dabei meist dezent eingesetzt für Unterstreichungen oder kleinere Überschriften. Klar ist so eine tolle Farbkombination auch für das Webdesign geeignet. Hierzu passen auch wunderbar Grau-Töne, sowohl helle als auch dunkle.

## Unser Team

### ...stellt sich vor

Christine. Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.
Kathrin. Alea dolor sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.
Sabine. Ipsum dolor sit amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in.
Mary-Jane. Orka dolor sit amet, cu wisi efficiendi usu, eum oratio fierent petentium cu. In vel malis inani.

## Impressionen

### Einige Foto Eindrücke

Bei Mausberührung bzw. Touch auf den Fotos gibt es eine Animation wie folgt: Es wird ein Textfeld über das Foto (gedacht für ergänzende Infos) sowie auch ein Lupen-Symbol eingeblendet. Das Lupen-Icon, welches übrigens wiederum selbst auch bei Mouseover animiert ist, deutet an, daß das Foto auch größer zu sehen ist.
Sie sehen es, wenn Sie den erscheinenden Text oder die Lupe klicken. Das Foto öffnet sich dann in einem neuen Browserfenster, dadurch das beim Link ein "target-Befehl" (blank) gesetzt wurde. Möchten Sie, daß das Foto im selben Browserfenster öffnet, entfernen Sie einfach den entsprechenden target-Befehl in der HTML-Datei.
Foto-Nr. 55 883 401
Von: Name Bildautor
Kategorie: Lorem Ipsum
Four Pictures. Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.
Foto-Nr. 55 883 402
Von: Name Bildautor
Kategorie: Lorem Ipsum
Four Pictures. Lorem sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.
Foto-Nr. 55 883 403
Von: Name Bildautor
Kategorie: Lorem Ipsum
Four Pictures. Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in.
Foto-Nr. 55 883 404
Von: Name Bildautor
Kategorie: Lorem Ipsum
Four Pictures. Mala ipsum dolor eta gold, cu wisi efficiendi usu, eum oratio fierent petentium cu. In vel malis inani.

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

> Today. Tomorrow. Next Year.
> Die Media Queries sind der Schlüssel

### So testen Sie

Diese Responsive-Vorlage verwendet keinerlei Javascript. Weder für die Navigation noch für das Ansprechen der CSS-Media Queries bei älteren Browsern, noch für die Animationen. 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ü (Primus bis Sextus) haben wir bereits beispielhaft verlinkt. Dort erwarten Sie mehr Informationen bzw. andere Ansichten.
Liste mit eigenem Aufzählungszeichen, hier ein Font-Icon, nicht verlinkt:

- Curabitur
- Ullamcorper
- Magna
- Aenean

Liste mit eigenem Aufzählungszeichen, verlinkt, animiertes Font-Icon bei Mausberührung:

1. Primus
2. Secundus
3. Tertius
4. Quartus

So, wir wünschen Ihnen viel 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.
This is BIG CITY WALK
A nice place
© 2040 Big City Walk

- Impressum
- Datenschutz
- Disclaimer