Bildergalerie

Die HTML-Struktur

In dieser Aufgabe wird die Bildergalerie aus der Vorlesung nachgebaut. Die Bilder und deren Thumbnails finden Sie hier zum Download.

Bauen Sie die Bildergalerie aus der Vorlesung nach. Die Seite besteht aus folgenden Bestandteilen:

Roter div-Bereich, der die gesamte Bildergalerie umfasst.
Darin enthalten: der blaue div-Bereich, der die Thumbnails enthält.
Jeder Thumbnail steht in einer eigenen (grünen) div-Box.
Die Thumbnail-Box ist ein Link, der als Inhalt das jeweilige Thumbnail-Bild und zusätzlich das Bild-Element selbst enthält. Die Zieladresse im Link ist die aktuelle Seite.
Die Bilder selbst werden beim Klick auf einen Thumbnail in der absolut positionierten (violeten) Box angezeigt. Dazu werden sie jedoch als Inhalte des Links (Geschwister-Elemente des Thumbnail-Elementes) in HTML hinterlegt.

Insgesamt brauchen Sie für diese Aufgabe die folgende Grundstruktur für Ihr HTML-Dokument:

<div>
	<div>
		<div class="bild">
			<a href="#">
				<img class="thumbnail" src="thumbnails/img1.jpg">
				<img id="img1" class="original" src="img/img1.jpg">
			</a>
		</div>
		...
	</div>
</div>

Das Layout

Layouten Sie die Seite anhand der folgenden Vorgaben. Testen Sie die Auswirkungen jedes Schrittes im Browser. Gehen Sie zum nächsten Schritt immer erst, nachdem Ihre Seite wie in der zugehörigen Abbildung aussieht.

Verkleinerte, absolut positionierte Bilder.
Um das Layout der Seite besser zu sehen, begrenzen Sie die Größe der Bilder und positionieren diese absolut:
```
.original {
	position: absolute;
	left: 70px; 
	bottom: 60px;
	height: 270px;
}
```
Feste Größe der Bildergalerie.

Roter div-Bereich: dieser Bereich muss eine feste Breite und Höhe haben. Wählen Sie die Größen so, dass die Bilder und der Thumbnail-Bereich reinpassen, z.B. 500px und 350px.
Positionierung der Thumbnails.
Blauer div-Bereich: die enthaltenen Thumbnails sollen nebeneinander stehen. Modellieren Sie dafür die blaue Box am besten als eine Flexbox mit einer Breite von 60%. Positionieren Sie ihre Inhalte so, dass zwischen den Thumbnail-Bildern kleine Zwischenräume entstehen:
```
body>div>div{
	border: 1px solid blue;
	display: flex;
	justify-content: space-between;
	width: 60%;
} 
```
Größe der Thumbnails.

Die Thumbnails selbst sollen eine Größe von 26x26Pixel haben. Begrenzen Sie dafür sowohl die Größe der zugehörigen img- als auch der a-Elemente. Damit die a-Elemente ihre Inhalte vollständig umschließen, sollten sie zudem als Block-Elemente definiert werden (display: block;).
Positionierung der Thumbnails unten zentriert.

Positionieren Sie die Thumbnail-Bilder im unteren Bereich der roten Box. Definieren Sie dafür die rote Box als eine Flexbox. Ihre Inhalte sollten an der unteren Horizontalen ausgerichtet und horizontal zentriert werden.
Positionierung der Bilder in der Galerie.

Positionieren Sie die Bilder (Klasse original) innerhalb der roten Box. Dazu müssen Sie deren Positionierung auf relative setzen.
Ausblenden der Bilder.

Standardmäßig sind die großen Bilder (Klasse originalausgeblendet (display:none).
Einblenden der Bilder.

Beim Klick auf einen Thumbnail-Link wird das zugehörige Bild eingeblendet (display:inline). Es bleibt eingeblendet, solange der Benutzer kein weiteres Element anklickt (Zustände: active und focus).
Beim Klick auf einen Thumbnail-Link soll zudem die Umrandung des Links weiß eingefärbt werden. Beim Hovern soll sie grau werden, standardmäßig ist sie schwarz.
Lassen Sie zum Schluss die blaue und die rote Umrandung weg.