div.relative{
    position: relative;
    width: 800px;
    height: 500px;
    margin: 20px;
    left: 90px;
    border: 2px solid blue;
    
}
div.square1{
    position: absolute;
    top:0%;
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
div.circle1{
    position:absolute;
    top: 0;
    left : 350px;
    width: 100px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50%;
}
div.square2{
    position: absolute;
    top: 0%;
    left: 700px;
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
div.circle2{
    position:absolute;
    top: 200px;
    right : 700px;
    width: 100px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50%;
}
div.circle3{
    position:absolute;
    top: 200px;
    left : 700px;
    width: 100px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50%;
}
div.circle4{
    position:absolute;
    bottom:0;
    left: 350px;                                                                                                          ;
    width: 100px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50%;
}
div.square3{
    position: absolute;
    bottom:0%;
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
div.square4{
    position: absolute;
    bottom:0%;
    left: 700px;
    width: 100px;
    height: 100px;
    border: 2px solid red
}
div.day{
    position:absolute;
    top: 210px;
    left: 360px;                                                                                                         ;
    width: 200px;
    height: 200px;
   
    text-shadow: 2px 2px 3px  blue;
    
}