├── README.md
└── solutions
    ├── 1-pilot-battle
        ├── 1-simply-square.md
        ├── 10-cloaked-spirits.md
        ├── 11-eye-of-sauron.md
        ├── 12-wiggly-moustache.md
        ├── 2-carrom.md
        ├── 3-push-button.md
        ├── 4-ups-n-downs.md
        ├── 5-acid-rain.md
        ├── 6-missing-slice.md
        ├── 7-leafy-trail.md
        ├── 8-forking-crazy.md
        ├── 9-tesseract.md
        └── images
        │   ├── 1-simply-square.png
        │   ├── 10-cloaked-spirits.png
        │   ├── 11-eye-of-sauron.png
        │   ├── 12-wiggly-moustache.png
        │   ├── 2-carrom.png
        │   ├── 3-push-button.png
        │   ├── 4-ups-n-downs.png
        │   ├── 5-acid-rain.png
        │   ├── 6-missing-slice.png
        │   ├── 7-leafy-trail.png
        │   ├── 8-forking-crazy.png
        │   ├── 9-tesseract.png
        │   └── preview.png
    ├── 2-visibility
        ├── 13-totally-triangle.md
        ├── 14-web-maker-logo.md
        ├── 15-overlap.md
        ├── 16-eye-of-the-tiger.md
        ├── 17-fidget-spinner.md
        ├── 18-matrix.md
        └── images
        │   ├── 13-totally-triangle.png
        │   ├── 14-web-maker-logo.png
        │   ├── 15-overlap.png
        │   ├── 16-eye-of-the-tiger.png
        │   ├── 17-fidget-spinner.png
        │   ├── 18-matrix.png
        │   └── preview.png
    ├── 3-cursor
        ├── 19-cube.md
        ├── 20-ticket.md
        └── images
        │   ├── 19-cube.png
        │   ├── 20-ticket.png
        │   └── preview.png
    ├── 4-display
        ├── 21-sitepoint-logo.md
        ├── 22-cloud.md
        ├── 23-boxception.md
        ├── 24-switches.md
        ├── 25-blossom.md
        ├── 26-smiley.md
        ├── 27-lock-up.md
        ├── 28-cups-&-balls.md
        └── images
        │   ├── 21-sitepoint-logo.png
        │   ├── 22-cloud.png
        │   ├── 23-boxception.png
        │   ├── 24-switches.png
        │   ├── 25-blossom.png
        │   ├── 26-smiley.png
        │   ├── 27-lock-up.png
        │   ├── 28-cups-&-balls.png
        │   └── preview.png
    ├── 5-inline
        ├── 29-suffocate.md
        ├── 30-horizon.md
        └── images
        │   ├── 29-suffocate.png
        │   ├── 30-horizon.png
        │   └── preview.png
    ├── 6-conic
        ├── 31-equals.md
        ├── 32-band-aid.md
        └── images
        │   ├── 31-equals.png
        │   ├── 32-band-aid.png
        │   └── preview.png
    ├── 7-backface
        ├── 33-birdie.md
        ├── 35-ice-cream.md
        ├── 36-interleaved.md
        ├── 37-tunnel.md
        ├── 38-not-simply-square.md
        ├── 39-sunset.md
        ├── 40-letter-b.md
        ├── 41-fox-head.md
        └── images
        │   ├── 33-birdie.png
        │   ├── 35-ice-cream.png
        │   ├── 36-interleaved.png
        │   ├── 37-tunnel.png
        │   ├── 38-not-simply-square.png
        │   ├── 39-sunset.png
        │   ├── 40-letter-b.png
        │   ├── 41-fox-head.png
        │   └── preview.png
    ├── 8-transition
        ├── 43-wrench.md
        ├── 44-stripes.md
        └── images
        │   ├── 43-wrench.png
        │   ├── 44-stripes.png
        │   └── preview.png
    └── 9-margin
        ├── 46-mountains.md
        └── images
            ├── 46-mountains.png
            └── preview.png


