Timeline Style 2

HTML

<div id="canvasdom">
<section class="sec-1">
	<div class="s1-container">
		<div class="s1-row">
			<h1 class="s1-heading">Company Milestone</h1>
		</div>
	</div>
</section>

<section class="sec-2" id="style-2">
	<div class="s1-container">
		<div class="s1-row"><!-- ----------------------------------------box-1 -->
			<div class="s1-col1">
				<div class="box">
					<div class="part1">
						<p>Founded</p>
					</div>
					<div class="part2">
						<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
					</div>
				</div>
			</div>
			<div class="s1-col2">
				<p>March 2017</p>
			</div>
			<div class="s1-col3">
				<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Icon.png">
			</div>
		</div>
		<div class="s1-row"><!-- ----------------------------------------box-1 -->
			<div class="s1-col1">
				<div class="box">
					<div class="part1">
						<p>New Location</p>
					</div>
					<div class="part2">
						<p>In publishing and graphic design, Lorem ipsum iem ipsum may be used as a placeholder before final copy is available.</p>
					</div>
				</div>
			</div>
			<div class="s1-col2">
				<p>March 2017</p>
			</div>
			<div class="s1-col3">
				<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Icon.png">
			</div>
		</div>
		<div class="s1-row"><!-- ----------------------------------------box-1 -->
			<div class="s1-col1">
				<div class="box">
					<div class="part1">
						<p>IPO</p>
					</div>
					<div class="part2">
						<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be </p>
					</div>
				</div>
			</div>
			<div class="s1-col2">
				<p>March 2017</p>
			</div>
			<div class="s1-col3">
				<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Icon.png">
			</div>
		</div>
		<div class="s1-row"><!-- ----------------------------------------box-1 -->
			<div class="s1-col1">
				<div class="box">
					<div class="part1">
						<p>New Location</p>
					</div>
					<div class="part2">
						<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
					</div>
				</div>
			</div>
			<div class="s1-col2">
				<p>March 2017</p>
			</div>
			<div class="s1-col3">
				<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Icon.png">
			</div>
		</div>
	</div>
</section>
    </div>

CSS

.s1-row .s1-heading{
	color: #000;
text-align: center;
font-family: Inter;
font-size: 56px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.sec-1 .s1-row{
	display: flex;
	justify-content: center;
	padding: 40px 0px;
}
:root{
--clr-blue:#5780E9;
--clr-purp:#981ACE;
--clr-cyan:#15C9CA;
--clr-red:#DB5A09;	
}

*{
	margin: 0px;
	padding: 0px;
}
#canvasdom{
	background: url('https://nuitwebtek.com/wp-content/uploads/2023/08/Backgorund.png');
	background-size: cover;
	position: relative;
}
.s1-container{
	width: 80%;
	margin: auto;
	padding: 10px 0px;
}
#canvasdom:after{
	content:'';
  width: 10px;
  height: 100%;
background: linear-gradient(180deg, rgba(89,128,234,1) 0%, rgba(201,158,216,1) 33%, rgba(220,227,125,1) 61%, rgba(74,224,239,1) 100%);
top: 0px;
right: 17%;
position: absolute;
z-index: -1;
}
.sec-2 .s1-row{
	display: flex;
	padding: 10px 20px 10px 20px;
}
.sec-2 .s1-row .s1-col1{
width:75%;
justify-content: right;
display: flex;
}
.sec-2 .s1-row .s1-col2{
 width:15%;
}
.sec-2 .s1-row .s1-col3{
width:10%;
position: relative;
}

.sec-2 .s1-row .s1-col1 .part1 p{
	color: #000;
text-align: right;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
transition: 0.6s;
}

