CSS Battle #8 – Forking Crazy

[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 {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!

[aishwarya-mali]

Using positions – 600.11 {860}

<div id="b">
  <div id="a"></div>
  <div id="a"></div>
  <div id="a"></div>
  <div id="a"></div>
</div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<style>
 body {
  background: #6592CF;
  display: grid;
  place-items: center;
  position: relative;
}
#b {
  display: flex;
  position: absolute;
  top: 42px;
}
#a {
  width: 20px;
  height: 120px;
  background: #060F55;
  margin: 0 10px;
  border-radius: 10px;
}
#c {
  width: 140px;
  height: 100px;
  background: #060F55;
  position: absolute;
  bottom: 42px;
  border-radius: 0 0 190px 190px;
}
#d {
  width: 20px;
  height: 100px;
  background: #060F55;
  position: absolute;
  bottom: -10px;
}
#e,#f,#g {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6592CF;
  position: absolute;
}
#f {
  left: 37%;
}
#g {
  right: 37%;
}
</style>

[meg-gutshall]

Using grid – 600.89 {641}

<div class=t></div><div class=s></div><div class=t></div><div class=s></div><div class=t></div><div class=s></div><div class=t></div><div class=b></div><div class=h></div>
<style>
  body {
    display: grid;
    grid-template: 100px 100px 50px / repeat(7, 20px);
    margin: 50px 130px 0;
    background: #6592CF;
  }
  div {
    width: 20px;
    height: 110px;
    background: #060F55;
  }
  .t { border-radius: 10px 10px 0 0; }
  .s {
    z-index: 1;
    background: #6592CF;
    border-radius: 0 0 10px 10px;
  }
  .b {
    width: 140px;
    height: 100px;
    border-radius: 0 0 70px 70px;
  }
  .h { grid-area: 3 / 4 / 4 / 5; }
</style>

[rmirville]

Using flex – 600.07 pts | 907 characters

<div id="t"><p></p><p></p><p></p><p></p></div>
<div id="pb"><p></p><p></p><p></p></div>
<div id="b"></div>
<div id="s"><p></p></div>
<style>
  body, #pb p {
    background: #6592CF;
  }
  body {
    padding: 42px 122px 0;
  }
  #t p, #pb, #b, #s p {
    background: #060F55;
  }
  p {
    display: inline-block;
    margin: 0;
    width: 20px;
    height: 100%;
  }
  #t, #pb, #s {
    display: flex;
  }
  #t {
    justify-content: space-between;
  }
  #t, #pb {
    height: 55px;
  }
  #t p {
    border-radius: 10px 10px 0 0;
  }
  #pb, #s {
    justify-content: space-evenly;
  }
  #pb p {
    border-radius: 0 0 10px 10px;
    z-index: 1;
  }
  #b {
    height: 0px;
    width: 0px;
    border-style: solid;
    border-color: #060F55;
    border-width: 0 0 140px 140px;
    border-radius: 0 0 100% 100%;
  }
  #b, #s {
    position: relative;
    top: -50px;
  }
  #s p {
    height: 50px;
  }
</style>

</style>