The Desperate Gardener

After making the invisible box visible, you step through the barrier and reach Bastet’s symbol. Carefully, you place the fake note inside and watch as the box vanishes—as if it had never existed.

From a nearby hiding place, you hear Tharnok’s triumphant grunt as he discovers the decoy. You watch him disappear in the wrong direction and breathe a sigh of relief.

Help Milo, the Desperate Gardener

The gardener, Milo Tendertail, introduces himself with eyes full of light. His delicate frame reveals his excitement—for the garden beds must be laid out in just the right sizes, so the garden can flourish in perfect harmony.
With a gentle paw, he shows you how he envisions the layout of the beds. “Everything must be in balance,” Milo whispers with a contented smile,
“Only then can the garden truly bloom.”

Dimensions The Color Palette

Garden Plan

Design your magical garden by assigning the correct CSS codes to the different garden beds.
Work carefully, step by step, following the comments in the console.

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

CSS

.garden {
    width: 700px;
    margin: auto;
    background: rgb(180, 220, 180);
}

h2 {
    border: 2px solid darkolivegreen;
    color: #000000;
    background-color: rgba(255, 255, 255, 0.4);

}

/* Bees */
.bee {
    width: 15%;
    height: 35vh;
    font-size: 25px;
    background-color: #ffff8a;
}

/* Birds */
.bird {
    width: 10vw;
    height: 20vh;
    font-size: 1.5rem;
    background-color: hsl(0, 50%, 60%);
}

/* Butterfly */
.butterfly {
    width: 180px;
    height: 300px;
    font-size: 1.75em;
    background-color: hsl(190, 90%, 80%);
}

/* Flower */
.flower {
    width: 20%;
    height: 350px;
    font-size: 3ch;
    background-color: rgb(70, 190, 190);
}

/* Herb */
.herb {
    width: 120px;
    height: 200px;
    font-size: 1.25em;
    background-color: rgb(150, 220, 155);
}

/* Pumpkin */
.pumpkin {
    width: 15%;
    height: 350px;
    font-size: 0.9rem;
    background-color: #cb8b63;
}