.sec-2 .s1-row .s1-col1 .part2 p{
	color: #000;
text-align: right;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.sec-2 .s1-row .s1-col2 p{
	margin-inline: 20px;
}
.sec-2 .s1-row .s1-col2 p{
color: #0F42BE;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
transition: 0.7s;
width: 60%;
padding-bottom: 9px;
        border-bottom: 3px solid transparent;
    box-shadow: unset;
}

.sec-2 .s1-row:nth-child(2) .s1-col2 p{
  color: #981ACE;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
} 
.sec-2 .s1-row:nth-child(3) .s1-col2 p{
color: #DB5A09;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
} 
.sec-2 .s1-row:nth-child(4) .s1-col2 p{
color: #15C9CA;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
} 

.sec-2 .s1-row .s1-col3 img{
border: 7px solid #5780E9;
border-radius: 60%;
margin-top: -15px;
width: 33%;
}

.sec-2 .s1-row:nth-child(2) .s1-col3 img{
border: 7px solid #9E85F1;
border-radius: 60%;
margin-top: -15px;
width: 33%;
} 
.sec-2 .s1-row:nth-child(3) .s1-col3 img{
border: 7px solid #DA5A09;
border-radius: 60%;
margin-top: -15px;
width: 33%;
} 
.sec-2 .s1-row:nth-child(4) .s1-col3 img{
border: 7px solid #79E7C2;
border-radius: 60%;
margin-top: -15px;
width: 33%;
} 
.sec-2 .s1-row .s1-col1 .box{
width: 80%;
background-color:transparent;
background-size: 200% 100%; 
  border-radius:4px;
  display:inline-block;
  padding: 20px;
  margin-top: -20px;
  transition:.9s;
    background-repeat:no-repeat;
      background-image:linear-gradient(to right, rgb(89 128 234) 0%, rgb(188 99 219 / 0%) 33%, rgb(202 163 210) 61%, rgb(95 129 233) 100%);
    background-position: -100% 0px;
}
.sec-2 .s1-row:hover .s1-col1 .box{
 background-position: 0% 0px;
}
.sec-2 .s1-row .s1-col3:after{
content: '';
background: #5780E9;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: 0px;
border-radius: 50%;
z-index: -1;
transition: 0.7s;
}
.sec-2 .s1-row .s1-col3:before{
content: '';
background: #5780E9;
width: 0px;
height: 3px;
position: absolute;
top: 9px;
left: 0px;
z-index: -1;
transition: 0.7s;
}
.sec-2 .s1-row:hover .s1-col3:after{
content: '';
background: #5780E9;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: -36px;
border-radius: 50%;
}
.sec-2 .s1-row:hover .s1-col3:before{
content: '';
background: #5780E9;
width: 39px;
height: 3px;
position: absolute;
top: 9px;
left: -28px;
z-index: -1;
}
.sec-2 .s1-row:hover .s1-col2 p{
    border-bottom: var(--clr-blue) 0.125em solid;
    box-shadow: inset -0.30em -0.7em 0.50em -0.8em var(--clr-blue), 0.1em 0.3em 0.2em -0.4em var(--clr-blue);
}


.sec-2 .s1-row:nth-child(2) .s1-col1 .box{
width: 50%;
} 
.sec-2 .s1-row:nth-child(2) .s1-col3:after{
content: '';
background: #9E85F1;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: 0px;
border-radius: 50%;
z-index: -1;
transition: 0.7s;
}
.sec-2 .s1-row:nth-child(2) .s1-col3:before{
content: '';
background: #9E85F1;
width: 0px;
height: 3px;
position: absolute;
top: 9px;
left: 0px;
z-index: -1;
transition: 0.7s;
}
.sec-2 .s1-row:nth-child(2):hover .s1-col3:after{
content: '';
background: #9E85F1;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: -36px;
border-radius: 50%;
}
.sec-2 .s1-row:nth-child(2):hover .s1-col3:before{
content: '';
background: #9E85F1;
width: 39px;
height: 3px;
position: absolute;
top: 9px;
left: -28px;
z-index: -1;
}
.sec-2 .s1-row:nth-child(2):hover .s1-col2 p{
    border-bottom: var(--clr-purp) 0.125em solid;
    box-shadow: inset -0.30em -0.7em 0.50em -0.8em var(--clr-purp), 0.1em 0.3em 0.2em -0.4em var(--clr-purp);
}


.sec-2 .s1-row:nth-child(3) .s1-col1 .box{
width: 60%;
} 
.sec-2 .s1-row:nth-child(3) .s1-col3:after{
content: '';
background: #DA5A09;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: 0px;
border-radius: 50%;
}
.sec-2 .s1-row:nth-child(3) .s1-col3:before{
content: '';
background: #DA5A09;
width: 0px;
height: 3px;
position: absolute;
top: 9px;
left: 0px;
z-index: -1;
}
.sec-2 .s1-row:nth-child(3):hover .s1-col3:after{
content: '';
background: #DA5A09;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: -36px;
border-radius: 50%;
}
.sec-2 .s1-row:nth-child(3):hover .s1-col3:before{
content: '';
background: #DA5A09;
width: 39px;
height: 3px;
position: absolute;
top: 9px;
left: -28px;
z-index: -1;
}
.sec-2 .s1-row:nth-child(3):hover .s1-col2 p{
    border-bottom: var(--clr-red) 0.125em solid;
    box-shadow: inset -0.30em -0.7em 0.50em -0.8em var(--clr-red), 0.1em 0.3em 0.2em -0.4em var(--clr-red);
}


.sec-2 .s1-row:nth-child(4) .s1-col1 .box{
width: 80%;
} 
.sec-2 .s1-row:nth-child(4) .s1-col3:after{
content: '';
background: #79E7C2;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: 0px;
border-radius: 50%;
}
.sec-2 .s1-row:nth-child(4) .s1-col3:before{
content: '';
background: #79E7C2;
width: 0px;
height: 3px;
position: absolute;
top: 9px;
left: 0px;
z-index: -1;
}
.sec-2 .s1-row:nth-child(4):hover .s1-col3:after{
content: '';
background: #79E7C2;
width: 10px;
height: 10px;
position: absolute;
top: 5px;
left: -36px;
border-radius: 50%;
}
.sec-2 .s1-row:nth-child(4):hover .s1-col3:before{
content: '';
background: #79E7C2;
width: 39px;
height: 3px;
position: absolute;
top: 9px;
left: -28px;
z-index: -1;
}
.sec-2 .s1-row:nth-child(4):hover .s1-col2 p{
    border-bottom: var(--clr-cyan) 0.125em solid;
    box-shadow: inset -0.30em -0.7em 0.50em -0.8em var(--clr-cyan), 0.1em 0.3em 0.2em -0.4em var(--clr-cyan);
}

@media screen and (max-width: 600px) {
  .s1-container{
  	width: 90%;
    margin: auto;
    padding: 0px 0px;
  }
  .s1-row .s1-heading{
  	text-align: left;
  }
  .sec-2 .s1-row{
  	padding: 10px 0px 30px 0px;
  }
  .sec-2 .s1-row .s1-col1{
  	width: 70%;
  }
  .sec-2 .s1-row .s1-col1 .box{
  	width: 95%;
  }
  .sec-2 .s1-row:nth-child(2) .s1-col1 .box{
  	width: 95%;
  }
  .sec-2 .s1-row:nth-child(3) .s1-col1 .box{
  	width: 95%;
  }
  .sec-2 .s1-row:nth-child(4) .s1-col1 .box{
  	width: 95%;
  }
  body:after{
  	right: 7%;
  }
  .sec-2 .s1-row .s1-col2{
  	width: 20%;
  	position: relative;
  }
  .sec-2 .s1-row .s1-col3 img{
  	width: 100%;
  	margin-top: 0px;
  }
  .sec-2 .s1-row:nth-child(2) .s1-col3 img {
    margin-top: 0px;
    width: 100%;
}
  .sec-2 .s1-row:nth-child(3) .s1-col3 img {
    margin-top: 0px;
    width: 100%;
}
  .sec-2 .s1-row:nth-child(4) .s1-col3 img {
    margin-top: 0px;
    width: 100%;
}
.sec-2 .s1-row .s1-col2 p{
	position: absolute;
    transform: rotate(90deg);
  width: 110%;
    top: 50%;
    right: -52%;
}
    #canvasdom:after{
        right: 6%;
    }

    .sec-2 .s1-row:hover .s1-col3:before {
    content: '';
    background: #5780E9;
    width: 19px;
    height: 3px;
    position: absolute;
    top: 20px;
    left: 7px;
    z-index: -1;
}
    .sec-2 .s1-row .s1-col3:after {
    width: 0px;
    left: 0px;
    top: 17px;
}
    .sec-2 .s1-row:hover .s1-col3:before {
    left: -35px;
    top: 20px;
     width: 47px;
}
    .sec-2 .s1-row:hover .s1-col3:after {
    top: 17px;
    left: -42px;
}
}

Links

<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">