🎯CSS Battles @Cozey🎯

#1 Simply Square CodeNow

<div></div>
<style>
  body{
    background:#5d3a3a;
    margin: 0;
  }
  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>

#2 Carrom CodeNow

<div></div>
<div></div>
<div></div>
<div></div>
<style>
    body{
      background: #62374e;
      margin: 0px;
    }
  div{
    height: 50px;
    width: 50px;
    background: #fdc57b;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-300%, -200%)
  }
  div:nth-of-type(2){
    transform: translate(200%, -200%)
  }
  div:nth-of-type(3){
    transform: translate(200%, 100%)
  }
  div:nth-of-type(4){
    transform: translate(-300%, 100%)
  }
</style>

#3 Push Button CodeNow

<div id = "rectangle"></div>
<div id = "circles"></div>
<style>
  body{
    background: #6592CF;
    margin: 0;
  }
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #rectangle{
    background: #243D83;
    height: 150px;
    width: 300px
  }
  #circles{
    height: 250px;
    width: 250px;
    background: #6592CF;
    border-radius: 50%;
  }
  #circles:before,
  #circles:after{
      content: "";
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  #circles:before{
    height: 150px;
    width: 150px;
    background: #243D83;
  }
  #circles:after{
    height: 50px;
    width: 50px;
    background: #EEB850;
  }
</style>

#4 Ups n Down CodeNow

<div></div>
<style>
  body{
    background: #62306D;
    margin: 0;
  }
  div{
    height: 100px;
    width: 100px;
    background: #F7EC7D;
    border-radius: 50% 50% 0% 0%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  div:before,
  div:after{
    content: "";
    height: 100px;
    width: 100px;
    background: #F7EC7D;
    border-radius: 0% 0% 50% 50%;
    position: absolute;
  }
  div:before{
    left: 0;
    transform: translate(-100%,100%);
  }
  div:after{
    left: 0;
    transform: translate(100%,100%);
  }
</style>

#5 Acid Rain CodeNow

<div></div>
<div></div>
<div></div>
<style>
  body{
    background: #0B2429;
    margin: 0;
  }
  div{
    height: 120px;
    width: 120px;
    position: absolute;
  }
  div:nth-of-type(1){
    background: #F3AC3C;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(0%, -100%);    
  }
  div:nth-of-type(2){
    background: #998235;
    border-radius: 50% 0% 50% 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
  }
  div:nth-of-type(3){
    background: #F3AC3C;
    border-radius: 50% 0% 50% 50%;
    top: 50%;
    left: 50%;
    transform: translate(-100%, 0%);    
  }
</style>

#6 Missing Slice CodeNow

<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
  body{
    background: #E3516E;
    margin: 0;
  }
  div{
    height: 200px;
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    border-radius: 50%;
    overflow: hidden;
  }
  span{
    height: 50%;
    width: 50%;
  }
  span:nth-of-type(1){
    background: #51B5A9;
  }
    span:nth-of-type(2){
    background: #FADE8B;
  }
    span:nth-of-type(3){
    background: #F7F3D7;
  }
</style>

#7 Leafy Trail CodeNow

<div></div>
<div></div>
<div></div>
<style>
  body{
    background: #0B2429;
    margin: 0;
  }
  div{
    height: 150px;
    width: 150px;
    border-radius: 100px 0 100px 0;
    position: absolute;
    top: 50%;
  }
  div:nth-of-type(1){
    left: 50%;
    background: #1A4341;
    transform: translate(-125px, -50%);
  }    
  div:nth-of-type(2){
    left: 50%;
    background: #998235;
    transform: translate(-75px, -50%);
  }
  div:nth-of-type(3){
    left: 50%;
    background: #F3AC3C;
    transform: translate(-25px, -50%);
  }
</style>

#8 Forking Crazy CodeNow

<div class ="bottom"></div>
<div class ="middle"></div>
<div class ="top">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
body{
    background: #6592CF;
      margin: 0;
  }
.bottom{
    height: 55px;
    width: 20px;
    background: #060F55;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%);
  }
.middle{
    height: 140px;
    width: 140px;
    background: #060F55;
    position: absolute;
    left: 50%;
    bottom: 50px;
    border-radius: 50%;
    transform: translate(-50%);
  }
.top{
    height: 130px;
    width: 140px;
    position: absolute;
    right: 50%;
    top: 50;
    transform: translate(50%);
    display: flex;
  }
span{
    width: calc(100% / 7);
  }
span:nth-of-type(odd){
    height: 100%;
    background: #060F55;
    border-radius: 10px 10px 0 0;
  }
span:nth-of-type(even){
    height: 110px;
    background: #6592CF;
    border-radius: 0 0 10px 10px;
}
</style>

#9 Tesseract CodeNow

<div id ="rect">
  <div id ="square"></div>
</div>
<div id="square2"></div>
<div id ="circle"></div>
<style>
  body{
    background: #222730;
    margin: 0px;
    position: relative;
  }
  #rect{
    height: 150px;
    width: 400px;
    background: #4CAAB3;
    position: absolute;
    top: 75px;
  }
  #square{
    height: 150px;
    width: 150px;
    transform: rotate(45deg);
    border: 50px solid #222730;
    margin: auto;
    position: absolute;
    top: -50px;
    left: 75px;
  }
  #square2{
    background: #4CAAB3;
    height: 151px;
    width: 151px;
    margin: auto;
    position: relative;
    top: 75px;
    transform: rotate(45deg);
  }
  #circle{
    height: 50px;
    width: 50px;
    background: #393E46;
    border-radius: 50%;
    position: relative;
    top: -26px;
    margin: auto;
  }


</style>

#10 Cloaked Spirits CodeNow

COMING SOON...

#11 Eye of Sauron CodeNow

COMING SOON...

#12 Wiggly Moustache CodeNow

COMING SOON...

Circle Loop

COMING SOON...