Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#canvas {
  width: 400px;
  height: 400px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}

#first-row {
  height: 75%;
  width: 100%;
}

#big-rectangle {
  height: 100%;
  width: 75%;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.right {
  float: right;
}

.black {
  background-color: black;
}

.yellow {
  background-color: yellow;
}

#first-divider {
  height: 100%;
  width: 3%;
}

#second-divider {
  height: 3%;
  width: 100%;
}

#first-column {
  height: 100%;
  width: 22%;

}

#first-medium-rectangle {
  height: 48.5%;
  width: 100%;
}

#second-medium-rectangle {
  height: 48.5%;
  width: 100%;
}

#second-row {
  height: 3%;
  width: 100%;
}

#third-row {
  height: 22%;
  width: 100%;
}

#last-column {
  height: 100%;
  width: 5%;
  }

#first-rectangle {
  height: 43%;
  width: 100%;
}

#second-rectangle {
 height: 14%;
  width: 100%;
}

#third-rectangle {
  height: 43%;
  width: 100%;
}

#middle-big-rectangle {
  background-color: lightblue;
  width: 67%;
  height: 100%;
}

#divider-jos {
  height: 100%;
  width: 3%;
}

#divider-jos-stanga {
  height: 100%;
  width: 3%;
}

#left-rectangle {
  width: 22%;
  height: 100%;
}
</style>
</head>
<body>
  <div id="canvas">
    <div id="first-row">
      <div id="big-rectangle" class="red right"></div>
      <div id="first-divider" class="black right"></div>

    <div id="first-column" class="right ">
      <div id="first-medium-rectangle"></div>
      <div id="second-divider" class="black"></div>
      <div id="second-medium-rectangle"></div>
    </div></div>
    <div id="second-row" class="black"></div>
    <div id="third-row">
      <div id="last-column" class="right">
        <div id="first-rectangle"> </div>
        <div id="second-rectangle" class="black"></div>
        <div id="third-rectangle" class="yellow"></div>
      </div>
      <div id="divider-jos" class="black right"></div>
      <div id="middle-big-rectangle" class="right">
      </div>
      <div id="divider-jos-stanga" class="black right"></div>
      <div id="left-rectangle" class="blue right"></div>
    </div>
  </div>


<script id="jsbin-source-css" type="text/css">#canvas {
  width: 400px;
  height: 400px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}

#first-row {
  height: 75%;
  width: 100%;
}

#big-rectangle {
  height: 100%;
  width: 75%;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.right {
  float: right;
}

.black {
  background-color: black;
}

.yellow {
  background-color: yellow;
}

#first-divider {
  height: 100%;
  width: 3%;
}

#second-divider {
  height: 3%;
  width: 100%;
}

#first-column {
  height: 100%;
  width: 22%;

}

#first-medium-rectangle {
  height: 48.5%;
  width: 100%;
}

#second-medium-rectangle {
  height: 48.5%;
  width: 100%;
}

#second-row {
  height: 3%;
  width: 100%;
}

#third-row {
  height: 22%;
  width: 100%;
}

#last-column {
  height: 100%;
  width: 5%;
  }

#first-rectangle {
  height: 43%;
  width: 100%;
}

#second-rectangle {
 height: 14%;
  width: 100%;
}

#third-rectangle {
  height: 43%;
  width: 100%;
}

#middle-big-rectangle {
  background-color: lightblue;
  width: 67%;
  height: 100%;
}

#divider-jos {
  height: 100%;
  width: 3%;
}

#divider-jos-stanga {
  height: 100%;
  width: 3%;
}

#left-rectangle {
  width: 22%;
  height: 100%;
}</script>
</body>
</html>