task8.css

*{
    margin: 0%;
    padding: 0%;
}
html,body{
    width: 100%;
    height: 100%;
}
#main{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}
body::-webkit-scrollbar{
    display: none;
}
#left1{
    position: absolute;
    transition: all ease 1.5s;
    position: absolute;
    width: 48%;
    height: 100%;
    background-color:rgb(253 201 125);
}
#left1 #center{
    margin-top: 30%;
    margin-left: 30%;
}
#left2{
    position: absolute;
    transition: all ease 1.5s;
    position: absolute;
    width: 48%;
    height: 100%;
    background-color:#dccbc8;
}
#left2 #center{
    margin-top: 30%;
    margin-left: 30%;
}
#right1{
    transition: all ease 1.5s;
    margin-left: 48%;
    position: absolute;
    width: 52%;
    height: 100%;
    background-color:rgb(219 235 222);
    overflow: hidden;
}
#right1 img{
    margin-left: 20%;
    margin-top: -20%;
    backdrop-filter: blur(80px);
    width: 800px; 
}
#right2{
    transition: all ease 1.5s;
    position: absolute;
    margin-top: 100%;
    width: 52%;
    height: 100%;
    margin-left: 48%;
    overflow: hidden;
    background-color:#9cb5bb ;
}
#right2 img{
    width: 800px;
    margin-top: -330px;
    margin-left: 120px;
}
#nav{
    position: absolute;
    display: flex;
    align-items: center;
    margin-left: 40px;
    margin-top: 40px;
    font-family: montserrat;
    color: #fff;
    width: 50%;
    height: 50px;
}
#nav i{
    font-size: 23px;
}
#center{
    width: 300px;
    height: 100px;
    color: #fff;
    margin-left: 10%;
    margin-top: 20%;
}
#center h1{
    font-size: 80px;
}
h6{
    position: absolute;
    color: #fff;
    margin-top: 430px;
    margin-left: 225px;
    font-weight: 100;
    font-size: 14px;
}
button{
    position: absolute;
    word-spacing: 17px;
    margin-top: 490px;
    margin-left: 220px;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
}
#verticle{
    position: absolute;
    margin-top: 370px;
    margin-left: -20px;
    color: #fff;
    transform: rotate(90deg);
}
#down{
    position: absolute;
    transform: rotate(90deg);
    margin-top: 25.8%;
    margin-left: 45.1%;
    width: 50px;
    height: 40px;
    background-color: #f8f4f4;
}
#down img{
    margin-left: 8px;
    margin-top: 5px;
    width: 30px;
}
#foot{
    position: absolute;
    margin-left: 50px;
    margin-top: 44%;
    display: flex;
    width: 40px;
    gap: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}
#foot #h5{
    color: #fff;
}
#icon{
    position: absolute;
    margin-top: 40px;
    margin-left: 1450px;
    padding: 10px;
    border-radius: 20px;
    background-color: #d9dcdd;
    font-size: 20px;
}
#up{
    position: absolute;
    transform: rotate(-90deg);
    margin-top: 22.6%;
    margin-left: 47.7%;
    width: 50px;
    height: 40px;
    background-color: #f8f4f4;
}
#up img{
    margin-left: 8px;
    margin-top: 5px;
    width: 30px;
}