CSS Battle #142 – Curtains

[meg-gutshall]

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 {characters}</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 {characters}

your cssbattles code here!

[Arvind644]

Code Source – 615.51 {341}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body {
    display: flex;
    background: #4F77FF;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  div {
    width: 60;
    height: 200;
    background: #1038BF;
  }
  div:nth-of-type(even) {
    width: 20;
    background: #FFFFFF;
  }
</style>

[missatrox44]

Code Source – 623.14 {299}

<p b/>
<p w/>
<p b/>
<p w/>
<p b/>
<style>
  body {
    background: #4F77FF;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
[b] {
  width: 60;   
  height: 200;
  background: #1038BF;
  }
[w] {
  width: 20;
  height: 200;
  background: #FFF;
  }
</style>

[meg-gutshall]

First attempt – 634.87 {256}

<div></div>
<style>
  body {
    margin: 50px;
    background: #4F77FF;
  }
  div {
    width: 300px;
    height: 200px;
    background: repeating-linear-gradient(90deg, #1038BF 0 60px, #4F77FF 60px 80px, #FFF 80px 100px, #4F77FF 100px 120px);
  }
</style>

Refactored – 643.41 {233}

<style>
  * {
    margin: 25;
    background: #4F77FF;
  }
  body {
    width: 300;
    height: 200;
    background: repeating-linear-gradient(90deg, #1038BF 0 15vw, #4F77FF 15vw 20vw, #FFF 20vw 25vw, #4F77FF 25vw 30vw);
  }
</style>

[MohcineDev]

Code Source – score 607

<div><a></a></div>
<style>
*{
  background-color:#4F77FF;
}
div,div::after,div::before{
  position:absolute;
  content:"";
  height: 200px;
  background:#4F77FF;
  width:60px;
}
div {
  width: 300px;
  top:50;
  left:50;
  background: #1038BF;
}
div::before{
  left:60;
}
div::after {
  left:180;
}
a::before,a{
  position:absolute;
  background:#FFF;
  height:200px;
  width:20px;
}
a{
  left:80;
}
a::before{
  content:"";
  left:120;
  z-index:1;
}
</style>