*{
    box-sizing: border-box;
}

.box{
    font-size: 0;
    text-align: center;
}
.main{
    display: inline-block;
    width: 100%;
    height: 500px;
    font-size: 16px;
    color: white;
    
}

.box1{
    width: 25%;
    background-color: white;
    padding: 10px;
}

.box2{
    width: 50%;
    background-color: white;
    padding: 10px;
}

.box3{
    width: 25%;
    background-color: white;
  padding: 10px;
    
}

.box4{
    width: 50%;
    background-color: white;
    padding: 10px;
    height: 250px;
    padding-top: 20px;
}

.box5{
    width: 50%;
    background-color: white;
    padding: 10px;
    padding-top: 20px;
    height: 250px;
}
.inner1{
    height: 50%;
    background-color: white;
    padding-bottom:10px;
}

.inner11{
    height:100%;
    background-color: rgb(10, 14, 212);
}

.inner2{
    height: 100%;
    background-color: red;
}
.inner3{
 height: 100%;
 background-color: aqua;
}

.inner4{
 height: 50%;
 background-color: white;
 padding-top: 10px;
 
}

.inner44{
    height: 100%;
    background-color: orange;
}

h1{
    position: absolute;
}



.bottom{
    display: inline-block;
    width: 100%;
    height: 300px;
    font-size: 16px;
    
    color: white;
   
   
}

.inner6{
    height: 100%;
    background-color: rgb(104, 56, 56);
    
}

.inner7{
    height: 100%;
    background-color: brown;
}