diff --git a/Submission/Phoenix/Task 2 b/Submission/Phoenix/Task 2
new file mode 100644
index 0000000..e6783ca
--- /dev/null
+++ b/Submission/Phoenix/Task 2	
@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.body {
+  background: #1D4569;
+  height: 100%;
+  width: 100%;
+}
+
+.dog {
+  width: 120px;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.body {
+  background: #60C8E7;
+  border-radius: 300px 300px 0 0;
+  height: 300px;
+}
+
+.beard {
+  width: 55px;
+  height: 65px;
+  background: #087BA5;
+  margin: 0 auto;
+  border-radius: 20px;
+  position: relative;
+  &:after {
+    content: '';
+    background: #087BA5;
+    width: 26px;
+    height: 13px;
+    border-radius: 0 0 25px 25px;
+    display: block;
+    margin: 0 auto;
+    transform: translateY(64px);
+  }
+  &:before {
+    content: '';
+    background: #000;
+    width: 20px;
+    height: 10px;
+    border-radius: 0 0 20px 20px;
+    display: block;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.mouth {
+  background: #1A243C;
+  width: 30px;
+  height: 15px;
+  border-radius: 0 0 30px 30px;
+  position: absolute;
+  top: 22px;
+  margin: auto;
+  left: 0;
+  right: 0;
+  border-top: 3px solid #fff;
+  box-sizing: border-box;
+  .tongue {
+    width: 20px;
+    height: 30px;
+    border-radius: 5px 5px 10px 10px;
+    background: #FF6B5A;
+    margin: 0 auto;
+    position: relative;
+    top: 4px;
+    transition: 300ms;
+    animation: grow .1s infinite alternate;
+  }
+}
+
+.eyes {
+  background: #fff;
+  width: 20px;
+  height: 24px;
+  border-radius: 20px 20px 0 0;
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  top: 2px;
+  &:before, &:after {
+    content: '';
+    width: 10px;
+    height: 10px;
+    background: #000;
+    display: block;
+    border-radius: 50%;
+    top: 50%;
+    position: absolute;
+    animation: squeeze 1.2s infinite;
+  }
+  &:before {
+    left: -13px;
+  }
+  &:after {
+    right: -13px;
+  }
+}
+
+.belt {
+  height: 30px;
+  background: #FF6B5A;
+  margin-top: 20px;
+  position: relative;
+  .locket {
+    width: 30px;
+    height: 30px;
+    background: #FFC442;
+    margin: 0 auto;
+    border-radius: 50%;
+    transform: translateY(50%);
+  }
+  .dot {
+    width: 10px;
+    height: 10px;
+    background: #fff;
+    position: absolute;
+    border-radius: 50%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    &.dot1 {
+      margin-left: 10px;
+    }
+    &.dot2 {
+      margin-left: 34px;
+    }
+    &.dot3 {
+      margin-left: 77px;
+    }
+    &.dot4 {
+      margin-left: 100px;
+    }
+  }
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    width: 5px;
+    height: 10px;
+    background: #fff;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+  &:before {
+    left: -5px;
+    border-radius: 10px 0 0 10px;
+  }
+  &:after {
+    right: -5px;
+    border-radius: 0 10px 10px 0;
+  }
+}
+
+.stomach {
+  width: 56px;
+  height: 130px;
+  background: #fff;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 120px 120px 0 0;
+}
+
+.legs {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 12px;
+  &:before, &:after {
+    height: 12px;
+    border-radius: 20px 20px 0 0;
+    display: inline-block;
+    content: '';
+    position: absolute;
+    background: #087BA5;
+    width: 45px;
+  }
+  &:before {
+    left: -37px;
+  }
+  &:after {
+    right: -37px;
+  }
+  .left, .right {
+    display: inline;
+    width: 12px;
+    height: 55px;
+    background: #087BA5;
+    position: absolute;
+    bottom: 0;
+    &:before {
+      content: '';
+      width: 28px;
+      height: 12px;
+      background: #60C8E7;
+      border-radius: 20px 20px 0 0;
+      display: inline-block;
+      bottom: 0;
+      position: absolute;
+    }
+  }
+  .left {
+    left: -12px;
+    border-radius: 20px 0 0 0;
+    &:before {
+      transform: translateX(-1px);
+    }
+  }
+  .right {
+    right: -12px;
+    border-radius: 0 20px 0 0;
+    z-index: 1;
+    &:before {
+      transform: translateX(-13px); 
+    }
+  }
+}
+
+.ears {
+  position: absolute;
+  z-index: -1;
+  top: -20px;
+  &:after, &:before {
+    content: '';
+    display: inline-block;
+    background: #087BA5;
+    width: 40px;
+    height: 90px;
+    border-radius: 100% 100% 0 0;
+  }
+  &:after {
+    transform: translateX(40px);
+    border: 10px solid #60C8E7;
+    box-sizing: border-box;
+  }
+}
+
+.tail {
+  background: #60C8E7;
+  width: 14px;
+  height: 80px;
+  position: absolute;
+  z-index: -1;
+  right: 10px;
+  bottom: 40px;
+  transform: rotate(30deg);
+  border-radius: 14px;
+  transform-origin: bottom;
+  transition: 300ms;
+  animation: shake .08s infinite alternate;
+}
+
+.tag {
+  border-left: 5px solid #FF6B5A;
+  border-bottom: 5px solid #FF6B5A;
+  width: 500%;
+  height: 161px;
+  z-index: 2;
+  position: absolute;
+  top: 30px;
+  left: 100px;
+  box-sizing: border-box;
+  border-bottom-left-radius: 40px;
+}
+
+@keyframes squeeze {
+  90% {
+    transform: none;
+    animation-timing-function: ease-in;
+  }
+  93% {
+    transform: scale(1.2, 0.3);
+  }
+  100% {
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes grow {
+  0% {
+    animation-timing-function: ease-in;
+  }
+  100% {
+    height: 35px;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: rotate(30deg);
+  }
+  100% {
+    transform: rotate(40deg);
+  }
+}
+</style>
+</head>
+<body>
+
+<div class="dog">
+  <div class="ears"></div>
+  
+  <div class="body">
+    <div class="eyes"></div>
+    <div class="beard">
+      <div class="mouth">
+        <div class="tongue"></div>
+      </div>
+    </div>
+    <div class="belt">
+      <div class="locket"></div>
+      <div class="dot dot1"></div>
+      <div class="dot dot2"></div>
+      <div class="dot dot3"></div>
+      <div class="dot dot4"></div>
+      <div class="tag"></div>
+    </div>
+    <div class="stomach">
+    </div>
+    <div class="legs">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+  <div class="tail">
+  </div>
+</div>
+</body>
+</html> 
diff --git a/Submissions/Phoenix/Task 1 b/Submissions/Phoenix/Task 1
new file mode 100644
index 0000000..e004b20
--- /dev/null
+++ b/Submissions/Phoenix/Task 1	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.dot {
+    height: 25px;
+    width: 25px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+}
+</style>
+</head>
+<body>
+
+<div style="text-align:center">
+  <h1>Round Dots / Circles</h1>
+  <span class="dot"></span>
+</div>
+
+</body>
+</html> 
diff --git a/Submissions/Phoenix/Task 3 b/Submissions/Phoenix/Task 3
new file mode 100644
index 0000000..b70533b
--- /dev/null
+++ b/Submissions/Phoenix/Task 3	
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  margin:0;
+  padding:0;
+  background-color:#98a4a6;
+}
+
+#batman {
+  position:absolute;
+  left:50%;
+  top:50%;
+  margin:-100px 0px 0px -175px;
+  width:350px;
+  height:200px;
+  background-color:#111;
+  border-radius: 175px / 100px;
+}
+
+.inner-y {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -87px 0px 0px -160px;
+  width: 320px;
+  height: 174px;
+  background-color: #edc233;
+  border-radius: 195px / 106px;
+  overflow:hidden;
+}
+
+.inner-b {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -75px 0px 0px -148px;
+  width: 296px;
+  height: 150px;
+  background-color: #111;
+  border-radius: 205px / 106px;
+}
+
+.cut-lr, .cut-rr {
+  position: absolute;
+  width: 54px;
+  height: 54px;
+  border-radius: 500px;
+  background-color: #edc233;
+  top: 32px;
+  margin: -27px 0px 0px -27px;
+}
+
+.cut-bll, .cut-brr {
+  position: absolute;
+  width: 78px;
+  height: 44px;
+  border-radius: 205px / 106px;
+  background-color: #edc233;
+  bottom:-2px;
+}
+
+.cut-lr {
+  left:102px;
+}
+
+.cut-rr {
+  left:192px;
+}
+
+.cut-bll {
+  -webkit-transform:rotate(45deg);
+  -moz-transform:rotate(45deg);
+  -ms-transform:rotate(45deg);
+  -o-transform:rotate(45deg);
+  transform:rotate(45deg);
+  left:42px;
+}
+
+.cut-brr {
+  -webkit-transform:rotate(-45deg);
+  -moz-transform:rotate(-45deg);
+  -ms-transform:rotate(-45deg);
+  -o-transform:rotate(-45deg);
+  transform:rotate(-45deg);
+  right:42px;
+}
+
+.cut-blll, .cut-bllr, .cut-brll, .cut-brlr {
+  position: absolute;
+  width: 70px;
+  height: 32px;
+  border-radius: 205px / 106px;
+  background-color: #edc233;
+  bottom: 1px;
+}
+
+.cut-blll, .cut-brll {
+  -webkit-transform:rotate(-112deg);
+  -moz-transform:rotate(-112deg);
+  -ms-transform:rotate(-112deg);
+  -o-transform:rotate(-112deg);
+  transform:rotate(-112deg);
+}
+
+.cut-blll {
+  right:72px;
+}
+
+.cut-brll {
+  left:93px;
+}
+
+.cut-brlr {
+  left:72px;
+}
+
+.cut-bllr {
+  right:93px;
+}
+
+.cut-brlr, .cut-bllr {
+  -webkit-transform:rotate(-67deg);
+  -moz-transform:rotate(-67deg);
+  -ms-transform:rotate(-67deg);
+  -o-transform:rotate(-67deg);
+  transform:rotate(-67deg);
+}
+
+.cut-hd {
+  width: 110px;
+  height: 34px;
+  background: #edc233;
+  left: 92px;
+  top:-2px;
+  position: absolute;
+}
+
+.drw-hd-m {
+  position: absolute;
+  width: 36px;
+  height: 56px;
+  background-color: #111;
+  left: 50%;
+  margin-left: -19px;
+  border-radius: 230px / 110px;
+  top: 23px;
+}
+
+.drw-hd-lt, .drw-hd-rt {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top:2px;
+  border-bottom: 28px solid #111;
+}
+
+.drw-hd-lt {
+  left:129px;
+  border-right: 14px solid transparent;
+  border-left: 1px solid transparent;
+}
+
+.drw-hd-rt {
+  right:131px;
+  border-left: 14px solid transparent;
+  border-right: 1px solid transparent;
+}
+</style>
+</head>
+<body>
+
+<div id="batman">
+  <div class="inner-y">
+    <div class="inner-b">
+      <div class="cut-lr"></div>
+      <div class="cut-rr"></div>
+      <div class="cut-bll"></div>
+      <div class="cut-brr"></div>
+      <div class="cut-blll"></div>
+      <div class="cut-bllr"></div>
+      <div class="cut-brll"></div>
+      <div class="cut-brlr"></div>
+      <div class="cut-hd"></div>
+      <div class="drw-hd-m"></div>
+      <div class="drw-hd-lt"></div>
+      <div class="drw-hd-rt"></div>
+    </div>
+  </div>
+</div>
+</body>
+</html> 
