Sweden Flag using CSS

This is the Sweden Flag using CSS. Here are the steps on how it's done:

  1. Create a blue rectangle with the proportions 5:8. This can be done as follows:
    HTML CSS
    <div id="flag_main"></div> #flag_main {
    position: relative;
    color: rgb(0,85,155);
    width: 800px;
    height: 500px;
    }

    Important Notes

    • The position of flag_main should be relative to allow flag_horizontal and flag_vertical to use absolute positioning.
    • flag_main is the main blue part of the flag.
    • rgb(0,85,155) is the blue color of the flag.
    • The flag proportions should be 5:8. You can use other sizes as long as they maintain this ratio.
  2. Create another rectangle for the yellow horizontal part of the flag:
    HTML CSS
    <div id="flag_horizontal"></div> #flag_horizontal {
    position: absolute;
    color: rgb(255,206,0);
    width: 800px;
    height: 100px;
    bottom: 200px;
    left: 0px;
    }

    Important Notes

    • flag_horizontal should be a child of flag_main to ensure proper positioning.
    • rgb(255,206,0) is the yellow color for the flag.
    • flag_horizontal is the yellow horizontal part of the flag.
    • The proportions for flag_horizontal should be 8:1.
  3. Finally, create the yellow vertical part of the flag:
    HTML CSS
    <div id="flag_vertical"></div> #flag_vertical {
    position: absolute;
    left: 200px;
    width: 100px;
    height: 500px;
    background-color: rgb(255,206,0);
    }

    Important Notes

    • Like flag_horizontal, flag_vertical should also be a child of flag_main.
    • rgb(255,206,0) is the same yellow color as flag_horizontal.
    • flag_vertical is the vertical yellow line on the left side of the flag.
    • The proportions for flag_vertical should be 1:5.

Thank you for listening to my presentation! :)