Update Project

README.md

@@ -14,4 +14,8 @@ Here you will find my solutions to some CSSBattle challenges.
 - [#6 - Missing Slice](Solutions/01_Pilot_Battle/06_Missing_Slice.md)
 - [#7 - Leafy Trail](Solutions/01_Pilot_Battle/07_Leafy_Trail.md)
 - [#8 - Forking Crazy](Solutions/01_Pilot_Battle/08_Forking_Crazy.md)
+- [#9 - Tesseract](Solutions/01_Pilot_Battle/09_Tesseract.md)
+- [#10 - Cloaked Spirits](Solutions/01_Pilot_Battle/10_Cloaked_Spirits.md)
+- [#11 - Eye of Sauron](Solutions/01_Pilot_Battle/11_Eye_of_Sauron.md)
+
 

Solutions/01_Pilot_Battle/09_Tesseract.md

@@ -0,0 +1,50 @@
+# #9 - Tesseract
+
+## 💥 Challenge
+![Tesseract](img/09_Tesseract.png)
+
+## 🔎 Link
+[Try it too and go to battle!](https://cssbattle.dev/play/9)
+
+## 💡 Solution
+```
+<div class="rectangle">
+  <div class="square">
+    <div class="circle"><div>
+  </div>
+</div>
+<style>
+  body {
+    margin: 0px;
+    display: grid;
+    place-content: center;
+    background: #222730;
+  }
+  .rectangle {
+    width: 400px;
+    height: 150px;
+    background: #4CAAB3;
+    position: relative;
+  }
+  .square {
+    width: 150px;
+    height: 150px;
+    position: absolute;
+    transform: rotate(45deg);
+    top: -50px;
+    left: 75px;
+    border: 50px solid #222730;
+    background-color: #4CAAB3;
+    -webkit-backface-visibility: hidden;
+  }
+  .circle {
+    position: absolute;
+    background: #393E46;
+    width: 50px;
+    height: 50px;
+    top: 50px;
+    left: 50px;
+    border-radius: 50%;
+  }
+</style>
+```

Solutions/01_Pilot_Battle/10_Cloaked_Spirits.md

@@ -0,0 +1,57 @@
+# #10 - Cloaked Spirits
+
+## 💥 Challenge
+![Cloaked Spirits](img/10_Cloaked_Spirits.png)
+
+## 🔎 Link
+[Try it too and go to battle!](https://cssbattle.dev/play/10)
+
+## 💡 Solution
+```
+<div class="smaller-rectangle"></div>
+<div class="rectangle"></div>
+<div class="smaller-rectangle"></div>
+<style>
+  body {
+    margin: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    background: #62306D;
+  }
+  .rectangle {
+    width: 100px;
+    height: 200px;
+    background: #F7EC7D;
+    position: relative;
+  }
+  .rectangle::after {
+    content:"";
+    display: block;
+    height: 60px;
+    width: 60px;
+    background: #AA445F;
+    border: 20px solid #E38F66;
+    border-radius: 50%;
+    position: absolute;
+    top: -50px;
+  }
+  .smaller-rectangle {
+    width: 100px;
+    height: 100px;
+    background: #F7EC7D;
+    position: relative;
+  }
+  .smaller-rectangle::after {
+    content:"";
+    display: block;
+    height: 60px;
+    width: 60px;
+    background: #E38F66;
+    border: 20px solid #AA445F;
+    border-radius: 50%;
+    position: absolute;
+    top: -50px;
+  }
+</style>
+```

Solutions/01_Pilot_Battle/11_Eye_of_Sauron.md

@@ -0,0 +1,60 @@
+# #11 - Eye of Sauron
+
+## 💥 Challenge
+![Eye of Sauron](img/11_Eye_of_Sauron.png)
+
+## 🔎 Link
+[Try it too and go to battle!](https://cssbattle.dev/play/11)
+
+## 💡 Solution
+```
+<div class="circle">
+  <div class="half-circle"></div>
+  <div class="half-circle"></div>
+  <div class="smaller-circle"><div>
+</div>
+<style>
+  body {
+    margin: 0px;
+    display: flex;
+    place-content: center;
+    align-items: center;
+    background: #191210;
+  }
+  .circle {
+    width: 100px;
+    height: 100px;
+    background: #191210;
+    border: 20px solid #ECA03D;
+    border-radius: 100px;
+    position: relative;
+  }
+  .half-circle {
+    width: 60px;
+    height: 30px;
+    background: #191210;
+    border: 20px solid #ECA03D;
+    border-radius: 0px 0px 50px 50px;
+    border-top: 0;
+    position: absolute;
+  }
+  .half-circle:nth-child(1) {
+    left: -100px; 
+    bottom: .4px;
+  }
+  .half-circle:nth-child(2) {
+    right: -100px; 
+    top: .4px;
+    transform: rotate(180deg);
+  }
+  .smaller-circle {
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+    background: #84271C;
+    position: absolute;
+    top: 25px;
+    left: 25px;
+  }
+</style>
+```