Die Bilder der Wahrheit

Bastets Botschaft hat dir neuen Mut gegeben, aber auch eine Aufgabe hinterlassen: „Bilder sprechen manchmal lauter als Worte,“ sagte sie, bevor die Verbindung abbrach. Mit Tinker an deiner Seite machst du dich auf den Weg zu einem geheimnisvollen Ort, der in Bastets Nachricht nur als „Galerie der Erinnerungen“ bezeichnet wird.

Tinker schwirrt aufgeregt um das Gerät, wie eine mechanische Hummel, und projiziert das Symbol des Widerstands an die Wand. „Bastet!“ rufst du, obwohl du ziemlich sicher bist, dass das Gerät nicht dafür gemacht ist, Gespräche in beide Richtungen zu führen. Aber Bastet spricht weiter, ohne sich von der Technik oder deinem Herzklopfen stören zu lassen: „Ich habe nicht viel Zeit. Cobols Maschinen sind näher, als du denkst. Du musst Greenwood Hollow sicherer machen – die Informationen, die ich dir sende, sind entscheidend.“

Das Hologramm flackert wie eine Flamme im Wind, bevor es eine Liste enthüllt, die so ordentlich ist, dass sie fast nach Bastets Handschrift riecht. „Nutze diese Listen,“ sagt sie. „Strukturiere die Informationen, bring Ordnung ins Chaos, und leite den Widerstand.“ Ihre Stimme wird leiser, als hätte sie sich durch den Äther zu weit vorgewagt, aber ihre letzten Worte treffen dich mitten ins Herz: „Worte können retten, aber nur, wenn sie verstanden werden.“

Tinker dreht sich triumphierend einmal um sich selbst und piept begeistert, bevor sie eine weitere Botschaft projiziert: „Bastets Pläne – priorisiere, liste, ordne. Listen sind die Schlüssel zu Klarheit und Strategie.“ Du schaust die Liste an, und obwohl sie nur aus Worten besteht, fühlt sie sich an wie eine Rüstung aus purem Optimismus.

Die Galerie der Erinnerungen

Gestalte die Bilder in HTML und CSS mit Präzision und Sorgfalt. Ergänze die fehlenden Details und übermittle sie an Tinker, damit die Bilder in perfekter Harmonie erscheinen.

Löse die Aufgabe hier in der Konsole [–> im neuen Tab öffnen]

HTML
<figure>
    <img src="img/bastet.jpg" alt="Bastet, die Hüterin" class="img-fluid">
    <figcaption>Das letzte bekannte Bild von Bastet.</figcaption>
</figure>

<img src="img/logo-flame.png" alt="Symbol des Widerstands" class="img-style">

<picture>
    <source srcset="img/forest-large.jpg" media="(min-width: 600px)">
    <source srcset="img/forest-small.jpg" media="(max-width: 600px)">
    <img src="img/forest-large.jpg" alt="Greenwood Forest" class="img-obj">
</picture>
CSS
body {
    font-family: 'Segoe UI', sans-serif;
    color: #333;
}

h1,
h2 {
    color: #ac3c13;
}

header {
    text-align: center;
}

main {
    max-width: 1200px;
    margin: auto;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-style {
    margin: 10px;
    filter: grayscale(100%) blur(7px);
    transition: 0.3s;
}

.img-style:hover {
    border: 5px solid red;
    border-radius: 10px;
    filter: none;
}

.img-obj {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
}

figure {
    margin: 20px auto;
}

figcaption {
    font-size: 0.9em;
    color: #555;
}
Nach oben scrollen