CSS Flags
Build the following flags in pure HTML and CSS, no images allowed. No need to make them responsive. The "aspect ratios" listed below refer to the height:width aspects. E.g. France ๐ซ๐ท is 2:3, so if you make it 200px in height, it should be 300px in width. With Germany ๐ฉ๐ช (3:5), 200px height would be 333px in width (200px ร 5 รท 3 = 333.3333px).
Required
- France
- Blue: #002495
- White: #FFFFFF
- Red: #ED2938
- Aspect Ratio: 2:3
- Germany
- Black: #000000
- Red: #DE0002
- Yellow: #FFCE00
- Aspect Ratio: 3:5
- Madagascar
- White: #FFFFFF
- Red: #FC3E32
- Green: #007E39
- Aspect Ratio: 2:3
- Switzerland
- White: #FFFFFF
- Red: #FF0002
- Aspect Ratio: 1:1
- Sweden
- Blue: #0269A6
- Yellow: #FECC00
- Aspect Ratio: 5:8
- Gambia
- Red: #CE1127
- White: #FFFFFF
- Blue: #0D1D8B
- Green: #3B7827
- Aspect Ratio: 2:3
- Japan
- White: #FFFFFF
- Red: #BC022C
- Aspect Ratio: 2:3
- Niger
- Orange: #E15307
- White: #FFFFFF
- Green: #10AF2A
- Aspect Ratio: 6:7
- Belize (just kidding)
Extra challenge
Only do these if you felt like the required ones were pretty easy. If you struggled with the required ones, don't let these ones hold you back from moving forward in the curriculum.
- Tonga
- Red: #C20002
- White: #FFFFFF
- Aspect Ratio: 1:2
- Greece
- White: #FFFFFF
- Blue: #0E5FAE
- Aspect Ratio: 2:3
- Maldives
- Red: #D31133
- Green: #007E39
- White: #FFFFFF
- Aspect Ratio: 2:3
Problem Solving
Each flag is easiest organized in code as a container with children. Nesting divs is a common HTML practice.
<div class="container">
<div class="color-one"></div>
<div class="color-two"></div>
</div>
Use the position
css property as a last resort. Width, height, and nesting your elements thoughtfully will get you a long way.
display: inline-block
will be important to give to elements you are trying to control the width of.