Untitled

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <style type="text/css">
    	.circle{
    		border-radius:50%;
            position:absolute;
    	}

    	#one{
    		width:100px;
            height:100px;
            background-color:lightblue;
            left:40%;
            top:30%;
    	}

        #two{
            width:200px;
            height:200px;
            background-color:lightgreen;
            left:20%;
            top:50%;
        }


        #three{
            width:50px;
            height:50px;
            background-color:rgba(148, 0, 211, 0.5);
            left:20%;
            top:10%;
        }

         #four{
            width:30px;
            height:30px;
            background-color:rgba(250, 0, 100, 0.5);
            left:70%;
            top:80%;
        }

          #five{
            width:250px;
            height:250px;
            background-color:magenta;
            opacity:0.6;
            left:60%;
            top:0%;
        }
    </style>
</head>

<body>
    <a href="other-page.html"><div id="one" class="circle"></div></a>
    <a href="other-page.html"> <div id="two" class="circle"></div></a>
     <a href="other-page.html"><div id="three" class="circle"></div></a>
    <a href="other-page.html"> <div id="four" class="circle"></div></a>
     <a href="other-page.html"><div id="five" class="circle"></div></a>
</body>

</html>