10/12/2024

<div class="con con1">
  <div class="box box1"></div>
  <div class="box box2">
    <div class="magic"></div>
  </div>
</div>
<div class="con con2">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
</div>
<style>
  body {
    margin: 0;
    background: #FADE8B;
  }
  .con {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .con1 {
    flex-direction: column;
    gap: 3.25rem;
  }
  .box {
    background: #C3463D;
    width: 8.75rem;
    height: 6.25rem;
    display: flex;
    justify-content: end;
  }
  .con2 {
    gap: 3.2rem;
  }
  .bar {
    background: #5DBCF9;
    width: 8.75rem;
    height: 11.25rem;
  }
  .box1 {z-index: 5}
  .box2 {z-index: 10}
  .bar1 {z-index: 5}
  .bar2 {z-index: 1}
  .magic {
    background: #5DBCF9;
    height: 4rem;
    width: 2.75rem;
  }
</style>