🔰CSS Battle @Cozey🔰

🔰CSS Battle @Cozey🔰

Simplest Code For Beginner Challenges of CSS Battle.

Basnet's photo
Basnet
·

6 min read

#1 Simply Square CodeNow

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

#2 Carrom CodeNow

<div id ="a"></div>
<div id ="b"></div>
<div id ="c"></div>
<div id ="d"></div>

<style>
  body{
    background: #62374e;
    margin: 0px;
  }
  div{
    background: #fdc57b;
    height: 50px;
    width: 50px;
  }
  #a{
    margin-top: 50px;
    margin-left: 50px;
  }
  #b{
    margin-top: 100px;
    margin-left: 50px;
  }
  #c{
    margin-top:-200px;
    margin-left: 300px;
  }
  #d{
    margin-top:100px;
    margin-left:300px;
  }
</style>

#3 Push Button CodeNow

<div id="rect">
  <div id="middle">
    <div id="inner">
      </div>
    </div>
</div>
<style>
  body{
    background: #6592CF;
    margin: 0px;
  }
  #rect{
    background: #243D83;
    height: 150px;
    width: 300px;
    margin: 75px auto;
  }
  #middle{
    background: #243D83;
    border: 50px solid #6592CF;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
    position: relative;
    bottom: 50px;
  }
  #inner{
    background: #EEB850;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin: 50px auto;

  }

</style>

#4 Ups n Down CodeNow

<div id ="a">
    <div id ="b">
      <div id ="c">
    </div>
  </div>
</div>
<style>
  body{
    margin: 0px;
    background: #62306D;
  }
  div {
    width: 100px;
    height: 100px;
  }
  #a {
    background: #F7EC7D;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    position: absolute;
    top: 150px;
    left: 50px;
  }
    #b {
    background: #F7EC7D;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    position: absolute;
    top: -100px;
    left: 100px;
  }
    #c {
    background: #F7EC7D;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    position: absolute;
    top: 100px;
    left: 100px;
</style>

#5 Acid Rain CodeNow

<div id = "a"> 
 <div id = "b">
  <div id = "c">
   </div>
  </div>
</div>
<style>
  body{
    margin: 0;
    background: #0B2429;
  }
  #a{
    background: #F3AC3C;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 200px;
  }
  #b{
    background: #998235;
    border-radius: 50% 0% 50% 50%;
    height: 120px;
    width: 120px;
    position: absolute;
    top: 60px;
    right: 60px;
  }
    #c{
    background: #F3AC3C;
    height: 120px;
    width: 120px;
    border-radius: 50% 0% 50% 50%;
    position: absolute;
    top: 60px;
    right: 60px;
  }

</style>

#6 Missing Slice CodeNow

<div class = "pie">
  <div id ="a">
    <div id ="b">
      <div id ="c">
  </div>
</div>
<style>
  body{
    margin: 0;
    background: #E3516E;
  }
  .pie{
    position: relative;
    top: 50px;
    left: 100px;
  }
  #a{
    height: 100px;
    width: 100px;
    background: #51B5A9;
    border-radius: 100% 0% 0% 0%;
  }
  #b{
    height: 100px;
    width: 100px;
    background: #FADE8B;
    border-radius: 0% 1000% 0% 0%;
    position: absolute;
    left: 100px;
  }
  #c{
    height: 100px;
    width: 100px;
    background: #F7F3D7;
    border-radius: 0% 0% 0% 100%;
    position: absolute;
    top: 100px;
    left:-100px;
  }
</style>

#7 Leafy Trail CodeNow

<div class="group">
  <div id="a">
    <div id="b">
      <div id="c">
        </div>
      </div>
    </div>
</div>
<style>
  body{
    background: #0B2429;
    margin: 0;
  }
  .group{
    position:relative;
    top: 75px;
    left: 75px;
  }
  #a{
    height: 150px;
    width: 150px;
    background: #1A4341;
    border-radius: 65% 0;
  }
    #b{
    height: 150px;
    width: 150px;
    background: #998235;
    border-radius: 65% 0;
    position: absolute;
    left: 50px;
  }
      #c{
    height: 150px;
    width: 150px;
    background: #F3AC3C;
    border-radius: 65% 0;
    position: absolute;
    left: 50px;
  }

</style>

#8 Forking Crazy CodeNow

<div class = "group">
  <div id = "base">
    <div id = "a">
      <div id = "b">
        <div id = "c">
          <div id = "d">
            <div id = "e">
              <div id = "f">
                <div id = "g">
                  <div id = "bottom">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
