Timeline Style 1

HTML

<section class="sec-1" id="style-1">
	<div class="s1-container">
		<div class="s1-row">
			<h1 class="s1-heading">Our Journey</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>Company 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</p>
					</div>
				</div>
			</div>
			<div class="s1-col2">
				<div class="dot"></div>
			</div>
			<div class="s1-col3">
				<p>15th March 2017</p>
			</div>
		</div>
		<div class="s1-row2"><!-- ----------------------------------------box-2 -->
			<div class="s1-col1">
				<p>15th March 2017</p>
			</div>
			<div class="s1-col2">
				<div class="dot"></div>
			</div>
			<div class="s1-col3">
				<div class="box">
					<div class="part1">
						<p>Company 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 relyingIn publishing and graphic design, Lorem ipsum is ishing and graphic design, Lorem ipsum is</p>
					</div>
				</div>
			</div>
		</div>
		<div class="s1-row3"><!-- ----------------------------------------box-3-->
			<div class="s1-col1">
				<div class="box">
					<div class="part1">
						<p>Company Founded</p>
					</div>
					<div class="part2">
						<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate</p>
					</div>
				</div>
			</div>
			<div class="s1-col2">
				<div class="dot"></div>
			</div>
			<div class="s1-col3">
				<p>15th March 2017</p>
			</div>
		</div>
	</div>
</section>

CSS

#style-1{
font-family: 'Inter', sans-serif;
background-color: #0C2033;
}
#style-2{
background-color: #0C2033;
font-family: 'Inter', sans-serif;
}
:root {
  --blue: #1e90ff;
  --clr-one: #ffffff;
  --clr-yel:#FFC93D;
  --clr-cyan:#54C9F7;
  --clr-red:#FC4436;
}

.s1-row .s1-heading{
	color: #FFF;
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;
}

