Midterm Excercise 5 (เสร็จแล้ว)

✨ KOTCHAKORN KAJONCHAI

<html>
  <head>
    <style>
      body{
        font-size:0;
      }
      div{
        display: inline-block;
        position: absolute;
        height: 20%;
        width: 20%;
        background-color: hsl(180, 100%, 50%);
        
      }
      div:nth-child(1){
        top: 0%;
        left: 0%;
        background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(2){
        top: 0%;
        left: 20%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(3){
        top: 0%;
        left: 40%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(4){
        top: 0%;
        left: 60%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(5){
        top: 0%;
        left: 80%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(6){
        top: 20%;
        left: 0%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(7){
        top: 20%;
        left: 20%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(8){
        top: 20%;
        left: 40%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(9){
        top: 20%;
        left: 60%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(10){
        top: 20%;
        left: 80%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(11){
        top: 40%;
        left: 0%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(12){
        top: 40%;
        left: 20%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(13){
        top: 40%;
        left: 40%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(14){
        top: 40%;
        left: 60%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(15){
        top: 40%;
        left: 80%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(16){
        top: 60%;
        left: 0%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(17){
        top: 60%;
        left: 20%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(18){
        top: 60%;
        left: 40%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(19){
        top: 60%;
        left: 60%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(20){
        top: 60%;
        left: 80%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(21){
        top: 80%;
        left: 0%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(22){
        top: 80%;
        left: 20%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(23){
        top: 80%;
        left: 40%;
		  background-color: hsl(180, 100%, 50%);
      }
      div:nth-child(24){
        top: 80%;
        left: 60%;
		  background-color: hsla(180, 100%, 50%, 0.25);
      }
      div:nth-child(25){
        top: 80%;
        left: 80%;
		  background-color: hsl(180, 100%, 50%);
      }
    </style>
  </head>
  <body>
    
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
  </body>
</html>