.frame {
    width: 400px;   
    height: 300px;   
    top: 222px;
    border: 5px solid black;   
    background-color: transparent;  
    position:relative;
}
.a{
    background-color: blue;
    width: 100px;
    height: 100px;
    top: -100px;

}
.b{ background-color: orange;
    width: 100px;
    height: 100px;
    top: -100px;
    position: relative;
    left: 100px;
}
.c{ background-color:red;
    width: 200px;
    height: 100px;
    top: -200px;
    position: relative;
    left: 200px;
}

.d{background-color: green;
width: 100px;
height: 100px;
top: -200px;
position: relative;

}

.e{background-color: purple;
    width: 100px;
    height: 100px;
    top: -300px;
    left: 100px;
    position: relative;
    
    }

    .f{background-color:yellow;
        width: 100px;
        height: 100px;
        top: -400px;
        left: 200px;
        position: relative;
        
        }

        .g{background-color: lightblue;
            width: 100px;
            height: 200px;
            top: -500px;
            left: 300px;
            position: relative;
            
            }
            .h{background-color:gray;
                width: 200px;
                height: 100px;
                top: -600px;
                position: relative;
                
                }
                .I{background-color:rgba(255, 105, 130, 0.911);
                    width: 100px;
                    height: 100px;
                    top: -700px;
                    left: 200px;
                    position: relative;
                }