Прохождение пазла на флотах на 100%

Курсы §15. Сетки
1

Прохождение пазла на флотах на 100%
result https://htmlacademy.pp.ua/puzzle
codepen https://codepen.io/matviy/pen/povKNWO
github https://github.com/MatviyRoman/htmlacademy

<!DOCTYPE html>
Испытание: пазл на флоатах 
  <div class="block5"></div>
  <div class="block7"></div>
  <div class="block3"></div>
  <div class="block1"></div>
  <div class="block4"></div>
  <div class="block6"></div>
  <div class="block7"></div>
  <div class="block2"></div>
  <!--
  Вставляйте дивы с классами
  от block1 до block8 в определённом порядке
  <div class="block1"></div>
  -->
</div>
<a href="https://matviy.pp.ua">Roman Matviy front-end developer</a>
<br>
<a href="https://htmlacademy.pp.ua">htmlacademy</a>
html, body { margin: 0; padding: 0; } 
body {
  width: 400px;
  height: 300px;
}

.puzzle {
  width: 300px;
  margin: 0 auto;
  padding-top: 5px;
}

.puzzle div {
  margin-right: 5px;
  margin-bottom: 5px;
}

.block1 {
  float: left;
  width: 70px;
  height: 220px;
  background-color: skyblue;
}

.block2 {
  float: right;
  width: 220px;
  height: 70px;
  background-color: skyblue;
}

.block3 {
  width: 70px;
  height: 70px;
  background-color: purple;
}

.block4 {
  float: left;
  width: 70px;
  height: 145px;
  background-color: tomato;
}

.block5 {
  float: right;
  width: 70px;
  height: 145px;
  background-color: tomato;
}

.block6 {
  float: right;
  width: 70px;
  height: 70px;
  background-color: gold;
}

.block7 {
  float: right;
  width: 145px;
  height: 70px;
  background-color: lightgreen;
}

.block8 {
  float: left;
  width: 145px;
  height: 70px;
  background-color: lightgreen;
}