【HTML/CSS】ブロック要素から文字をはみ出して、特殊なレイアウトを構築！

はじめに

一見するとかなり難しそうな構成のWebページとなっているが、、、重要なのは下記の２点
・ブロック要素から文字をはみ出させる
・空白のブロックを使う

これらを意識してやれば、そこまで難しくなかったです。

前提

・bootstrap4を使用（ほんの一部）
・display: flex;を理解している

コード全て

 <div class="flexParent animation01">
        <div class="animationNum01 animationNum">
          01
        </div>
        <div class="animationText01 aniText">
          <ul>
            <li>・ああああああああああああああああああああああ</li>
            <li>・いいいいいいいいいいいいいいいいいいいいいいい</li>
          </ul>
        </div>
      </div>

      <div class="flexParent animation02">
        <div>
          <div class="animationEmpty01">
           </div>
            <div class="flexParent animation03">
              <div class="animationNum01 animationNum">
                03
              </div>
              <div class="animationText03 aniText">
                <ul>
                  <li>・ううううううううううううううううう</li>
                  <li>・ええええええええええええええええええええええええ</li>
                </ul>
              </div>
            </div>
        </div>

        <div>
          <div class="text-center">
            <img src="img/main.png" alt="">
          </div> 
          <div class="flexParent animation04">
            <div class="animationNum01 animationNum">
              04
            </div>
            <div class="animationText04 aniText">
              <ul>
                <li>・おおおおおおおおおおおおおおおおおおおおお</li>
                <li>・っっっっっっっっっっっっっっっっっっっっっっk</li>
                <li>・aaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="animationNum02 animationNum">
          02
        </div>
        <div class="animationText02 aniText">
          <ul>
            <li>・bbbbbbbbbbbbbbbbbbb</li>
            <li>・cccccccccccccccccccccccccccccc</li>
            <li>・ddddddddddddddddddddddddddddddddddddddddd</li>
          </ul>
        </div>
      </div>

.animation01 {
  width: 600px;
  margin: 0 0 25px 0;
}
.aniText {
  border-left: solid 2px #41A849;
  height: 100%;
}
.animationNum {
  padding-right: 10px;
  font-size: 48px;
}
.animationNum02 {
  height: 265px;
  width: 90px;
  margin-left: 25px;
}
.flexParent {
  display: flex;
}
.flexParent ul {
  margin-bottom: 0;
  list-style: none;
  font-size: 15px;
  padding-left: 10px;
}
/*空白のブロック*/
.animationEmpty01 {
  width: 200px;
  height: 250px;
  margin: 0 6%;
}
.animationText03 {
  margin-right: 20px;
}
/*要素から文字をはみ出させる*/
.animation04 {
  margin-top: 28px;
  margin-left: 300px;
  margin-right: calc(((80vw - 100%) / 2) * -1);
}