index.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.radius{
    border-radius: 15px;
}
.flex{
    display: flex;
    align-items: center;
}
.flex p{
    margin-left: 10px;
}
.content-card{
    display: flex;
    width: 70%;
    margin: auto;
    justify-content: center;
}
.card-one{
    width: 80%
}
.card-two{
    width: 20%;
}

.conrent-first{
    display: flex;
}
.card-one .conrent-first .one{
background-color: blueviolet;

height: 300px;
padding: 20px;
}

.content-second .two{
    padding: 20px;
}
.content-second .two h3{
margin-top: 20px;
margin-bottom: 20px;
}
.card-one .conrent-first .one h3{
    margin-top: 30px;
    margin-bottom: 30px;
 
}
.card-one .conrent-first .two{
    background-color: gray;
    height: 300px;
    width: 90%;
    padding: 20px;
    font-size: 15px;
    margin-left: 20px;
    }
    
.content-second{
    display: flex;
    margin-top: 20px;
}
.content-second .one{
    background-color: gray;
    height: fit-content;
    width: 70%;
    padding: 20px;
    height: 300px;
    margin-left: 20px;
}

.content-second .two{
    background-color: blueviolet;
    height: 300px;
    margin-left: 20px;
}
img{
height: 50px;
width: 50px;
border-radius: 50%;
}
.card-two{
    background-color: #eee;
    margin-left: 30px;
    padding: 20px;
    height: 617px;
}
.progress{
    margin-top: 40px;
    margin-left: 30px;
    margin-bottom: 30px;
}
.progress div{
    background-color: #eee;
    height: 20px;
    width: 80%;
    margin-top: 20px;
    position: relative;
}

.progress .one span{
    background-color: orangered;
    height: 100%;
    width: 0;
    display: block;
   
    animation:width-one infinite 0.7s;
    animation-delay: 0.7s;
}

.progress .two span{
    background-color:crimson;
    height: 100%;
    width: 0;
    display: block;
    transition-delay: 0.5s;
    animation:width-two infinite 0.6s;
    animation-delay: 0.7s;
}

.progress .three span{
    background-color:coral;
    height: 100%;
    width: 0;
    display: block;
    animation:width-three infinite 0.7s;
    animation-delay: 0.7s;
}
.progress .four span{
    background-color:darkmagenta;
    height: 100%;
    width: 0;
    display: block;
    animation:width-four infinite 0.8s;
    animation-delay: 0.7s;
}
.progress .five span{
    background-color:chartreuse;
    height: 100%;
    width: 0;
    display: block;
    animation:width-five infinite 0.9s;
    animation-delay: 0.7s;
}



@keyframes width-one{
    0%{
        width: 0;
    }
    100%{
        width: 40%;
    }
}

@keyframes width-two{
    0%{
        width: 0;
    }
    100%{
        width: 60%;
    }
}

@keyframes width-three{
    0%{
        width: 0;
    }
    100%{
        width: 80%;
    }
}

@keyframes width-four{
    0%{
        width: 0;
    }
    100%{
        width: 90%;
    }
}

@keyframes width-five{
    0%{
        width: 0;
    }
    100%{
        width: 95%;
    }
}