krishnadevz/koala.html

## koala.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./ind.css">
    <title>Koala</title>
  <style>
  body{
    background: rgb(197, 231, 197);
}
.box{
    position: relative;
    margin: auto;
    display: block;
    margin-top: 8%;
    width: 600px;
    height: 420px;
    background: none;
    border: solid 4px white;
}
.head{
    position: absolute;
    top: 16.5%;
    left: 25%;
    width: 50%;
    height: 67%;
    background: #A6BECF;
    border-radius: 50%;
  }
  .head-copy{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #A6BECF;
    border-radius: 50%;
    z-index: 2;
  }
  .ear-left{
    position: absolute;
    width: 60%;
    height: 65%;
    left: -20%;
    top: 5%;
    background: #A6BECF;
    border-radius: 50%;
    z-index: 1;}
  .ear-right{
    position: absolute;
    width: 60%;
    height: 65%;
    right: -20%;
    top: 5%;
    background: #A6BECF;
    border-radius: 50%;
    z-index: 1;
}
.inner-ear{
    position: absolute;
    border-radius: 50%;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: #819CAF;
  }
  .eye-left{
    position: absolute;
    background: white;
    width: 30%;
    height: 33%;
    top: 25%;
    left: 21%;
    border-radius: 50%;
    z-index: 3;
  }
  .eye-right{
    position: absolute;
    background: white;
    width: 30%;
    height: 33%;
    top: 25%;
    right: 21%;
    border-radius: 50%;
    z-index: 2;
  }.pupil{
    position: absolute;
    width: 28%;
    height: 30%;
    top: 35%;
    left: 36%;
    border-radius: 50%;
    background: black;
}
.nose{
    position: absolute;
    background: #BE845F;
    width: 25%;
    height: 42.5%;
    left: 37%;
    top: 45%;
    border-radius: 50px;
    z-index: 4;
  }
  .hair-left{
    position: absolute;
    top: -8%;
    left: 30%;
    width: 20%;
    height: 20%;
    background:  #A6BECF;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }.hair-right{
    position: absolute;
    top: -4%;
    left: 48%;
    width: 20%;
    height: 20%;
    background:  #A6BECF;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  </style>
</head>
<body>
    <body>
        <!-- Begin Image -->
        <!-- Invisible Box-->
        <div class="box">

           <!-- Circular Head-->
           <div class="head">

             <!-- Circular Head Copy -->
             <div class="head-copy"></div>

              <!-- Left Ear ~ Light Gray-->
             <div class="ear-left">

              <!-- Inner ear ~ Dark Gray -->
             <div class="inner-ear"></div>
             </div>

             <!-- Right Ear ~ Light Gray-->
              <div class="ear-right">
             <!-- Inner Ear ~ Dark Gray-->
               <div class="inner-ear"></div>
             </div>

             <!-- Left Outer Eye ~ White -->
             <div class="eye-left">
               <!-- Pupil ~ Black -->
               <div class="pupil">
               </div>
             </div>

             <!-- Right Outer Eye ~ White -->
             <div class="eye-right">
               <!-- Pupil ~ Black -->
               <div class="pupil">
               </div>
             </div>

              <!-- Nose ~ Brown -->
              <div class="nose">
              </div>

              <!-- Hair ~ Light Gray -->
             <div class="hair-left"></div>
             <div class="hair-right"></div>

           <!-- End Head -->
           </div>
        <!-- End Invisible Box -->
        </div></body>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./ind.css">
	<title>Koala</title>
	<style>
	body{
	background: rgb(197, 231, 197);
	}
	.box{
	position: relative;
	margin: auto;
	display: block;
	margin-top: 8%;
	width: 600px;
	height: 420px;
	background: none;
	border: solid 4px white;
	}
	.head{
	position: absolute;
	top: 16.5%;
	left: 25%;
	width: 50%;
	height: 67%;
	background: #A6BECF;
	border-radius: 50%;
	}
	.head-copy{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #A6BECF;
	border-radius: 50%;
	z-index: 2;
	}
	.ear-left{
	position: absolute;
	width: 60%;
	height: 65%;
	left: -20%;
	top: 5%;
	background: #A6BECF;
	border-radius: 50%;
	z-index: 1;}
	.ear-right{
	position: absolute;
	width: 60%;
	height: 65%;
	right: -20%;
	top: 5%;
	background: #A6BECF;
	border-radius: 50%;
	z-index: 1;
	}
	.inner-ear{
	position: absolute;
	border-radius: 50%;
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	background: #819CAF;
	}
	.eye-left{
	position: absolute;
	background: white;
	width: 30%;
	height: 33%;
	top: 25%;
	left: 21%;
	border-radius: 50%;
	z-index: 3;
	}
	.eye-right{
	position: absolute;
	background: white;
	width: 30%;
	height: 33%;
	top: 25%;
	right: 21%;
	border-radius: 50%;
	z-index: 2;
	}.pupil{
	position: absolute;
	width: 28%;
	height: 30%;
	top: 35%;
	left: 36%;
	border-radius: 50%;
	background: black;
	}
	.nose{
	position: absolute;
	background: #BE845F;
	width: 25%;
	height: 42.5%;
	left: 37%;
	top: 45%;
	border-radius: 50px;
	z-index: 4;
	}
	.hair-left{
	position: absolute;
	top: -8%;
	left: 30%;
	width: 20%;
	height: 20%;
	background: #A6BECF;
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	}.hair-right{
	position: absolute;
	top: -4%;
	left: 48%;
	width: 20%;
	height: 20%;
	background: #A6BECF;
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	}
	</style>
	</head>
	<body>
	<body>
	<!-- Begin Image -->
	<!-- Invisible Box-->
	<div class="box">

	<!-- Circular Head-->
	<div class="head">

	<!-- Circular Head Copy -->
	<div class="head-copy"></div>

	<!-- Left Ear ~ Light Gray-->
	<div class="ear-left">

	<!-- Inner ear ~ Dark Gray -->
	<div class="inner-ear"></div>
	</div>

	<!-- Right Ear ~ Light Gray-->
	<div class="ear-right">
	<!-- Inner Ear ~ Dark Gray-->
	<div class="inner-ear"></div>
	</div>

	<!-- Left Outer Eye ~ White -->
	<div class="eye-left">
	<!-- Pupil ~ Black -->
	<div class="pupil">
	</div>
	</div>

	<!-- Right Outer Eye ~ White -->
	<div class="eye-right">
	<!-- Pupil ~ Black -->
	<div class="pupil">
	</div>
	</div>

	<!-- Nose ~ Brown -->
	<div class="nose">
	</div>

	<!-- Hair ~ Light Gray -->
	<div class="hair-left"></div>
	<div class="hair-right"></div>

	<!-- End Head -->
	</div>
	<!-- End Invisible Box -->
	</div></body>
	</body>
	</html>