.sec-2 .s1-container {
	padding: 40px 0px;
	width: 80%;
    margin: auto;
    position: relative;
}
.sec-2 .s1-container:after {
    content: '';
    width: 0px;
    height: 58%;
    top: 21%;
    left: 49.9%;
    position: absolute;
    color: var(--clr-one);
    border: var(--clr-one) 0.125em dashed;
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em --clr-one;
    box-shadow: inset 0 0 0.5em 0 var(--clr-one), 0 0 0.5em 0 var(--clr-one);
    z-index: 0;
}
.sec-2 .s1-row{
	display: flex;
}
.sec-2 .s1-row .s1-col1{
	width: 45%;
}
.sec-2 .s1-row .s1-col2{
	     width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-2 .s1-row .s1-col3{
	width: 45%;
	  display: flex;
    align-items: center;
}

.sec-2 .s1-row .s1-col1 .box{
background-color: #fff;
width: 60%;
    float: right;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.sec-2 .s1-row .s1-col1 .box:after{
content: '';
background: url('https://nuitwebtek.com/wp-content/uploads/2023/08/Vector.png');
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-repeat: no-repeat;
transition: 0.7s;
}
.sec-2 .s1-row .s1-col1 .box .part1{
	background-color: #FFC93D;
	padding: 10px 0px;
}
.sec-2 .s1-row .s1-col1 .box .part2{
	padding: 10px;
}
.sec-2 .s1-row .s1-col1 .box .part1 p{
	color: #000;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
    margin-bottom:0px;
}
.sec-2 .s1-row .s1-col1 .box .part2 p{
color: #000;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
    margin-bottom:0px;
}

.sec-2 .s1-row .s1-col2 .dot{
	display: flex;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 60%;
	background-color: #FFC93D;
	position: relative;
	transition: 0.5s;
}
.sec-2 .s1-row:hover .s1-col2 .dot{
background: #fff;
 box-shadow: 0 0 0px rgba(255,255,255,1), 0 0 54px rgba(255,255,255,1), 0 0 56px rgba(255,255,255,1), 0 0 0 10px rgba(255,255,255,0.05), 0 0 0 25px rgba(255,255,255,0.05), 0 0 0 22px rgba(255,255,255,0.05), 0 0 0 14px rgba(255,255,255,0.05), 0 0 0 7px rgba(255,255,255,0.05)
}

.sec-2 .s1-container:before {
    content: '';
    width: 0px;
    height: 0%;
    top: 21%;
    left: 49.9%;
    position: absolute;
    color: var(--clr-one);
    border: var(--clr-one) 0.125em solid;
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em --clr-one;
    box-shadow: inset 0 0 0.5em 0 var(--clr-one), 0 0 0.5em 0 var(--clr-one);
}

.sec-2 .s1-row:hover .s1-col1 .box:after{
left: -78px;
opacity: 0.4;
}
.sec-2 .s1-row .s1-col2 .dot:after{
content: '';
    width: 15px;
    height: 15px;
    border-radius: 60%;
    background-color: #fff;
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 25%;
}
.sec-2 .s1-row:hover .s1-col3 p{
    color: var(--clr-yel);
    border-bottom: var(--clr-yel) 0.125em solid;
    box-shadow: inset -0.30em -0.7em 0.50em -0.8em var(--clr-yel), 0.1em 0.3em 0.2em -0.4em var(--clr-yel);
}
.sec-2 .s1-row .s1-col3 p{
	color: #FFC93D;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
transition: 0.7s;
 padding: 5px 5px 10px 5px;
}


/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^box 2 css*/
.sec-2 .s1-row2{
	display: flex;
}
.sec-2 .s1-row2 .s1-col1{
	width: 45%;
	display: flex;
	align-items: center;
	justify-content: right;
}
.sec-2 .s1-row2 .s1-col2{
	     width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-2 .s1-row2 .s1-col3{
	width: 45%;
	  display: flex;
    align-items: center;
}

.sec-2 .s1-row2 .s1-col3 .box{
background-color: #fff;
width: 90%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.sec-2 .s1-row2 .s1-col3 .box:after{
content: '';
background: url('https://nuitwebtek.com/wp-content/uploads/2023/08/Vector2-1.png');
position: absolute;
top: 0px;
right: -15%;
width: 100%;
height: 100%;
z-index: 2;
background-repeat: no-repeat;
transition: 0.7s;
}
.sec-2 .s1-row2 .s1-col3 .box .part1{
	background-color: #54C9F7;
	padding: 10px 0px;
}
.sec-2 .s1-row2 .s1-col3 .box .part2{
	padding: 12px;
}
.sec-2 .s1-row2 .s1-col3 .box .part1 p{
	color: #000;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
    margin-bottom:0px;
}
.sec-2 .s1-row2 .s1-col3 .box .part2 p{
color: #000;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom:0px;
}

.sec-2 .s1-row2 .s1-col2 .dot{
	display: flex;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 60%;
	background-color: #FFC93D;
	position: relative;
		transition: 0.5s;
}
.sec-2 .s1-row2:hover .s1-col2 .dot{
background: #fff;
 box-shadow:0 0 0px rgba(255,255,255,1), 0 0 54px rgba(255,255,255,1), 0 0 56px rgba(255,255,255,1), 0 0 0 10px rgba(255,255,255,0.05), 0 0 0 25px rgba(255,255,255,0.05), 0 0 0 22px rgba(255,255,255,0.05), 0 0 0 14px rgba(255,255,255,0.05), 0 0 0 7px rgba(255,255,255,0.05)
}
.sec-2 .s1-row2:hover .s1-col3 .box:after{
right: -44%;
opacity: 0.4;
}
.sec-2 .s1-row2 .s1-col2 .dot:after{
content: '';
    width: 15px;
    height: 15px;
    border-radius: 60%;
    background-color: #fff;
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 25%;
}
.sec-2 .s1-row2 .s1-col1 p{
	color: #54C9F7;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 5px 5px 10px 5px;
transition: 1s;
    border-bottom: transparent 0.125em solid;
}
.sec-2 .s1-row2:hover .s1-col1 p{
    color: var(--clr-cyan);
    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);
}

/*===========================================================box 3*/
.sec-2 .s1-row3{
	display: flex;
}
.sec-2 .s1-row3 .s1-col1{
	width: 45%;
}
.sec-2 .s1-row3 .s1-col2{
	     width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-2 .s1-row3 .s1-col3{
	width: 45%;
	  display: flex;
    align-items: center;
}

.sec-2 .s1-row3 .s1-col1 .box{
background-color: #fff;
width: 40%;
    float: right;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.sec-2 .s1-row3 .s1-col1 .box:after{
content: '';
background: url('https://nuitwebtek.com/wp-content/uploads/2023/08/Vector.png');
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-repeat: no-repeat;
transition: 0.7s;
}
.sec-2 .s1-row3:hover .s1-col1 .box:after{
left: -137px;
opacity: 0.4;
}
.sec-2 .s1-row3 .s1-col1 .box .part1{
	background-color: #FC4436;
	padding: 10px 0px;
}
.sec-2 .s1-row3 .s1-col1 .box .part2{
	padding: 11px;
}
.sec-2 .s1-row3 .s1-col1 .box .part1 p{
	color: #000;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
    margin-bottom:0px;
}
.sec-2 .s1-row3 .s1-col1 .box .part2 p{
color: #000;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
    margin-bottom:0px;
}

.sec-2 .s1-row3 .s1-col2 .dot{
	display: flex;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 60%;
	background-color: #FFC93D;
	position: relative;
	transition: 0.5s;
}
.sec-2 .s1-row3:hover .s1-col2 .dot{
background: #fff;
 box-shadow: 0 0 0px rgba(255,255,255,1), 0 0 54px rgba(255,255,255,1), 0 0 56px rgba(255,255,255,1), 0 0 0 10px rgba(255,255,255,0.05), 0 0 0 25px rgba(255,255,255,0.05), 0 0 0 22px rgba(255,255,255,0.05), 0 0 0 14px rgba(255,255,255,0.05), 0 0 0 7px rgba(255,255,255,0.05)
}
.sec-2 .s1-ro3:hover .s1-col1 .box:after{
left: -137px;
}
.sec-2 .s1-row3 .s1-col2 .dot:after{
content: '';
    width: 15px;
    height: 15px;
    border-radius: 60%;
    background-color: #fff;
    position: absolute;
    z-index: 2;
    top: 25%;
    left: 25%;
}
.sec-2 .s1-row3 .s1-col3 p{
	color: #FC4436;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 5px 5px 10px 5px;
transition: 1s;
}
.sec-2 .s1-row3:hover .s1-col3 p{
    color: var(--clr-red);
    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);
}

@media (min-width: 600px) and (max-width: 1024px) {
.sec-2 .s1-row .s1-col1 .box:after {
    content: '';
    background: url(../images/Vector.png);
    position: absolute;
    top: 57px;
    left: -35px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    transition: 0.7s;
    opacity: 0.7;
} 
.sec-2 .s1-row:hover .s1-col1 .box:after {
    left: -35px; 
    opacity: 0.7; 
} 
.sec-2 .s1-container {
    width: 100%;
}
.sec-2 .s1-row2 .s1-col3 .box:after {
    content: '';
    background: url(../images/Vector2.png);
    position: absolute;
    top: 38px;
    right: -2%;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    transition: 0.7s;
}
.sec-2 .s1-row2:hover .s1-col3 .box:after {
    right: -44%;
     opacity: 0.7;
}
.sec-2 .s1-row3:hover .s1-col1 .box:after {
    left: 0px;
     opacity: 0.7;
}
.sec-2 .s1-row3 .s1-col1 .box:after{
    content: '';
    background: url(../images/Vector.png);
    position: absolute;
    top: 95px;
    left: -36px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    transition: 0.7s;
}
}

@media screen and (max-width:600px){
.sec-2 .s1-row .s1-col3 p {
    position: absolute;
    transform: rotate(270deg);
    left: -17%;
}
.sec-2 .s1-row3 .s1-col3 p {
    position: absolute;
    transform: rotate(270deg);
    left: -17%;
}
.sec-2 .s1-row2 .s1-col1 p {
    position: absolute;
    transform: rotate(270deg);
    left: -17%;
}
.sec-2 .s1-container {
    width: 90%;
}
.sec-2 .s1-row .s1-col1 {
    width: 70%;
}
.sec-2 .s1-row .s1-col3{
	width: 20%;
}
.sec-2 .s1-row{
flex-direction: row-reverse;	
}
.sec-2 .s1-row3{
flex-direction: row-reverse;	
}
.sec-2 .s1-row .s1-col1 .box{
	width: 88%;
}
.sec-2 .s1-row3 .s1-col1 {
    width: 70%;
}
.sec-2 .s1-row3 .s1-col3{
	width: 20%;
}
.sec-2 .s1-row3 .s1-col1 .box{
	width: 88%;
}
.sec-2 .s1-row2 .s1-col3 .box{
	width: 88%;
}
.sec-2 .s1-row2 .s1-col3{
	width: 80%;	
    justify-content: end;
}
.sec-2 .s1-row2 .s1-col1{
	width: 23%;
}
.sec-2 .s1-container:after{
	height: 67%;
    top: 17%;
    left: 24.6%;
    z-index: 1;
}
.sec-2 .s1-row2 {
    padding: 39px 0px;
}
.sec-2 .s1-row3 .s1-col1 .box:after,.sec-2 .s1-row2 .s1-col3 .box:after,.sec-2 .s1-row .s1-col1 .box:after{
	background: url(../images/Vector2.png);
    position: absolute;
    top: 86px;
    right: -1%;
    width: 160%;
    opacity: 0;
}
.s1-row .s1-col1:before {
    content: '';
    position: absolute;
    top: 16%;
    left: 36%;
    width: 24px;
    height: 24px;
    transform: rotate(311deg);
    background-color: white;
    z-index: -1;
}
.s1-row2 .s1-col3:before {
    content: '';
    position: absolute;
    top: 51%;
    left: 35%;
    width: 24px;
    height: 24px;
    transform: rotate(311deg);
    background-color: white;
    z-index: -1;
}
.s1-row3 .s1-col1:before {
    content: '';
    position: absolute;
    bottom: 14%;
    left: 36%;
    width: 24px;
    height: 24px;
    transform: rotate(311deg);
    background-color: white;
    z-index: -1;
}

}

Links

<!--Google 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">