<style>
  body{
    margin: 0;
    background: #6592CF;
  }
  .group{
    position: relative;
    top: 110px;
    left: 130px;
  }
  #base{
    height: 140px;
    width: 140px;
    background: #060F55;
    border-radius: 0% 0% 50% 50%;
  }
  #a{
    height: 110px;
    width: 20px;
    background: #060F55;
    position: absolute;
    top: -60px;
    border-radius: 50px;
  }
    #b{
    height: 110px;
    width: 20px;
    background: #6592CF;
    position: absolute;
    top: 0px;
    right: -20px;
    border-radius: 50px;
  }
    #c{
    height: 110px;
    width: 20px;
    background: #060F55;
    position: absolute;
    top: 0px;
    right: -20px;
    border-radius: 50px;
  }
    #d{
    height: 110px;
    width: 20px;
    background: #6592CF;
    position: absolute;
    top: 0px;
    right: -20px;
    border-radius: 50px;
  }
      #e{
    height: 110px;
    width: 20px;
    background: #060F55;
    position: absolute;
    top: 0px;
    right: -20px;
    border-radius: 50px;
  }
    #f{
    height: 110px;
    width: 20px;
    background: #6592CF;
    position: absolute;
    top: 0px;
    right: -20px;
    border-radius: 50px;
  }
        #g{
    height: 110px;
    width: 20px;
    background: #060F55;
    position: absolute;
    top: 0px;
    right: -20px;
    border-radius: 50px;
  }
  #bottom{
    height: 70px;
    width: 20px;
    background: #060F55;
    position: absolute;
    top: 199px;
    left: -60px;
  }

</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

<div class="container">
    <div id="base">
      <div id="pillar">
        <div id="top">
          <div id="left">
            <div id="right">
              </div>
            </div>
          </div>
        </div>
      </div>
</div>
<style>
  body{
    background: #62306D;
    margin: 0;
  }
  .container{
    position: relative;
  }
  #base{
    height: 100px;
    width: 300px;
    background: #F7EC7D;
    margin: 200px auto;
  }
    #pillar{
    height: 100px;
    width: 100px;
    background: #F7EC7D;
    margin: -100px auto;
       position: absolute;
    top: 0px;
    left: 150px;
  }
  #top{
    height: 60px;
    width: 60px;
    background: #AA445F;
    border: 20px solid #E38F66;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: -50px;
    right: 0px;
  }
    #left{
    height: 60px;
    width: 60px;
    background: #E38F66;
    border: 20px solid #AA445F;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: 80px;
    right: 80px;
  }
      #right{
    height: 60px;
    width: 60px;
    background: #E38F66;
    border: 20px solid #AA445F;
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: -20px;
    left: 180px;
  }
</style>

#11 Eye of Sauron CodeNow

<div id="circle">
  <div id="left">
    <div id="right">
      <div id="inner">
        </div>
      </div>
    </div>
</div>
<style>
  body{
    background: #191210;
    margin: 0;
  }
  #inner{
    height: 50px;
    width: 50px;
    background: #84271C;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    right: -95px;
  }
  #circle{
    height: 100px;
    width: 100px;
    border: 20px solid #ECA03D;
    border-radius: 50%;
    margin: 80px auto;
    }
  #left{
    height: 30px;
    width: 60px;
    border: 20px solid #ECA03D;
    border-top: 0;
    border-radius: 0px 0px 50px 50px;
    position: absolute;
    top: 150px;
    right: 250px;
  }
  #right{
    height: 30px;
    width: 60px;
    border: 20px solid #ECA03D;
    border-top: 0;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(180deg);
    position: absolute;
    top: -50px;
    left: 180px;
  }

</style>

#12 Wiggly Moustache CodeNow

<div id = "a">
    <div id = "b">
      <div id = "c">
        </div>
      </div>
</div>
<div id="dot1"></div>
<div id="dot2"></div>
<style>
  body{
    background: #F5D6B4;
    margin: 0;
  }
  div{
    position: relative;
  }
  #a{
    height: 30px;
    width: 60px;
    border: 20px solid #D86F45;
    border-radius: 0px 0px 50px 50px;
    border-top: 0px;
    position: absolute;
    top: 150px;
    left: 70px;
  }
    #b{
    height: 30px;
    width: 60px;
    border: 20px solid #D86F45;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(180deg);
    border-top: 0px;
    position: absolute;
    top: -50px;
    left: 60px;
  }
  #c{
    height: 30px;
    width: 60px;
    border: 20px solid #D86F45;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(180deg);
    border-top: 0px;
    position: absolute;
    top: -50px;
    left: -100px;
  }
  #dot1{
    height: 20px;
    width: 20px;
    background: #D86F45;
    border-radius: 50%;
    position: relative; 
    top: 140px;
    right: -70px;
  }
    #dot2{
    height: 20px;
    width: 20px;
    background: #D86F45;
    border-radius: 50%;
    position: absolute;
    top: 140px;
    right: 70px;
  }  

</style>

Circle Loop

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
  body{
    background: #222730;
    margin: 0;
  }
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%. -50%);
  }
  span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 7px solid #00FFFF;
  }
  span:nth-of-type(1){
    height: 240px;
    width:240px;
  }
    span:nth-of-type(2){
    height: 200px;
    width: 200px;
  }
    span:nth-of-type(3){
    height: 160px;
    width:160px;
  }
    span:nth-of-type(4){
    height: 120px;
    width:120px;
  }
    span:nth-of-type(5){
    height: 80px;
    width:80px;
  }
    span:nth-of-type(6){
    height: 40px;
    width:40px;
  }

</style>