002.md

Target #2 (Carrom)

1° método

824 caracteres em 29/04/2024.

<div class="barra1"></div>
<div class="barrasobre1"></div>
<div class="barra2"></div>
<div class="barrasobre2"></div>
<style>
    body {
        background-color: #62374e;
    }
    .barrasobre1 {
        width: 300px;
        height: 50px;
        margin-top: 50px;
        margin-left: 42px;
        background: #fdc57b;
    }
    .barra1 {
        position: absolute;
        width: 200px;
        height: 50px;
        margin-left: 92px;
        background-color: #62374e;
    }
    .barrasobre2 {
        width: 300px;
        height: 50px;
        margin-top: 100px;
        margin-left: 42px;
        background: #fdc57b;
    }
    .barra2 {
        position: absolute;
        width: 200px;
        height: 50px;
        margin-top: 100px;
        margin-left: 92px;
        background-color: #62374e;
    }
</style>

2° método

360 caracteres em 14/05/2024.

<div class="superior"></div>
<div></div>
<div class="superior inferior"></div>
<div></div>
<style>
  body {
    margin: 0;
    background-color: #62374e;
  }
  div {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #fdc57b;
  }
  .superior {
    margin: 50px 196px 0 50px;
  }
  .inferior {
    margin-top: 96px;
  }
</style>

3° método

374 caracteres em 23/06/2024.

<div class="conjunto">
  <div class="objeto"></div>
  <div class="objeto"></div>
  <div class="objeto"></div>
  <div class="objeto"></div>
</div>
<style>
  body {
    margin: 50px;
    background: #62374e;
  }
  .conjunto {
    display: flex;
    flex-wrap: wrap;
    gap: 100px 200px;
  }
  .objeto {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
</style>

---

---

Link para Target #2 (Carrom) em CSSBattle.dev.