# CSS Battle: #8 - Forking Crazy


In this article, I will solve a [Forking Crazy](https://cssbattle.dev/play/8) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/8) first.



## Problem 

We need to create the following container by using CSS Properties only:
![Forking Crazy](https://cssbattle.dev/targets/8.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML


```html
<div class="root"></div>
<div class="slot"></div>
<div class="point"></div>
<div class="handle"></div>
```

### CSS

Now let's style the containers. 

```css
body {
  margin: 0;
  background: #6592cf;
  display: grid;
  place-items: center;
}
.root {
  position: absolute;
  width: 140;
  height: 190;
  background: #060f55;
  border-radius: 0 0 100px 100px;
  margin-top: 10;
}
.slot {
  width: 20;
  height: 100;
  background: #6592CF;
  z-index: 1;
  border-radius: 0 0 100px 100px;
  margin:20 0 0 0;
  box-shadow: -40px 0 0 #6592CF, 40px 0 0 #6592CF;
}
.point {
  width: 20;
  height: 20;
  background: #060F55;
  border-radius: 10px;
  transform: translate(-60px, -190px);
  box-shadow : 40px 0 0 #060F55, 80px 0 0 #060F55, 120px 0 0 #060F55; 
}
  
.handle{
  position: absolute;
  bottom:0;
  width: 20;
  height:60;
  background: #060F55;
}
```

>*Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*

### Codepen 

%[https://codepen.io/j471n/pen/vYmKVvd]

### Timelapse on YouTube

%[https://youtu.be/fmDgipKUBPc]

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.

