Home. Welcome.

Das Layout

Die Idee

Im Head-Bereich oben sehen Sie drei Boxen nebeneinander stehend, jede Box hat ein animiertes Bild sowie einen Text unterhalb. Wie ist es animiert? Nun, es handelt sich um eine CSS Keyframes Animation, welche bei Start der Seite ausgelöst wird. Bei der Animation sprechen wir die "background-position" des Hintergrundbildes an und verändern diese für jede der drei Boxen anders.

So, jetzt wird es spannend, weil 'responsive': Bei kleineren Auflösungen wird der Platz für drei Boxen nebeneinander natürlich knapp und so blenden wir dann per CSS MEDIA-QUERIES unterhalb von 8-Zoll-Tablets (im Landscape-Modus, sprich Querformat) zwei Boxen aus (display:none) und es erscheint dort nur eine Box über die gesamte Breite. Nur zum Verständnis vielleicht noch eine weitere Erklärung: Bei einem 10-Zoll-Tablet im Portrait-Modus (hochkant) erscheint dann ebenfalls nur eine Box, erst wenn man das 10-Zoll-Tablet wiederum in den Landscape-Modus, sprich quer dreht, gibt es alle drei Boxen zu sehen (Einblendung mit: display:block) und bei allen größeren Auflösungen bis hin zum Desktop-PC sowieso.

Das Design

Dieses Template heißt 'Summer in Iceland'. Es ist responsive angelegt und enthält einige Animationen. Diese Animationen sind per CSS angelegt und es wird diesbezüglich keinerlei Javascript verwendet. Hier auf der Seite index4.html (Quartus) erfahren Sie , welche verschiedene Animationen es gibt und wie Sie allgemein auch die Animationen löschen können.


Kontakt und Info

(0000) 000-0000  
(+49) 0000-1234567  
(0000) 7654321-4141  
  info@muster-iceland.de
  12345 BigCity
  Musterstraße Nr. 23



Info2 Bella Ipsum


Two Pictures
Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

Two Pictures
Lorem sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.

One Picture
Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in. Vivendum invenire consetetur quo at, ex putant viderer nec, offendit inimicus gloriatur eos ei. Purto soleat causae ne sea, possit assentior sententiae no usu.



Bilder La Vida In Boxes


Four Pictures
Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.

Four Pictures
Lorem sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.

Four Pictures
Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in.

Four Pictures
Mala ipsum dolor eta gold, cu wisi efficiendi usu, eum oratio fierent petentium cu. In vel malis inani.



Info2 Isis Arkum


One Picture
Sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te. Vivendum invenire consetetur quo at, ex putant viderer nec, offendit inimicus gloriatur eos ei. Purto soleat causae ne sea, possit assentior sententiae no usu.

Two Pictures
Lorem sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.

Two Pictures
Bella ipsum amet, putant malorum civibus qui cu, eos te elit velit. Nam apeirian insolens in.




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.

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.





Latest Topic

One Picture
Pro id homero scaevola. Sed id lucilius voluptaria, duo ut meis euismod feugiat. Vix convenire dissentiet an, ad lorem quando. His ut tempor facete. Ei populo semper tamquam qui, ad dicit ridens indoctum mea. Sit inani vocent et, pri eu nisl solet. Laudem molestie has ei, vocibus philosophia quo ex. Id harum legendos has, quo nobis quando id. Id assueverit repudiandae neglegentur duo. Cum aperiri efficiendi interpretaris cu.
More





One Picture
Ut enim pertinacia duo, vim minim volumus ut. Reque oblique detracto an duo, pri ei autem falli vulputate. Eum amet regione ei. Vivendum invenire consetetur quo at, ex putant viderer nec, offendit inimicus gloriatur eos ei. Purto soleat causae ne sea, possit assentior sententiae no usu. Vis eu solet iracundia, te assum splendide vim. Nam nibh appetere definiebas an.
More



Impressionen

Einige Foto Eindrücke

Bei den Fotos auf den Seiten index2.html (Secundus), index3.html (Tertius), index5.html (Quintus) und index6.html (Sextus) zeigen wir Ihnen Beispiele für die Anordnung von 2 Fotos im Block, 4 Fotos im Block, 3 Fotos im Block und 1 Foto mit nebenstehendem Text.

Zoom-In-Animation rotierend

Bei Mausberührung bzw. Touch auf den Fotos der vorstehend genannten Links gibt es eine Animation wie folgt: Es erfolgt eine Vergrößerung sowie eine Rotation des Fotos. Da wir aber diese Animation innerhalb einer Box ablaufen lassen, wird daraus ein sich bewegender Zoom-In-Effekt.


Wonderful Nature. Summer in Iceland. Regione alterum eum ut, usu et unum iriure fuisset. Inani laboramus suscipiantur ut duo. Eum sint detracto at, doctus recusabo consequat nam ea.
© 2020  Summer in Iceland
(0000) 000-0000  
(+49) 0000-1234567  
(0000) 7654321-4141  
  info@muster-iceland.de
  12345 BigCity
  Musterstraße Nr. 23