CSS Battle #67 – Video Reel

[Narigo]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[curiosdevcookie]

Code Source – score {character count}

<main>
  <!-- Row 1 -->
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <!-- Row 2 -->
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <!-- Row 3 -->
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
</main>

<style>
  body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
 main {
    display: grid;
    grid-template-columns: 45px 140px 140px 45px;
    gap: 70px 10px;    
    background-color: #5DBCF9;
    }

.grid-item {
    width: 100%;
    height: 110px; 
    background-color: #191919;
}

.grid-item:nth-child(even) {
  margin-top: -80px;
}

.grid-item:nth-child(odd) {
  margin-top: -30px;
}
</style>

[Narigo]

Ok, repeat(4, ...) doesn't work with 100%... :( So I did it like you @curiosdevcookie ! Thanks!

Code Source – 611.65 {371}

<r></r><r></r><r></r><r></r>
<r></r><r></r><r></r><r></r>
<r></r><r></r><r></r><r></r>
<style>
  r {
    display:grid;
    background: #191919;
    height: 110px;
  }
  r:nth-child(even) {
    margin-top:-50px;
  }
  body {
    background: #5DBCF9;
    display: grid;
    grid-template-columns: 45px 140px 140px 45px;
    gap: 40px 10px;
    margin:-30px 0;
  }
</style>

[david-001]

The beginner's strategy.

Code Source – 600 {2490}

<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>
<div class="b8"></div>
<div class="b9"></div>
<div class="b10"></div>
<div class="b11"></div>
<div class="b12"></div>

<style>
  body{
    margin:0;
    padding:0;
    position: relative;
    background-color: #5DBCF9;
  }
  .b1{
    position: absolute;
    background-color: #191919;
    width: 45px;
    height: 80px;
    top: 0px;
    right: 355px;  
  }
  .b2{
    position: absolute;
    background-color: #191919;
    width: 45px;
    height: 110px;
    top: 120px;
    right: 355px;  
  }
  .b3{
    position: absolute;
    background-color: #191919;
    width: 45px;
    height: 110px;
    top: 270px;
    right: 355px;  
  }
  .b4{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: -80px;
    right: 205px;  
  }
  .b5{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: 70px;
    right: 205px;  
  }
  .b6{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: 220px;
    right: 205px;  
  }
  .b7{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: -30px;
    right: 55px;  
  }
  .b8{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: 120px;
    right: 55px;  
  }
  .b9{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: 270px;
    right: 55px;  
  }
  .b10{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: -80px;
    right: -95px;  
  }
  .b11{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: 70px;
    right: -95px;  
  }
  .b12{
    position: absolute;
    background-color: #191919;
    width: 140px;
    height: 110px;
    top: 220px;
    right: -95px;  
  }
</style>

[meg-gutshall]

I wanted to do fancy flexbox things, but decided to follow in @david-001's footsteps.

ps and divs – 604.71 {466}

<div f>
  <p>
  <p>
  <p>
</div>
<div s>
  <p>
  <p>
  <p>
</div>
<div t>
  <p>
  <p>
  <p>
</div>
<div l>
  <p>
  <p>
  <p>
</div>
<style>
  * {
    background: #5DBCF9;
    position: relative;
  }
  p {
    background: #191919;
    width: 140;
    height: 110;
    margin: 0 0 40 10;
  }
  [f] {
    top: -38;
    left: -113;
  }
  [s] {
    top: -538;
    left: 37;
  }
  [t] {
    top: -938;
    left: 187;
  }
  [l] {
    top: -1438;
    left: 337;
  }
</style>

Minified code – 629.37 {274}

<div f><p><p><p></div><div s><p><p><p></div><div t><p><p><p></div><div l><p><p><p><style>*{background:#5DBCF9;position:relative}p{background:#191919;width:140;height:110;margin:0 0 40 10}[f]{top:-38;left:-113}[s]{top:-538;left:37}[t]{top:-938;left:187}[l]{top:-1438;left:337