• Theory
  • Theory

Challenge: Satellites

The final challenge is another puzzle requiring you to blend colors. You need to create a simplified model of the planetary satellites of the solar system.

As usual, the entire layout is ready. We even have the gradients and background colors themselves, but they have been mixed up and you need to put them back in their proper order.

Each satellite consists of two to three gradients or solid backgrounds. Most of the gradients are semi-transparent, and when they are overlapped they produce interesting effects.

The CSS comment describes 15 colors and gradients that need to be distributed among the satellites. To make it easier to match colors, write down the satellite numbers that you find directly in the comments.

Colors for solid backgrounds: #dddddd, #ffdc00.

Gradient backgrounds: gradient no.1, gradient no.2, gradient no.3, gradient no.4, gradient no.5, gradient no.6, gradient no.7, gradient no.8, gradient no.9, gradient no.10.

And, by the way, the order of the background colors for the same object matters.

  • index.html
HTML
HTML

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Granny Muffin

Easy there, pal!

To access the Linear Gradients challenges in the Advanced styling, you need to sign up and subscribe first.