Mission 21: Painting the Cosmos
First, create the planet itself. The mural is currently a blank `<div>`.
00:00
Mission Objective
Target the `#mural`. Give it a `width` and `height` of `200px` and set `border-radius: 50%;` to make it a circle. Then, give it a `background` of `radial-gradient(circle, blue, navy)` to simulate a planet.
Step 1 / 3
System Briefing: Creative Protocol
The mess hall on deep space station Elysium is a windowless, gray room. You've volunteered to create a "digital mural" on its main wall screen, but the terminal is restricted—you can only use one <div> and a stylesheet. This mission tests your creative mastery of CSS properties to create art from code.
Key Artistic Tools
radial-gradient: A powerful function for thebackgroundproperty that creates gradients radiating out from a center point. You can layer multiple gradients to create complex patterns like continents and oceans.box-shadow: Not just for shadows! You can create multiple, comma-separated "shadows" with no blur and different offsets to create shapes or, in this case, a starfield.::before&::after: Pseudo-elements that let you create two extra "virtual" elements that you can style independently from the main element. They are essential for creating complex shapes from a single HTML element.