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.