Update: This challenge has ended. You can find the solution at the end of this post.
Update 2 Level 2 of this challenge.
Up for a challenge? Well, I have one for you! CSS the following flags with 1
div per flag:
Oh, come on, Ana, this is not a challenge, it's easy and it's been done to death...
Hold on for just a moment, there are a few constraints:
maybe it goes without saying, but it should be CSS-only, no JS allowed (and no SVG obviously)
as mentioned previously, you are only allowed to use 1
divelement per flag - no children and no pseudo elements
you are not allowed to import any external resources
you are not allowed to have text content in your divs
you are not allowed to use any background images via
you are not allowed to use borders and shadows
in all your generated CSS (you may use any preprocessor you wish, this applies to the compiled code), you are only allowed to have 1
backgroundrule with 1
linear-gradient()with less than 10 stops
Confused? Here's the starting code. You may switch to plain HTML or any other preprocessor. You may add any other classes to the already existing ones and/ or any other attributes. For accessibility, in order to have less repetition in your CSS... You may use any other layout, my flex wrap kinda sucks anyway.
You don't need to do any flags that are not in the picture above. You don't even need to do all of those, just one per each direction and each number of stops.
Finally, the less code you need to do this, the better! 😼
You can get the specifications for the flags from the links in this Wikipedia list.
Too easy for you? Come back next week when I'll add level 2 to this challenge. 😼