/README.md:
--------------------------------------------------------------------------------
  1 | # CSS Battle
  2 | 
  3 | Let's design with code! 
  4 | 
  5 | Here is my solutions for some problems on cssbattle.dev. Maybe this is not the best solution, but it's work!
  6 | 
  7 | Some problems may be skipped for some reason.
  8 | 
  9 | ## Scoring
 10 | 
 11 | I make this solutions for better understanding and readability. So, if you want to get a higher score, you need to change the class name with a minimal character.
 12 | 
 13 | ## Battle #1 - Pilot Battle
 14 | 
 15 | ![preview](./solutions/1-pilot-battle/images/preview.png)
 16 | 
 17 | - [#1 - Simply Square](./solutions/1-pilot-battle/1-simply-square.md)
 18 | - [#2 - Carrom](./solutions/1-pilot-battle/2-carrom.md)
 19 | - [#3 - Push Button](./solutions/1-pilot-battle/3-push-button.md)
 20 | - [#4 - Ups n Downs](./solutions/1-pilot-battle/4-ups-n-downs.md)
 21 | - [#5 - Acid Rain](./solutions/1-pilot-battle/5-acid-rain.md)
 22 | - [#6 - Missing Slice](./solutions/1-pilot-battle/6-missing-slice.md)
 23 | - [#7 - Leafy Trail](./solutions/1-pilot-battle/7-leafy-trail.md)
 24 | - [#8 - Forking Crazy](./solutions/1-pilot-battle/8-forking-crazy.md)
 25 | - [#9 - Tesseract](./solutions/1-pilot-battle/9-tesseract.md)
 26 | - [#10 - Cloaked Spirits](./solutions/1-pilot-battle/10-cloaked-spirits.md)
 27 | - [#11 - Eye of Sauron](./solutions/1-pilot-battle/11-eye-of-sauron.md)
 28 | - [#12 - Wiggly Moustache](./solutions/1-pilot-battle/12-wiggly-moustache.md)
 29 | 
 30 | ## Battle #2 - Visibility
 31 | 
 32 | ![preview](./solutions/2-visibility/images/preview.png)
 33 | 
 34 | - [#13 - Totally Triangle](./solutions/2-visibility/13-totally-triangle.md)
 35 | - [#14 - Web Maker Logo](./solutions/2-visibility/14-web-maker-logo.md)
 36 | - [#15 - Overlap](./solutions/2-visibility/15-overlap.md)
 37 | - [#16 - Eye of The Tiger](./solutions/2-visibility/16-eye-of-the-tiger.md)
 38 | - [#17 - Fidget Spinner](./solutions/2-visibility/17-fidget-spinner.md)
 39 | - [#18 - Matrix](./solutions/2-visibility/18-matrix.md)
 40 | 
 41 | ## Battle #3 - Cursor
 42 | 
 43 | ![preview](./solutions/3-cursor/images/preview.png)
 44 | 
 45 | - [#19 - Cube](./solutions/3-cursor/19-cube.md)
 46 | - [#20 - Ticket](./solutions/3-cursor/20-ticket.md)
 47 | 
 48 | ## Battle #4 - Display
 49 | 
 50 | ![preview](./solutions/4-display/images/preview.png)
 51 | 
 52 | - [#21 - SitePoint Logo](./solutions/4-display/21-sitepoint-logo.md)
 53 | - [#22 - Cloud](./solutions/4-display/22-cloud.md)
 54 | - [#23 - Boxception](./solutions/4-display/23-boxception.md)
 55 | - [#24 - Switches](./solutions/4-display/24-switches.md)
 56 | - [#25 - Blossom](./solutions/4-display/25-blossom.md)
 57 | - [#26 - Smiley](./solutions/4-display/26-smiley.md)
 58 | - [#27 - Lock Up](./solutions/4-display/27-lock-up.md)
 59 | - [#28 - Cups & Balls](./solutions/4-display/28-cups-&-balls.md)
 60 | 
 61 | ## Battle #5 - Inline
 62 | 
 63 | ![preview](./solutions/5-inline/images/preview.png)
 64 | 
 65 | - [#29 - Suffocate](./solutions/5-inline/29-suffocate.md)
 66 | - [#30 - Horizon](./solutions/5-inline/30-horizon.md)
 67 | 
 68 | ## Battle #6 - Conic
 69 | 
 70 | ![preview](./solutions/6-conic/images/preview.png)
 71 | 
 72 | - [#31 - Equals](./solutions/6-conic/31-equals.md)
 73 | - [#32 - Band-aid](./solutions/6-conic/32-band-aid.md)
 74 | 
 75 | ## Battle #7 - Backface
 76 | 
 77 | ![preview](./solutions/7-backface/images/preview.png)
 78 | 
 79 | - [#33 - Birdie](./solutions/7-backface/33-birdie.md)
 80 | - #34 - Christmas Tree (Skipped)
 81 | - [#35 - Ice Cream](./solutions/7-backface/35-ice-cream.md)
 82 | - [#36 - Interleaved](./solutions/7-backface/36-interleaved.md)
 83 | - [#37 - Tunnel](./solutions/7-backface/37-tunnel.md)
 84 | - [#38 - Not Simply Square](./solutions/7-backface/38-not-simply-square.md)
 85 | - [#39 - Sunset](./solutions/7-backface/39-sunset.md)
 86 | - [#40 - Letter B](./solutions/7-backface/40-letter-b.md)
 87 | - [#41 - Fox Head](./solutions/7-backface/41-fox-head.md)
 88 | 
 89 | ## Battle #8 - Transition
 90 | 
 91 | ![preview](./solutions/8-transition/images/preview.png)
 92 | 
 93 | - #42 - Baby (Skipped)
 94 | - [#43 - Wrench](./solutions/8-transition/43-wrench.md)
 95 | - [#44 - Stripes](./solutions/8-transition/44-stripes.md)
 96 | 
 97 | ## Battle #9 - Margin
 98 | 
 99 | ![preview](./solutions/9-margin/images/preview.png)
100 | 
101 | - #45 - Magical Tree (Skipped)
102 | - [#46 - Mountains](./solutions/9-margin/46-mountains.md)
103 | 
104 | Wait for other solutions...


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/1-simply-square.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #1 - Simple Square
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/1)
 6 | 
 7 | ![result](./images/1-simply-square.png)
 8 | 
 9 | ```html
10 | <div></div>
11 | <style>
12 |   * {
13 |     margin: 0;
14 |   }
15 |   body {
16 |     background: #5d3a3a;
17 |   }
18 |   div {
19 |     width: 200px;
20 |     height: 200px;
21 |     background: #b5e0ba;
22 |   }
23 | </style>
24 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/10-cloaked-spirits.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #10 - Cloaked Spirits
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/10)
 6 | 
 7 | ![result](./images/10-cloaked-spirits.png)
 8 | 
 9 | ```html
10 | <div class="rectangle">
11 |   <div class="circle"></div>
12 | </div>
13 | <div class="rectangle center">
14 |   <div class="circle"></div>
15 | </div>
16 | <div class="rectangle">
17 |   <div class="circle"></div>
18 | </div>
19 | <style>
20 |   * {
21 |     margin: 0;
22 |   }
23 |   body {
24 |     background: #62306D;
25 |     display: flex;
26 |     justify-content: space-between;
27 |     align-items: flex-end;
28 |     padding: 0 50px;
29 |   }
30 |   .rectangle {
31 |     background: #F7EC7D;
32 |     width: calc(100% / 3);
33 |     height: 100px;
34 |   }
35 |   .rectangle.center {
36 |     height: 200px;
37 |   }
38 |   .circle {
39 |     width: 100px;
40 |     height: 100px;
41 |     background: #E38F66;
42 |     border-radius: 50%;
43 |    	border: 20px solid #AA445F;
44 |     box-sizing: border-box;
45 |     margin-top: -50px;
46 |   }
47 |   .center .circle {
48 |     background: #AA445F;
49 |     border-color: #E38F66;
50 |   }
51 | </style>
52 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/11-eye-of-sauron.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #11 - Eye of Sauron
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/11)
 6 | 
 7 | ![result](./images/11-eye-of-sauron.png)
 8 | 
 9 | ```html
10 | <div class="half-circle left"></div>
11 | <div class="circle">
12 | 	<div class="circle-inside"></div>
13 | </div>
14 | <div class="half-circle right"></div>
15 | <style>
16 |   * {
17 |     margin: 0;
18 |   }
19 |   body {
20 |     background: #191210;
21 |     display: flex;
22 |     justify-content: space-between;
23 |     align-items: center;
24 |     padding: 0 50px;
25 |   }
26 |   .circle {
27 |     width: 140px;
28 |     height: 140px;
29 |     border-radius: 50%;
30 |    	border: 20px solid #ECA03D;
31 |     box-sizing: border-box;
32 |     display: flex;
33 |     justify-content: center;
34 |     align-items: center;
35 |   }
36 |   .circle-inside {
37 |     background: #84271C;
38 |     width: 50px;
39 |     height: 50px;
40 |     border-radius: 50%;
41 |   }
42 |   .half-circle {
43 |     width: 100px;
44 |     height: 50px;
45 |     box-sizing: border-box;
46 |     border: 20px solid #ECA03D;
47 |     border-top: 0;
48 |     border-bottom-left-radius: 100px;
49 |     border-bottom-right-radius: 100px;
50 |   }
51 |   .half-circle.left {
52 |     margin-right: -20px;
53 |     margin-top: 50px;
54 |   }
55 |   .half-circle.right {
56 |     margin-left: -20px;
57 |     margin-top: -50px;
58 |     transform: scaleY(-1);
59 |   }
60 | </style>
61 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/12-wiggly-moustache.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #12 - Wiggly Moustache
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/12)
 6 | 
 7 | ![result](./images/12-wiggly-moustache.png)
 8 | 
 9 | ```html
10 | <div class="half-circle left"></div>
11 | <div class="half-circle center"></div>
12 | <div class="half-circle right"></div>
13 | <style>
14 |   * {
15 |     margin: 0;
16 |   }
17 |   body {
18 |     background: #F5D6B4;
19 |     display: flex;
20 |     justify-content: space-between;
21 |     align-items: center;
22 |     padding: 0 70px;
23 |     margin-top: 50px
24 |   }
25 |   .half-circle {
26 |     width: 100px;
27 |     height: 50px;
28 |     box-sizing: border-box;
29 |     border: 20px solid #D86F45;
30 |     border-top: 0;
31 |     border-bottom-left-radius: 100px;
32 |     border-bottom-right-radius: 100px;
33 |     position: relative;
34 |   }
35 |   .half-circle.center {
36 |     transform: scaleY(-1);
37 |     margin: 0 -20px 100px -20px;
38 |   }
39 |   .half-circle.left::after,
40 |   .half-circle.right::after {
41 |     content: '';
42 |     width: 20px;
43 |     height: 10px;
44 |     background: #D86F45;
45 |     position: absolute;
46 |     border-top-left-radius: 10px;
47 |     border-top-right-radius: 10px;
48 |   }
49 |   .half-circle.left::after {
50 |     top: -10px;
51 |     left: -20px;
52 |   }
53 |   .half-circle.right::after {
54 |     top: -10px;
55 |     right: -20px;
56 |   }
57 | </style>
58 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/2-carrom.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #2 - Carrom
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/2)
 6 | 
 7 | ![result](./images/2-carrom.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="box top-left"></div>
12 |   <div class="box top-right"></div>
13 |   <div class="box bottom-left"></div>
14 |   <div class="box bottom-right"></div>  
15 | </div>
16 | <style>
17 |   body {
18 |     background: #62374e;
19 |   }
20 |   .wrapper {
21 |     width: 300px;
22 |     height: 200px;
23 |     margin: 50px auto;
24 |     position: relative;
25 |   }
26 |   .box {
27 |     width: 50px;
28 |     height: 50px;
29 |     background: #fdc57b;
30 |     position: absolute;
31 |   }
32 |   .box.top-right {
33 |     right: 0
34 |   }
35 |   .box.bottom-left {
36 |     bottom: 0;
37 |   }
38 |   .box.bottom-right {
39 |     bottom: 0;
40 |     right: 0;
41 |   }
42 | </style>
43 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/3-push-button.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #3 - Push Button
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/3)
 6 | 
 7 | ![result](./images/3-push-button.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="circle circle-outer"></div>
12 |   <div class="circle circle-center"></div>
13 | </div>
14 | <style>
15 |   body {
16 |     background: #6592CF;
17 |   }
18 |   .wrapper {
19 |     width: 300px;
20 |     height: 150px;
21 |     background: #243D83;
22 |     margin: 75px auto;
23 |     position: relative;
24 |   }
25 |   .circle {
26 |     border-radius: 50%;
27 |   }
28 |   .circle-outer {
29 |     position: absolute;
30 |     left: 25px;
31 |     top: -50px;
32 |     width: 250px;
33 |     height: 250px;
34 |     background: transparent;
35 |     box-sizing: border-box;
36 |     border: 50px solid #6592CF;
37 |   }
38 |   .circle-center {
39 |     position: absolute;
40 |     width: 50px;
41 |     height: 50px;
42 |     left: 125px;
43 |     top: 50px;
44 |     background: #EEB850;
45 |   }
46 | </style>
47 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/4-ups-n-downs.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #4 - Ups n Downs
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/4)
 6 | 
 7 | ![result](./images/4-ups-n-downs.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="box1"></div>
12 |   <div class="box2"></div>
13 |   <div class="box3"></div>
14 | </div>
15 | <style>
16 |   body {
17 |     background: #62306D;
18 |   }
19 |   .wrapper {
20 |     width: 100%;
21 |     height: 200px;
22 |     margin-top: 50px;
23 |     display: flex;
24 |     justify-content: center;
25 |   }
26 |   div[class^='box'] {
27 |     background: #F7EC7D;
28 |     height: 100px;
29 |     width: 100px;
30 |     border-bottom-left-radius: 50%;
31 |     border-bottom-right-radius: 50%;
32 |   }
33 |   .box1, .box3 {
34 |     align-self: flex-end;
35 |   }
36 |   .box2 {
37 |     transform: rotate(180deg)
38 |   }
39 | </style>
40 | 
41 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/5-acid-rain.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #5 Acin Rain
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/5)
 6 | 
 7 | ![result](./images/5-acid-rain.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="c c-1"></div>
12 |   <div class="c c-2"></div>
13 |   <div class="c c-3"></div>
14 | </div>
15 | <style>
16 |   body {
17 |     background: #0B2429;
18 |   }
19 |   .wrapper {
20 |     display: flex;
21 |     height: 240px;
22 |     margin: 30px auto;
23 |   }
24 |   .c {
25 |     width: 120px;
26 |     height: 120px;
27 |     background: #F3AC3C;
28 |     border-radius: 50%;
29 |     border-top-right-radius: 0;
30 |     margin-left: -60px;
31 |   }
32 |   .c-1 {
33 |     align-self: flex-end;
34 |     z-index: 3;
35 |     margin-left: 72px;
36 |   }
37 |   .c-2 {
38 |     background: #998235;
39 |     align-self: center;
40 |     z-index: 2;
41 |   }
42 |   .c-3 {
43 |     transform: rotate(180deg);
44 |   }
45 | </style>
46 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/6-missing-slice.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #6 - Missing SLice
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/6)
 6 | 
 7 | ![result](./images/6-missing-slice.png)
 8 | 
 9 | ```html
10 | <div class="circle"></div>
11 | <style>
12 |   body {
13 |     background: #E3516E;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 |   }
18 |   .circle {
19 |     background: conic-gradient(#FADE8B 90deg, #E3516E 90deg 180deg, #F7F3D7 180deg 270deg, #51B5A9 270deg);
20 |     width: 200px;
21 |     height: 200px;
22 |     border-radius: 50%;
23 |   }
24 | </style>
25 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/7-leafy-trail.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #7 - Leafy Trail
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/7)
 6 | 
 7 | ![result](./images/7-leafy-trail.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="leaf"></div>
12 |   <div class="leaf"></div>
13 |   <div class="leaf"></div>
14 | </div>
15 | <style>
16 |   body {
17 |     background: #0B2429;
18 |     display: flex;
19 |     justify-content: center;
20 |     align-items: center;
21 |   }
22 |   .wrapper {
23 |     position: relative;
24 |     height: 150px;
25 |     width: 250px;
26 |   }
27 |   .leaf:first-child {
28 |     left: 0;
29 | 	background: #1A4341;
30 |   }
31 |   .leaf:nth-child(2) {
32 |     left: 50px;
33 | 	background: #998235;
34 |   }
35 |   .leaf:nth-child(3) {
36 |     left: 100px;
37 | 	background: #F3AC3C;
38 |   }
39 |   .leaf {
40 |     position: absolute;
41 |     width: 150px;
42 |     height: 150px;
43 |     border-top-left-radius: 67%;
44 |     border-bottom-right-radius: 67%;
45 |   }
46 | </style>
47 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/8-forking-crazy.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #8 - Forking Crazy
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/8)
 6 | 
 7 | ![result](./images/8-forking-crazy.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="stick"></div>
12 |   <div class="body"></div>
13 |   <div class="claw-wrapper">
14 |     <div class="claw"></div>
15 |     <div class="claw reverse"></div>
16 |     <div class="claw"></div>
17 |     <div class="claw reverse"></div>
18 |     <div class="claw"></div>
19 |     <div class="claw reverse"></div>
20 |     <div class="claw"></div>
21 |   </div>
22 | </div>
23 | <style>
24 |   * {
25 |     margin: 0;
26 |   }
27 |   body {
28 |     background: #6592CF;
29 |     display: flex;
30 |     align-items: flex-end;
31 |     justify-content: center;
32 |   }
33 |   .wrapper {
34 |     width: 140px;
35 |     height: 250px;
36 |     position: relative;
37 |   }
38 |   div:not(.wrapper):not(.claw-wrapper) {
39 |     background: #060F55;
40 |   }
41 |   .stick {
42 |     width: 20px;
43 |     height: 60px;
44 |     position: absolute;
45 |     bottom: 0;
46 |     left: calc(50% - 10px);
47 |   }
48 |   .body {
49 |     width: 140px;
50 |     height: 100px;
51 |     position: absolute;
52 |     bottom: 50px;
53 |     border-bottom-left-radius: 80px;
54 |     border-bottom-right-radius: 80px;
55 |   }
56 |   .claw-wrapper {
57 |     width: 140px;
58 |     height: 110px;
59 |     display: flex;
60 |     justify-content: space-between;
61 |   }
62 |   .claw {
63 |     width: 20px;
64 |     border-top-left-radius: 20px;
65 |     border-top-right-radius: 20px;
66 |   }
67 |   .claw.reverse {
68 |     transform: scaleY(-1);
69 |     background: #6592CF !important;
70 |   }
71 | </style>
72 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/9-tesseract.md:
--------------------------------------------------------------------------------
 1 | # Battle #1 - Pilot Battle
 2 | 
 3 | ## #9 - Tesseract
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/9)
 6 | 
 7 | ![result](./images/9-tesseract.png)
 8 | 
 9 | ```html
10 | <div class="rectangle"></div>
11 | <div class="square1"></div>
12 | <div class="square2"></div>
13 | <div class="circle"></div>
14 | <style>
15 |   * {
16 |     margin: 0;
17 |   }
18 |   body {
19 |     background: #222730;
20 |     display: flex;
21 |     justify-content: center;
22 |     align-items: center;
23 |   }
24 |   body > * {
25 |     position: absolute;
26 |   }
27 |   .rectangle{
28 |     width: 400px;
29 |     height: 150px;
30 |     background: #4CAAB3;
31 |     margin-top: 0px;
32 |   }
33 |   .square1 {
34 |     width: 250px;
35 |     height: 250px;
36 |     background: #222730;
37 |     transform: rotate(45deg);
38 |   }
39 |   .square2 {
40 |     width: 150px;
41 |     height: 150px;
42 |     background: #4CAAB3;
43 |     transform: rotate(45deg);
44 |   }
45 |   .circle {
46 |     width: 50px;
47 |     height: 50px;
48 |     border-radius: 50%;
49 |     background: #393E46;
50 |   }
51 | </style>
52 | ```


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/1-simply-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/1-simply-square.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/10-cloaked-spirits.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/10-cloaked-spirits.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/11-eye-of-sauron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/11-eye-of-sauron.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/12-wiggly-moustache.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/12-wiggly-moustache.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/2-carrom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/2-carrom.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/3-push-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/3-push-button.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/4-ups-n-downs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/4-ups-n-downs.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/5-acid-rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/5-acid-rain.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/6-missing-slice.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/6-missing-slice.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/7-leafy-trail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/7-leafy-trail.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/8-forking-crazy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/8-forking-crazy.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/9-tesseract.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/9-tesseract.png


--------------------------------------------------------------------------------
/solutions/1-pilot-battle/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/1-pilot-battle/images/preview.png


--------------------------------------------------------------------------------
/solutions/2-visibility/13-totally-triangle.md:
--------------------------------------------------------------------------------
 1 | # Battle #2 - Visibility
 2 | 
 3 | ## #13 - Totally Triangle
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/13)
 6 | 
 7 | ![result](./images/13-totally-triangle.png)
 8 | 
 9 | ```html
10 | <div></div>
11 | <style>
12 |   body {
13 |     background: #0B2429;
14 |     margin: 0;
15 |   }
16 |   div {
17 |     width: 0;
18 |     height: 0;
19 |     border: 70px solid;
20 |     border-color: #F3AC3C transparent transparent #F3AC3C;
21 |   }
22 | </style>
23 | ```


--------------------------------------------------------------------------------
/solutions/2-visibility/14-web-maker-logo.md:
--------------------------------------------------------------------------------
 1 | # Battle #2 - Visibility
 2 | 
 3 | ## #14 - Web Maker Logo
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/14)
 6 | 
 7 | ![result](./images/14-web-maker-logo.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="triangle"></div>
12 |   <div class="triangle"></div>
13 |   <div class="triangle"></div>
14 |   <div class="triangle"></div>
15 | </div>
16 | <style>
17 |   body {
18 |     background: #F2F2B6;
19 |     margin: 0;
20 |   }
21 |   .wrapper {
22 |     position: relative;
23 |     width: 280px;
24 |     height: 130px;
25 |     margin: 85px auto;
26 |   }
27 |   .triangle {
28 |     position: absolute;
29 |     width: 0;
30 |     height: 0;
31 |     border-left: 75px solid transparent;
32 |     border-right: 75px solid transparent;
33 |     border-top: 130px solid #FF6D00;
34 |     z-index: 1;
35 |   }
36 |   .triangle:nth-child(2) {
37 |     border-top-color: #FD4602;
38 |     left: 20px;
39 |     z-index: 0;
40 |   }
41 |   .triangle:nth-child(3) {
42 |     transform: scaleY(-1);
43 |     border-top-color: #FD4602;
44 |     left: 110px;
45 |     z-index: 1;
46 |   }
47 |   .triangle:nth-child(4) {
48 |     transform: scaleY(-1);
49 |     left: 130px;
50 |     z-index: 0;
51 |   }
52 | </style>
53 | ```


--------------------------------------------------------------------------------
/solutions/2-visibility/15-overlap.md:
--------------------------------------------------------------------------------
 1 | # Battle #2 - Visibility
 2 | 
 3 | ## #15 - Overlap
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/15)
 6 | 
 7 | ![result](./images/15-overlap.png)
 8 | 
 9 | ```html
10 | <div class="circle"></div>
11 | <div class="circle"></div>
12 | <div class="center"></div>
13 | <style>
14 |   body {
15 |     background: #09042A;
16 |     margin: 0;
17 |     display: flex;
18 |     justify-content: center;
19 |     align-items: center;
20 |   }
21 |   .circle {
22 |     background: #7B3F61;
23 |     width: 150px;
24 |     height: 150px;
25 |     border-radius: 50%;
26 |   }
27 |   .circle:first-child {
28 |     margin-right: -50px;
29 |   }
30 |   .circle:nth-child(2) {
31 |     background: #E78481;
32 |   }
33 |   .center {
34 |     position: absolute;
35 |     width: 80px;
36 |     height: 80px;
37 |     background: #09042A;
38 |     transform: rotate(45deg);
39 |     border-top-right-radius: 75px;
40 |     border-bottom-left-radius: 75px;
41 |   }
42 | </style>
43 | ```


--------------------------------------------------------------------------------
/solutions/2-visibility/16-eye-of-the-tiger.md:
--------------------------------------------------------------------------------
 1 | # Battle #2 - Visibility
 2 | 
 3 | ## #16 - Eye of The Tiger
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/16)
 6 | 
 7 | ![result](./images/16-eye-of-the-tiger.png)
 8 | 
 9 | ```html
10 | <div class="out"></div>
11 | <div class="in"></div>
12 | <style>
13 |   body {
14 |     background: #0B2429;
15 |     margin: 0;
16 |     display: flex;
17 |     justify-content: center;
18 |     align-items: center;
19 |   }
20 |   .in {
21 |     width: 140px;
22 |     height: 140px;
23 |     border-radius: 50%;
24 |     box-sizing: border-box;
25 |     border: 45px solid #F3AC3C;
26 |     z-index: 2;
27 |     position: relative;
28 |     background: #0B2429;
29 |   }
30 |   .in::after {
31 |     position: absolute;
32 |     content: '';
33 |     width: 180px;
34 |     height: 180px;
35 |     border-radius: 50%;
36 |     box-sizing: border-box;
37 |     border: 20px solid #0B2429;
38 |     left: -65px;
39 |     top: -65px;
40 |   }
41 |   .out {
42 |     width: 200px;
43 |     height: 200px;
44 |     position: absolute;
45 |     background: #998235;
46 |     transform: rotate(45deg);
47 |     border-top-left-radius: 50%;
48 |     border-bottom-right-radius: 50%;
49 |     z-index: 1;
50 |   }
51 | </style>
52 | ```


--------------------------------------------------------------------------------
/solutions/2-visibility/17-fidget-spinner.md:
--------------------------------------------------------------------------------
 1 | # Battle #2 - Visibility
 2 | 
 3 | ## #17 - Fidget Spinner
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/17)
 6 | 
 7 | ![result](./images/17-fidget-spinner.png)
 8 | 
 9 | ```html
10 | <div class="circle"></div>
11 | <div class="rectangle"></div>
12 | <div class="circle"></div>
13 | <div class="circle2 top"></div>
14 | <div class="circle2 bottom"></div>
15 | <style>
16 |   body {
17 |     background: #09042A;
18 |     margin: 0;
19 |     display: flex;
20 |     justify-content: center;
21 |     align-items: center;
22 |   }
23 |   .circle {
24 |     width: 80px;
25 |     height: 80px;
26 |     box-sizing: border-box;
27 |     border: 10px solid #E78481;
28 |     border-radius: 50%;
29 |   }
30 |   .rectangle {
31 |     width: 60px;
32 |     height: 50px;
33 |     background: #E78481;
34 |     margin-left: -10px;
35 |     margin-right: -10px;
36 |     border-radius: -50px;
37 |   }
38 |   .circle2 {
39 |     position: absolute;
40 |     width: 80px;
41 |     height: 80px;
42 |     background: #F5BB9C;
43 |     border-radius: 50%;
44 |     border: 10px solid #09042A;
45 |     box-sizing: border-box;
46 |   }
47 |   .circle2.top {
48 |     top: 57.2px;
49 |   }
50 |   .circle2.bottom {
51 |     bottom: 57.2px;
52 |   }
53 | </style>
54 | ```


--------------------------------------------------------------------------------
/solutions/2-visibility/18-matrix.md:
--------------------------------------------------------------------------------
 1 | # Battle #2 - Visibility
 2 | 
 3 | ## #18 - Matrix
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/18)
 6 | 
 7 | ![result](./images/18-matrix.png)
 8 | 
 9 | ```html
10 | <div></div>
11 | <div></div>
12 | <div></div>
13 | <div></div>
14 | <div class="reverse"></div>
15 | <div class="reverse"></div>
16 | <div class="reverse"></div>
17 | <div class="reverse"></div>
18 | <div></div>
19 | <div></div>
20 | <div></div>
21 | <div></div>
22 | <style>
23 |   body {
24 |     background: #5C434C;
25 |     display: grid;
26 |     grid-template-columns: repeat(4, auto);
27 |     grid-template-rows: repeat(3, auto);
28 |     grid-gap: 20px;
29 |     margin: 10px;
30 |   }
31 |   div {
32 |     width: 80px;
33 |     height: 80px;
34 |     border-top-left-radius: 100%;
35 |   }
36 |   div:nth-child(odd),
37 |   .reverse:nth-child(even) {
38 |     background: #F09462;
39 |   }
40 |   div:nth-child(even),
41 |   .reverse:nth-child(odd) {
42 |     background: #F5D6B4;
43 |   }
44 | </style>
45 | ```


--------------------------------------------------------------------------------
/solutions/2-visibility/images/13-totally-triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/13-totally-triangle.png


--------------------------------------------------------------------------------
/solutions/2-visibility/images/14-web-maker-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/14-web-maker-logo.png


--------------------------------------------------------------------------------
/solutions/2-visibility/images/15-overlap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/15-overlap.png


--------------------------------------------------------------------------------
/solutions/2-visibility/images/16-eye-of-the-tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/16-eye-of-the-tiger.png


--------------------------------------------------------------------------------
/solutions/2-visibility/images/17-fidget-spinner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/17-fidget-spinner.png


--------------------------------------------------------------------------------
/solutions/2-visibility/images/18-matrix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/18-matrix.png


--------------------------------------------------------------------------------
/solutions/2-visibility/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/2-visibility/images/preview.png


--------------------------------------------------------------------------------
/solutions/3-cursor/19-cube.md:
--------------------------------------------------------------------------------
 1 | # Battle #3 - Cursor
 2 | 
 3 | ## #19 - Cube
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/19)
 6 | 
 7 | ![result](./images/19-cube.png)
 8 | 
 9 | ```html
10 | <div class="c"></div>
11 | <div class="l"></div>
12 | <div class="r"></div>
13 | <style>
14 |   body {
15 |     background: #0B2429;
16 |     margin: 0;
17 |   }
18 |   div {
19 |   	position: absolute;
20 |   }
21 |   .c {
22 |     width: 100px;
23 |     height: 100px;
24 |     background: #F3AC3C;
25 |     transform: rotate(45deg);
26 |     bottom: 65px;
27 |     left: 150px;
28 |   }
29 |   .r, .l {
30 |     width: 70px;
31 |     height: 70px;
32 |     background: #1A4341;
33 |     left: 200px;
34 |     bottom: 150px;
35 |     transform: skewY(45deg);
36 |   }
37 |   .l {
38 |     background: #998235;
39 |     transform: skewY(-45deg);
40 |     left: auto;
41 |     right: 200px;
42 |   }
43 | </style>
44 | ```


--------------------------------------------------------------------------------
/solutions/3-cursor/20-ticket.md:
--------------------------------------------------------------------------------
 1 | # Battle #3 - Cursor
 2 | 
 3 | ## #20 - Ticket
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/20)
 6 | 
 7 | ![result](./images/20-ticket.png)
 8 | 
 9 | ```html
10 | <div class="wrapper">
11 |   <div class="s-left"></div>
12 |   <div class="s-right"></div>
13 |   <div class="circle top left"></div>
14 |   <div class="circle top right"></div>
15 |   <div class="circle bottom left"></div>
16 |   <div class="circle bottom right"></div>
17 |   <div class="circle-sm top-sm"></div>
18 |   <div class="circle-sm bottom-sm"></div>
19 | </div>
20 | <style>
21 |   body {
22 |     background: #62306D;
23 |     display: flex;
24 |     align-items: center;
25 |     justify-content: center;
26 |   }
27 |   .wrapper {
28 |     display: flex;
29 |     position: relative;
30 |   }
31 |   .s-left {
32 |     width: 140px;
33 |     height: 100px;
34 |     background: #F7EC7D;
35 |   }
36 |   .s-right {
37 |     width: 60px;
38 |     height: 100px;
39 |     background: #E38F66;
40 |   }
41 |   .circle, .circle-sm {
42 |     width: 40px;
43 |     height: 40px;
44 |     border-radius: 50%;
45 |     background: #62306D;
46 |     position: absolute;
47 |   }
48 |   .circle-sm {
49 |     width: 20px;
50 |     height: 20px;
51 |     right: 50px;
52 |   }
53 |   .left { left: -20px; }
54 |   .top { top: -20px; }
55 |   .right { right: -20px; }
56 |   .bottom { bottom: -20px; }
57 |   .top-sm { top: -10px; }
58 |   .bottom-sm { bottom: -10px; }
59 | </style>
60 | ```


--------------------------------------------------------------------------------
/solutions/3-cursor/images/19-cube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/3-cursor/images/19-cube.png


--------------------------------------------------------------------------------
/solutions/3-cursor/images/20-ticket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/3-cursor/images/20-ticket.png


--------------------------------------------------------------------------------
/solutions/3-cursor/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/3-cursor/images/preview.png


--------------------------------------------------------------------------------
/solutions/4-display/21-sitepoint-logo.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #21 - SitePoint Logo
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/21)
 6 | 
 7 | ![result](./images/21-sitepoint-logo.png)
 8 | 
 9 | ```html
10 | <div class="wrap">
11 |   <div class="y"></div>
12 |   <div class="x"></div>
13 | </div>
14 | <div class="wrap reverse">
15 |   <div class="y"></div>
16 |   <div class="x"></div>
17 | </div>
18 | <style>
19 |   body {
20 |     background: #222;
21 |   }
22 |   .wrap {
23 |     display: flex;
24 |     flex-direction: column;
25 |     transform: rotate(45deg);
26 |     position: absolute;
27 |     left: 148px;
28 |     top: 75px;
29 |   }
30 |   .y {
31 |     width: 30px;
32 |     height: 100px;
33 |     background: #F2994A;
34 |     border-bottom-left-radius: 10px;
35 |   }
36 |   .x {
37 |     width: 60px;
38 |     height: 30px;
39 |     background: #F2994A;
40 |     border-top-right-radius: 5px;
41 |     margin-top: -30px;
42 |     margin-left: 20px;
43 |   }
44 |   .wrap.reverse {
45 |     transform: scale(-1, -1) rotate(45deg);
46 |     top: 123px;
47 |     left: 170px;
48 |   }
49 |   .reverse .y, 
50 |   .reverse .x {
51 |     background: #2D9CDB;
52 |   }
53 | </style>
54 | ```


--------------------------------------------------------------------------------
/solutions/4-display/22-cloud.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #22 - Cloud
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/22)
 6 | 
 7 | ![result](./images/22-cloud.png)
 8 | 
 9 | ```html
10 | <div class="left"></div>
11 | <div class="right"></div>
12 | <div class="bottom"></div>
13 | <style>
14 |   body {
15 |     background: #F5D6B4;
16 |   }
17 |   div { 
18 |     position: absolute;
19 |     background: #D86F45;
20 |   }
21 |   .bottom {
22 |     width: 170px;
23 |     height: 50px;
24 |     border-radius: 50px;
25 |     right: 100px;
26 |     bottom: 85px;
27 |   }
28 |   .left, .right {
29 |     width: 100px;
30 |     height: 100px;
31 |     border-radius: 50%;
32 |   }
33 |   .left {
34 |     left: 100px;
35 |     bottom: 85px;
36 |   }
37 |   .right {
38 |     right: 120px;
39 |     bottom: 115px;
40 |   }
41 | </style>
42 | ```


--------------------------------------------------------------------------------
/solutions/4-display/23-boxception.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #23 - Boxception
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/23)
 6 | 
 7 | ![result](./images/23-boxception.png)
 8 | 
 9 | ```html
10 | <div class="box1">
11 |   <div class="box2"></div>
12 |   <div class="box3"></div>
13 | </div>
14 | <style>
15 |   body {
16 |     background: #F3AC3C;
17 |     display: flex;
18 |     justify-content: center;
19 |     align-items: center;
20 |   }
21 |   .box1 {
22 |     width: 200px;
23 |     height: 200px;
24 |     background: #1A4341;
25 |     position: relative;
26 |   }
27 |   .box2, .box3 {
28 |     position: absolute;
29 |     bottom: 0;
30 |   }
31 |   .box2 {
32 |     background: #998235;
33 |     width: 100px;
34 |     height: 100px;
35 |     left: 0;
36 |   }
37 |   .box3 {
38 |     background: #F3AC3C;
39 |     width: 50px;
40 |     height: 50px;
41 |     left: 50px;
42 |   }
43 | </style>
44 | ```


--------------------------------------------------------------------------------
/solutions/4-display/24-switches.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #24 - Switches
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/24)
 6 | 
 7 | ![result](./images/24-switches.png)
 8 | 
 9 | ```html
10 | <div class="on"></div>
11 | <div class="off"></div>
12 | <style>
13 |   body {
14 |     background: #62306D;
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |   }
19 |   .on { margin-right: 40px; }
20 |   .on, .off {
21 |     width: 100px;
22 |     height: 100px;
23 |     background: #F7EC7D;
24 |     border-radius: 50px;
25 |     position: relative;
26 |   }
27 |   .on::after, .off::after {
28 |     position: absolute;
29 |     bottom: 0;
30 |     content: '';
31 |     width: 100px;
32 |     height: 150px;
33 |     background: #AA445F;
34 |     border-radius: 50px;
35 |     z-index: -1;
36 |   }
37 |   .off::after {
38 |     top: 0;
39 |     background: #E38F66;
40 |   }
41 | </style>
42 | ```


--------------------------------------------------------------------------------
/solutions/4-display/25-blossom.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #25 - Blossom
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/25)
 6 | 
 7 | ![result](./images/25-blossom.png)
 8 | 
 9 | ```html
10 | <div class="wrap">
11 |   <div class="leaf-lg t l"></div>
12 |   <div class="leaf-lg b r flip-x"></div>
13 |   <div class="leaf-sm t r flip-x"></div>
14 |   <div class="leaf-sm b l"></div>
15 | </div>
16 | <style>
17 |   body {
18 |     background: #998235;
19 |     display: flex;
20 |     justify-content: center;
21 |     align-items: center;
22 |   }
23 |   .wrap { 
24 |     width: 180px; 
25 |     height: 180px;
26 |     position: relative;
27 |   }
28 |   .t { top: 0 }
29 |   .b { bottom: 0 }
30 |   .r { right: 0 }
31 |   .l { left: 0 }
32 |   .flip-x { transform: scaleX(-1) }
33 |   .leaf-lg, .leaf-sm {
34 |     position: absolute;
35 |     border-top-right-radius: 50px;
36 |     border-bottom-left-radius: 50px;
37 |   }
38 |   .leaf-lg {
39 |     width: 80px;
40 |     height: 100px;
41 |     background: #1A4341;
42 |   }
43 |   .leaf-sm {
44 |     width: 80px;
45 |     height: 60px;
46 |     background: #F3AC3C;
47 |   }
48 | </style>
49 | ```


--------------------------------------------------------------------------------
/solutions/4-display/26-smiley.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #26 - Smiley
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/26)
 6 | 
 7 | ![result](./images/26-smiley.png)
 8 | 
 9 | ```html
10 | <div class="circle t l"></div>
11 | <div class="circle t r"></div>
12 | <div class="circle b c flip-y"></div>
13 | <style>
14 |   body {
15 |     background: #6592CF;
16 |   }
17 |   .circle { 
18 |     position: absolute;
19 |     width: 120px;
20 |     height: 60px;
21 |     box-sizing: border-box;
22 |     border: 20px solid #060F55;
23 |     border-bottom: 0;
24 |     border-top-left-radius: 60px;
25 |     border-top-right-radius: 60px;
26 |   }
27 |   .t { top: 40px }
28 |   .l { left: 40px }
29 |   .r { right: 40px }
30 |   .b { bottom: 40px }
31 |   .c { left: 140px }
32 |   .flip-y { transform: scaleY(-1) }
33 | </style>
34 | ```


--------------------------------------------------------------------------------
/solutions/4-display/27-lock-up.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #27 - Lock Up
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/27)
 6 | 
 7 | ![result](./images/27-lock-up.png)
 8 | 
 9 | ```html
10 | <div class="circle">
11 |   <div class="circle-in"></div>
12 |   <div class="helper"></div>
13 |   <div class="helper r"></div>
14 | </div>
15 | <style>
16 |   body {
17 |     background: #E38F66;
18 |     display: flex;
19 |     justify-content: center;
20 |     align-items: center;
21 |   }
22 |   .circle { 
23 |     width: 200px;
24 |     height: 200px;
25 |     border-radius: 50%;
26 |     background: #AA445F;
27 |     position: relative;
28 |   }
29 |   .circle-in {
30 |     position: absolute;
31 |     width: 140px;
32 |     height: 140px;
33 |     box-sizing: border-box;
34 |     border: 30px solid #F7EC7D;
35 |     border-radius: 50%;
36 |     left: 30px;
37 |     top: 30px;
38 |   }
39 |   .helper {
40 |     position: absolute;
41 |     width: 100px;
42 |     height: 100px;
43 |     background: #AA445F;
44 |     border-top-left-radius: 100px;
45 |   }
46 |   .helper.r {
47 |     bottom: 0;
48 |     right: 0;
49 |     transform: scale(-1);
50 |   }
51 | </style>
52 | ```


--------------------------------------------------------------------------------
/solutions/4-display/28-cups-&-balls.md:
--------------------------------------------------------------------------------
 1 | # Battle #4 - Display
 2 | 
 3 | ## #28 - Cups & Balls
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/28)
 6 | 
 7 | ![result](./images/28-cups-&-balls.png)
 8 | 
 9 | ```html
10 | <div class="c"></div>
11 | <div class="hc bg-y"></div>
12 | <div class="hc"></div>
13 | <div class="c bg-y"></div>
14 | <div class="hc flip-y bg-y"></div>
15 | <div class="c"></div>
16 | <div class="c bg-y"></div>
17 | <div class="hc flip-y"></div>
18 | <style>
19 |   body {
20 |     background: #1A4341;
21 |     display: grid;
22 |     grid-template-columns: repeat(4, auto);
23 |     grid-template-rows: auto auto;
24 |     grid-gap: 20px;
25 |     margin: 0;
26 |     padding: 90px 70px;
27 |   }
28 |   .c, .hc {
29 |     width: 50px;
30 |     height: 50px;
31 |     background: #998235;
32 |     border-radius: 50%;
33 |   }
34 |   .hc {
35 |     border-bottom-left-radius: 0;
36 |     border-bottom-right-radius: 0;
37 |   }
38 |   .bg-y { background: #F3AC3C }
39 |   .flip-y { transform: scaleY(-1) }
40 | </style>
41 | ```


--------------------------------------------------------------------------------
/solutions/4-display/images/21-sitepoint-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/21-sitepoint-logo.png


--------------------------------------------------------------------------------
/solutions/4-display/images/22-cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/22-cloud.png


--------------------------------------------------------------------------------
/solutions/4-display/images/23-boxception.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/23-boxception.png


--------------------------------------------------------------------------------
/solutions/4-display/images/24-switches.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/24-switches.png


--------------------------------------------------------------------------------
/solutions/4-display/images/25-blossom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/25-blossom.png


--------------------------------------------------------------------------------
/solutions/4-display/images/26-smiley.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/26-smiley.png


--------------------------------------------------------------------------------
/solutions/4-display/images/27-lock-up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/27-lock-up.png


--------------------------------------------------------------------------------
/solutions/4-display/images/28-cups-&-balls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/28-cups-&-balls.png


--------------------------------------------------------------------------------
/solutions/4-display/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/4-display/images/preview.png


--------------------------------------------------------------------------------
/solutions/5-inline/29-suffocate.md:
--------------------------------------------------------------------------------
 1 | # Battle #5 - Inline
 2 | 
 3 | ## #29 - Suffocate
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/29)
 6 | 
 7 | ![result](./images/29-suffocate.png)
 8 | 
 9 | ```html
10 | <div class="rect"></div>
11 | <div class="c t l"></div>
12 | <div class="c t r"></div>
13 | <div class="c b l"></div>
14 | <div class="c b r"></div>
15 | <style>
16 |   body {
17 |     background: #F3AC3C;
18 |     margin: 0;
19 |     display: flex;
20 |     justify-content: center;
21 |     align-items: center;
22 |   }
23 |   .rect {
24 |     width: 140px;
25 |     height: 140px;
26 |     background: #1A4341;
27 |     transform: rotate(45deg)
28 |   }
29 |   .c {
30 |     position: absolute;
31 |     width: 200px;
32 |     height: 200px;
33 |     background: #F3AC3C;
34 |     border-radius: 50%;
35 |   }
36 |   .t { top: -50px }
37 |   .b { bottom: -50px }
38 |   .r { right: 0 }
39 |   .l { left: 0 }
40 | </style>
41 | ```


--------------------------------------------------------------------------------
/solutions/5-inline/30-horizon.md:
--------------------------------------------------------------------------------
 1 | # Battle #5 - Inline
 2 | 
 3 | ## #30 - Horizon
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/30)
 6 | 
 7 | ![result](./images/30-horizon.png)
 8 | 
 9 | ```html
10 | <div class="st"></div>
11 | <div class="nd"></div>
12 | <div class="rd"></div>
13 | <style>
14 |   body {
15 |     background: #62306D;
16 |     margin: 0;
17 |   }
18 |   div {
19 |     width: 400px;
20 |   }
21 |   .st, .nd {
22 |     height: 50px;
23 |     background: #F7EC7D;
24 |   }
25 |   .nd { background: #E38F66 }
26 |   .rd {
27 |     height: 100px;
28 |     background: #AA445F;
29 |   }
30 | </style>
31 | ```


--------------------------------------------------------------------------------
/solutions/5-inline/images/29-suffocate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/5-inline/images/29-suffocate.png


--------------------------------------------------------------------------------
/solutions/5-inline/images/30-horizon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/5-inline/images/30-horizon.png


--------------------------------------------------------------------------------
/solutions/5-inline/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/5-inline/images/preview.png


--------------------------------------------------------------------------------
/solutions/6-conic/31-equals.md:
--------------------------------------------------------------------------------
 1 | # Battle #6 - Conic
 2 | 
 3 | ## #31 - Equals
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/31)
 6 | 
 7 | ![result](./images/31-equals.png)
 8 | 
 9 | ```html
10 | <div class="circle"></div>
11 | <div class="rect"></div>
12 | <style>
13 |   body {
14 |     background: #AA445F;
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |   }
19 |   .circle {
20 |     width: 250px;
21 |     height: 200px;
22 |     border-radius: 200px;
23 |     background: conic-gradient(#E38F66 180deg, #F7EC7D 180deg);
24 |   }
25 |   .rect {
26 |     position: absolute;
27 |     background: #AA445F;
28 |     width: 50px;
29 |     height: 100%;
30 |   }
31 | </style>
32 | ```


--------------------------------------------------------------------------------
/solutions/6-conic/32-band-aid.md:
--------------------------------------------------------------------------------
 1 | # Battle #6 - Conic
 2 | 
 3 | ## #32 - Band-aid
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/32)
 6 | 
 7 | ![result](./images/32-band-aid.png)
 8 | 
 9 | ```html
10 | <div class="rect"></div>
11 | <div class="rect y"></div>
12 | <div class="square"></div>
13 | <style>
14 |   body {
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |   }
19 |   .rect {
20 |     position: absolute;
21 |     background: #A3A368;
22 |     width: 50px;
23 |     height: 200px;
24 |     transform: rotate(45deg);
25 |   }
26 |   .rect.y {
27 |     background: #F3AC3C;
28 |     transform: rotate(-45deg);
29 |   }
30 |   .square {
31 |     position: absolute;
32 |     width: 50px;
33 |     height: 50px;
34 |     background: #FBE18C;
35 |     transform: rotate(45deg);
36 |   }
37 | </style>
38 | ```


--------------------------------------------------------------------------------
/solutions/6-conic/images/31-equals.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/6-conic/images/31-equals.png


--------------------------------------------------------------------------------
/solutions/6-conic/images/32-band-aid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/6-conic/images/32-band-aid.png


--------------------------------------------------------------------------------
/solutions/6-conic/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/6-conic/images/preview.png


--------------------------------------------------------------------------------
/solutions/7-backface/33-birdie.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #33 - Birdie
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/33)
 6 | 
 7 | ![result](./images/33-birdie.png)
 8 | 
 9 | ```html
10 | <div class="left"></div>
11 | <div class="right"></div>
12 | <style>
13 |   body {
14 |     background: #1A4341;
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |     padding-left: 24px;
19 |   }
20 |   .left {
21 |     background: #998235;
22 |     width: 75px;
23 |     height: 150px;
24 |     border-top-left-radius: 150px;
25 |     border-bottom-left-radius: 150px;
26 |     position: relative;
27 |   }
28 |   .left::after {
29 |     content: '';
30 |     width: 30px;
31 |     height: 30px;
32 |     border-radius: 50%;
33 |     background: #0B2429;
34 |     position: absolute;
35 |     left: 30px;
36 |     top: 30px;
37 |   }
38 |   .right {
39 |     margin-top: -100px;
40 |     background: #F3AC3C;
41 |     width: 100px;
42 |     height: 100px;
43 |     border-top-right-radius: 100px;
44 |   }
45 | </style>
46 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/35-ice-cream.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #35 - Ice Cream
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/35)
 6 | 
 7 | ![result](./images/35-ice-cream.png)
 8 | 
 9 | ```html
10 | <div class="ice"></div>
11 | <div class="stick"></div>
12 | <style>
13 |   body {
14 |     background: #293462;
15 |     height: 100%;
16 |     display: flex;
17 |     flex-direction: column;
18 |     justify-content: center;
19 |     align-items: center;
20 |     margin: 0;
21 |   }
22 |   .ice {
23 |     width: 100px;
24 |     height: 150px;
25 |     background: #FFF1C1;
26 |     border-radius: 50px 50px 20px 20px;
27 |   }
28 |   .stick {
29 |     width: 30px;
30 |     height: 50px;
31 |     background: #FE5F55;
32 |     border-radius: 0 0 10px 10px;
33 |   }
34 |   .stick::after {
35 |     position: absolute;
36 |     content: '';
37 |     width: 30px;
38 |     height: 10px;
39 |     background: #A64942;
40 |   }
41 | </style>
42 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/36-interleaved.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #36 - Interleaved
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/36)
 6 | 
 7 | ![result](./images/36-interleaved.png)
 8 | 
 9 | ```html
10 | <div class="stick"></div>
11 | <div class="stick"></div>
12 | <div class="stick"></div>
13 | <div class="stick"></div>
14 | <div class="stick"></div>
15 | <style>
16 |   body {
17 |     background: #1A4341;
18 |     height: 100%;
19 |     display: flex;
20 |     justify-content: space-between;
21 |     margin: 0;
22 |     padding: 0 25px;
23 |   }
24 |   .stick {
25 |     width: 50px;
26 |     height: 200px;
27 |     background: #998235;
28 |     border-radius: 0 0 25px 25px;
29 |   }
30 |   .stick:nth-child(odd) {
31 |     background: #F3AC3C;
32 |     transform: scaleY(-1);
33 |     margin-top: 100px;
34 |   }
35 | </style>
36 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/37-tunnel.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #37 - Tunnel
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/37)
 6 | 
 7 | ![result](./images/37-tunnel.png)
 8 | 
 9 | ```html
10 | <div class="square1"></div>
11 | <div class="square2"></div>
12 | <div class="square3"></div>
13 | <style>
14 |   body {
15 |     margin: 0;
16 |     background: #6592CF;
17 |     display: flex;
18 |     justify-content: center;
19 |     align-items: center;
20 |   }
21 |   div { position: absolute }
22 |   .square1 {
23 |     width: 250px;
24 |     height: 250px;
25 |     background: #243D83;
26 |   }
27 |   .square2 {
28 |     width: 150px;
29 |     height: 150px;
30 |     background: #6592CF;
31 |     transform: rotate(15deg);
32 |   }
33 |   .square3 {
34 |     width: 75px;
35 |     height: 75px;
36 |     background: #243D83;
37 |     transform: rotate(30deg);
38 |   }
39 | </style>
40 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/38-not-simply-square.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #38 - Not Simple Square
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/38)
 6 | 
 7 | ![result](./images/38-not-simply-square.png)
 8 | 
 9 | ```html
10 | <div class="square">
11 |   <div class="sq-r-lg"></div>
12 |   <div class="sq-r-sm"></div>
13 |   <div class="sq-b-lg"></div>
14 |   <div class="sq-b-sm"></div>
15 | </div>
16 | <style>
17 |   body {
18 |     margin: 0;
19 |     background: #293462;
20 |   }
21 |   .square {
22 |     position: relative;
23 |     width: 200px;
24 |     height: 200px;
25 |     background: #FFF1C1;
26 |   }
27 |   .sq-r-lg, .sq-r-sm {
28 |     position: absolute;
29 |     left: 100%;
30 |     width: 100px;
31 |   }
32 |   .sq-r-lg {
33 |     height: 150px;
34 |     background: #FE5F55;
35 |   }
36 |   .sq-r-sm {
37 |     bottom: 0;
38 |     height: 50px;
39 |     background: #A64942;
40 |   }
41 |   .sq-b-lg, .sq-b-sm {
42 |     position: absolute;
43 |     top: 100%;
44 |     height: 100px;
45 |   }
46 |   .sq-b-lg {
47 |     width: 150px;
48 |     background: #FE5F55;
49 |   }
50 |   .sq-b-sm {
51 |     right: 0;
52 |     width: 50px;
53 |     background: #A64942;
54 |   }
55 | </style>
56 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/39-sunset.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #39 - Sunset
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/39)
 6 | 
 7 | ![result](./images/39-sunset.png)
 8 | 
 9 | ```html
10 | <div class="wrapper-sm">
11 |   <div class="hide"></div>
12 | </div>
13 | <div class="wrapper">
14 |   <div class="rectangle"></div>
15 |   <div class="rectangle"></div>
16 |   <div class="rectangle"></div>
17 | </div>
18 | <style>
19 |   body {
20 |     margin: 0;
21 |     height: 100%;
22 |     background: #1A4341;
23 |     display: flex;
24 |     justify-content: center;
25 |     align-items: center;
26 |   }
27 |   .wrapper-sm {
28 |     width: 200px;
29 |     height: 200px;
30 |     position: absolute;
31 |     background: #998235;
32 |     border-radius: 50%;
33 |   }
34 |   .hide {
35 |     height: 140px;
36 |     width: 100%;
37 |     background: #1A4341;
38 |     margin-top: 30px;
39 |   }
40 |   .wrapper {
41 |     z-index: 2;
42 |     width: 250px;
43 |     height: 250px;
44 |     box-sizing: border-box;
45 |     border-radius: 50%;
46 |     overflow: hidden;
47 |     display: flex;
48 |     flex-direction: column;
49 |     align-items: center;
50 |     justify-content: space-between;
51 |     padding: 75px 0;
52 |   }
53 |   .rectangle {
54 |     height: 20px;
55 |     width: 100%;
56 |     background: #F3AC3C;
57 |   }
58 | </style>
59 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/40-letter-b.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #40 - Letter B
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/40)
 6 | 
 7 | ![result](./images/40-letter-b.png)
 8 | 
 9 | ```html
10 | <div class="circle"></div>
11 | <style>
12 |   body {
13 |     background: #6592CF;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 |   }
18 |   .circle {
19 |     width: 200px;
20 |     height: 200px;
21 |     border-radius: 0 50% 50%;
22 |     box-sizing: border-box;
23 |     border: 50px solid #243D83;
24 |     position: relative;
25 |   }
26 |   .circle::after {
27 |     content: '';
28 |     position: absolute;
29 |     width: 50px;
30 |     height: 50px;
31 |     background: #6592CF;
32 |     top: -50px;
33 |   }
34 | </style>
35 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/41-fox-head.md:
--------------------------------------------------------------------------------
 1 | # Battle #7 - Backface
 2 | 
 3 | ## #41 - Fox Head
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/41)
 6 | 
 7 | ![result](./images/41-fox-head.png)
 8 | 
 9 | ```html
10 | <div class="rect">
11 |   <div class="circle"></div>
12 | </div>
13 | <div class="rect flip-x">
14 |   <div class="circle"></div>
15 | </div>
16 | <style>
17 |   body {
18 |     background: #293462;
19 |     display: flex;
20 |     justify-content: center;
21 |     align-items: center;
22 |   }
23 |   .rect {
24 |     width: 50px;
25 |     height: 140px;
26 |     background: #FE5F55;
27 |     border-top-right-radius: 40px;
28 |     position: relative;
29 |   }
30 |   .rect::after {
31 |     content: '';
32 |     position: absolute;
33 |     width: 50px;
34 |     height: 100px;
35 |     background: #293462;
36 |     border-top-right-radius: 40px;
37 |     top: 100px
38 |   }
39 |   .circle {
40 |     position: absolute;
41 |     width: 30px;
42 |     height: 30px;
43 |     background: #293462;
44 |     border-radius: 50%;
45 |     right: 5px;
46 |     top: 60px;
47 |   }
48 |   .flip-x {
49 |     transform: scaleX(-1);
50 |   }
51 | </style>
52 | ```


--------------------------------------------------------------------------------
/solutions/7-backface/images/33-birdie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/33-birdie.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/35-ice-cream.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/35-ice-cream.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/36-interleaved.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/36-interleaved.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/37-tunnel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/37-tunnel.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/38-not-simply-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/38-not-simply-square.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/39-sunset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/39-sunset.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/40-letter-b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/40-letter-b.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/41-fox-head.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/41-fox-head.png


--------------------------------------------------------------------------------
/solutions/7-backface/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/7-backface/images/preview.png


--------------------------------------------------------------------------------
/solutions/8-transition/43-wrench.md:
--------------------------------------------------------------------------------
 1 | # Battle #8 - Transition
 2 | 
 3 | ## #43 - Wrench
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/43)
 6 | 
 7 | ![result](./images/43-wrench.png)
 8 | 
 9 | ```html
10 | <div></div>
11 | <div></div>
12 | <style>
13 |   body {
14 |     background: #6592CF;
15 |     display: flex;
16 |     justify-content: center;
17 |     align-items: center;
18 |   }
19 |   div {
20 |     width: 70px;
21 |     height: 242px;
22 |     box-sizing: border-box;
23 |     border: 30px solid #243D83;
24 |     border-left: 0;
25 |     border-top-right-radius: 100px;
26 |     border-bottom-right-radius: 100px;
27 |     margin-top: 2px;
28 |   }
29 |   div:nth-child(2) {
30 |     transform: scaleX(-1);
31 |     margin-left: -30px;
32 |   }
33 | </style>
34 | ```


--------------------------------------------------------------------------------
/solutions/8-transition/44-stripes.md:
--------------------------------------------------------------------------------
 1 | # Battle #8 - Transition
 2 | 
 3 | ## #44 - Stripes
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/44)
 6 | 
 7 | ![result](./images/44-stripes.png)
 8 | 
 9 | ```html
10 | <div class="circle"></div>
11 | <div class="wrap">
12 |   <div></div>
13 |   <div></div>
14 |   <div></div>
15 |   <div></div>
16 |   <div></div>
17 | </div>
18 | <div class="circle r"></div>
19 | <style>
20 |   body {
21 |     background: #1A4341;
22 |   }
23 |   .wrap {
24 |     display: flex;
25 |     flex-direction: column;
26 |     justify-content: space-between;
27 |     width: 200px;
28 |     height: 180px;
29 |     margin: 60px auto;
30 |   }
31 |   .wrap div {
32 |     width: 100%;
33 |     height: 20px;
34 |     background: #F3AC3C;
35 |   }
36 |   .circle {
37 |     position: absolute;
38 |     width: 300px;
39 |     height: 300px;
40 |     background: #1A4341;
41 |     border-radius: 50%;
42 |     left: -150px;
43 |     top: 0;
44 |   }
45 |   .circle.r {
46 |     left: auto;
47 |     right: -150px;
48 |   }
49 | </style>
50 | ```


--------------------------------------------------------------------------------
/solutions/8-transition/images/43-wrench.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/8-transition/images/43-wrench.png


--------------------------------------------------------------------------------
/solutions/8-transition/images/44-stripes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/8-transition/images/44-stripes.png


--------------------------------------------------------------------------------
/solutions/8-transition/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/8-transition/images/preview.png


--------------------------------------------------------------------------------
/solutions/9-margin/46-mountains.md:
--------------------------------------------------------------------------------
 1 | # Battle #9 - Margin
 2 | 
 3 | ## #46 - Mountains
 4 | 
 5 | [Link to the problem](https://cssbattle.dev/play/46)
 6 | 
 7 | ![result](./images/46-mountains.png)
 8 | 
 9 | ```html
10 | <div class="c">
11 |   <div class="r1"></div>
12 |   <div class="r2"></div>
13 | </div>
14 | <style>
15 |   body {
16 |     display: flex;
17 |     align-items: center;
18 |     justify-content: center;
19 |     background: #293462;
20 |   }
21 |   .c {
22 |     width: 200px;
23 |     height: 200px;
24 |     background: #FFF1C1;
25 |     border-radius: 50%;
26 |     overflow: hidden;
27 |   }
28 |   .r1, .r2 {
29 |     background: #FE5F55;
30 |     width: 200px;
31 |     height: 200px;
32 |     transform: rotate(45deg);
33 |   }
34 |   .r1 { 
35 |     margin-top: 101px;
36 |     margin-left: 41px;
37 |   }
38 |   .r2 {
39 |     margin-top: -130px;
40 |     margin-left: -70px;
41 |   }
42 | </style>
43 | ```


--------------------------------------------------------------------------------
/solutions/9-margin/images/46-mountains.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/9-margin/images/46-mountains.png


--------------------------------------------------------------------------------
/solutions/9-margin/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ngekoding/cssbattle/de051eab4db7c7561e56b8182571a04a73a7e709/solutions/9-margin/images/preview.png


--------------------------------------------------------------------------------