Update: This challenge has ended. Here are the solution and the next level of the challenge.


Here is level 2 of the challenge I launched last week: CSS at least one of each type (a, b, c and d) from the flags marked on the image below:

striped world flags with a few of them marked out (see below for list)

These are:

  • Bahamas 🇧🇸 (type b)
  • Benin 🇧🇯 (type a)
  • Czech Republic 🇨🇿 (type b)
  • Denmark 🇩🇰 (type d)
  • Finland 🇫🇮 (type d)
  • Kuwait 🇰🇼 (type c)
  • Madagascar 🇲🇬 (type a)
  • Sudan 🇸🇩 (type b)
  • Sweden 🇸🇪 (type d)
  • United Arab Emirates 🇦🇪 (type a)

You don't need to CSS any flags that are not in the list above and not even all that are not in the list above, just one of each type (one a-type flag, one b-type flag, one c-type flag and one d-type flag).

The constraints for this level are mostly the same as for the previous level:

  • CSS-only, no JS (and no SVG obviously)
  • only 1 div element per flag - no children and no pseudo elements
  • no external resources
  • no text content in the divs
  • no background images via url()
  • no border images
  • no more than 1 border/ border-*/ box-shadow/ background/ background-* rule in all the generated CSS code; the background is made up of a single linear-gradient() with less than 10 stops - this means the following are not allowed:
  #flag-0 { background: /* something */ }
#flag-1 { background: /* something else */ }

  .flag {
    background: linear-gradient(/* stuff */), 
        linear-gradient(/* different stuff */)
}

  #flag-0 { box-shadow: /* something */ }
#flag-1 { box-shadow: /* something else */ }

However, this is perfectly fine:

  .flag {
    border: /* some border value */;
    border-width: /* width overrides */;
    background: linear-gradient(/* stuff */);
    background-size: /* size */
}

This is the starting pen for this level, with the cleaned up result of the previous level. The flags to be coded have a skeleton like this:

  #benin { /* ========== LEVEL 2a ========== */
    --c0: #fcd116;
    --c1: #e8112d;
    /* side #008751 */
} /* Benin */

At the end of the day, you can take it just as a hint. You can fork my pen or start from scratch. You may change preprocessors or go vanilla, change selectors, add attributes, change the layout. It doesn't matter as long as the constraints above are met.

You can get the more info for the flags from the links in this Wikipedia list.

Good luck!

If this is too easy for you, come back on Friday for level 3! 😼


1,992 1 9