Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#vaszon{
  width: 500px;
  height: 500px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}
#first-row{
  height: 60%;
    width: 100%;
  ;
}
#big-rectangle{
  height: 100%;
  width: 25%;

}
.red{
  background-color: red;
}
.brown{
  background-color: brown;
}
.right{
  float:right;
}
.black{
  background-color:black;
}
#first-divider{
  height: 100%;
  width: 3%;
}
.left{
  float:left;
}
#first-column{
  height: 100%;
  width: 72%;
}
#first-medium-rectangle{
   height: 48.5%;
  width: 100%;
}

#second-divider{
  height: 3%;
  width: 100%;
}
#second-medium-rectangle{
   height: 48.5%;
  width: 100%;}
#second-row {
  height: 3%;
  width: 100%;
}
#third-row{
  height: 37%;
    width: 100%;
}
#last-column{
  height:100%;
  width:25%;
}
#first-small-rectangle{
  height: 45%;
  width: 100%;
}
#third-divider{
  height:10%;
  width:100%;
}
#second-small-rectangle{
  height: 45%;
  width: 100%;
}
.yellow{
  background-color:yellow;
}
#fourth-divider{
  height: 100%;
  width: 3%;
}
.blue{
  background-color:blue;
}
#blue-rectangle{
  height: 100%;
  width: 22%;
}
.green{
  background-color: green;
}
.white{
  background-color: white;
}
#white-rectangle{
  height: 100%;
  width: 47%;
}
#fifth-divider{
  height: 100%;
  width: 3%;
}
</style>
</head>
<body>
<div id = "vaszon">
  <div id = "first-row" class="brown">
    <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" class="green"></div>
    <div id ="second-divider" class="black"></div>
    <div id="second-medium-rectangle" class=" white " ></div>
  </div>
  </div>

  <div id="second-row" class="black"></div>

  <div id ="third-row">
    <div id="last-column" class="right">
      <div id="first-small-rectangle"></div>
    <div id ="third-divider" class="black"></div>
    <div id="second-small-rectangle" class="yellow"></div>
        </div>
    <div id="fourth-divider" class="black right">
    </div>
    <div id="white-rectangle" class="white right">
    </div>
   <div id="fifth-divider" class="black right">
     </div>
    <div id="blue-rectangle" class ="blue right">
</div>


<script id="jsbin-source-css" type="text/css">#vaszon{
  width: 500px;
  height: 500px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}
#first-row{
  height: 60%;
    width: 100%;
  ;
}
#big-rectangle{
  height: 100%;
  width: 25%;

}
.red{
  background-color: red;
}
.brown{
  background-color: brown;
}
.right{
  float:right;
}
.black{
  background-color:black;
}
#first-divider{
  height: 100%;
  width: 3%;
}
.left{
  float:left;
}
#first-column{
  height: 100%;
  width: 72%;
}
#first-medium-rectangle{
   height: 48.5%;
  width: 100%;
}

#second-divider{
  height: 3%;
  width: 100%;
}
#second-medium-rectangle{
   height: 48.5%;
  width: 100%;}
#second-row {
  height: 3%;
  width: 100%;
}
#third-row{
  height: 37%;
    width: 100%;
}
#last-column{
  height:100%;
  width:25%;
}
#first-small-rectangle{
  height: 45%;
  width: 100%;
}
#third-divider{
  height:10%;
  width:100%;
}
#second-small-rectangle{
  height: 45%;
  width: 100%;
}
.yellow{
  background-color:yellow;
}
#fourth-divider{
  height: 100%;
  width: 3%;
}
.blue{
  background-color:blue;
}
#blue-rectangle{
  height: 100%;
  width: 22%;
}
.green{
  background-color: green;
}
.white{
  background-color: white;
}
#white-rectangle{
  height: 100%;
  width: 47%;
}
#fifth-divider{
  height: 100%;
  width: 3%;
}
</script>
</body>
</html>