The Images of Truth

Bastet’s message gave you renewed courage—but also left you with a mission. “Sometimes, images speak louder than words,”
she said, just before the connection broke. With Tinker at your side, you set out toward a mysterious place mentioned only briefly in Bastet’s transmission—“The Gallery of Memories.”

The gallery lies deep within Greenwood Hollow, hidden between dense trees and moss-covered stone steps. When you finally arrive, it feels like you’ve stepped into another time. Floating picture frames hang suspended in the air, slowly turning and dancing with the wind.

Some images are crystal clear. Others vanish into a strange fog.
“This one,” Tinker chirps, projecting an image excitedly, “this is Bastet’s plan. She doesn’t want us to just hear the message of the resistance—she wants us to see it!” You examine the hovering images. Some tell stories. Others are distorted—chaotic, like half-remembered dreams.

“Organize the images,” Tinker says. “Arrange them so they bring clarity. And maybe… just maybe… we’ll uncover a secret Bastet left behind.” As you touch the frames, a hidden message reveals itself: “Use the power of images to show the truth. The enemy is blind to beauty—but the eyes of the rebels see clearly.”

The Gallery of Memories

Design the images in HTML and CSS with precision and care. Fill in the missing details and send them to Tinker—so the images appear in perfect harmony.

Solve the task here in the console [–> Open in a new tab]

HTML
<figure>
    <img src="img/bastet.jpg" alt="Bastet, die Hüterin" class="img-fluid">
    <figcaption>The last known picture from 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;
}
Scroll to Top