Flag 1

by Alexus fox

HTML

<div id="flag-container">

  <div id="col-left">

    <div id="col-mid"></div>
    <div id="tol-left">
      <div id="rol-left"></div>
      <div id="sol-left"></div>
       <div id="sol-bottom"></div>
           <div id="sol-mid"></div>
       
    </div>
  </div>
  <div id="col-right">
      <div id="col-right">
    
    
    
    
  </div>
</div>

CSS

/* Box-sizing */

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}

#flag-container {
  position: realative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: purple;
}

#col-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: #00bfd4;
}

#tol-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 100%;
  background:#f01bad;
}
#rol-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 100%;
  background:purple;
}

#sol-left {
  position: absolute;
  top: 0;
  width: 90%;
  height: 20%;
  background:#00bfd4;
}
#sol-bottom {
  position: absolute;
bottom: 0;
  width: 90%;
  height: 50%;
  background:#00bfd4;
}

#sol-mid {
  position: absolute;
bottom: 0;
  width: 90%;
  height: 25%;
  background:purple;
}
#col-mid {
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  height: 100%;
  background: #f01bad;
}

#col-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: orange
}
#tol-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: orange
}