CSS Battle #23 – Boxception

[piotrszymaniec]

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!

[piotrszymaniec]

1st try – 604.2 {478}

<div big>
  <div medium>
    <div small>      
    </div>  
  </div>
</div>
<style>
  body {   
    background:#F3AC3C;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  [big] {
    width: 200px;
    height: 200px;
    background:#1A4341;
    transform: scale(1, -1);
  }
  [medium] {
    width: 100px;
    height: 100px;
    background:#998235;
  }
  [small] {
    width: 50px;
    height: 50px;
    background:#F3AC3C;
    float:right;
  }
</style>

Change centering from flex to position – 605.23 {455}

<div big>
  <div medium>
    <div small>      
    </div>  
  </div>
</div>
<style>
  body {
    background:#F3AC3C;
    left: 92;
    top: 42;
    position:absolute;  
  }
  [big] {
    width: 200px;
    height: 200px;
    background:#1A4341;
    transform: scale(1, -1);
  }
  [medium] {
    width: 100px;
    height: 100px;
    background:#998235;
  }
  [small] {
    width: 50px;
    height: 50px;
    background:#F3AC3C;
    float:right;
  }
</style>

changed divs to p, a and i :) minified – 629.65 {273}

<p b><a m><i s></i></a></p><style>[s],body{background:#f3ac3c}a{display:block}body{left:92;top:42;position:absolute}[b]{width:200px;height:200px;background:#1a4341;transform:scale(1,-1)}[m]{width:100px;height:100px;background:#998235}[s]{width:50px;height:50px;float:right}