My task is to replicate the construction shown in this image: https://i.sstatic.net/kaRMO.png I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code:
.ps-timeline-sec {
position: relative;
background: #fff;
}
.ps-timeline-sec .container {
position: relative;
}
@media screen and (max-width: 767px) {
// CSS rules for responsive design
}
// More CSS styles here...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Horizontal Timeline Responsive</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="ps-timeline-sec">
<div class="container">
<ol class="ps-timeline">
<li>
// HTML content for the timeline nodes
</li>
<li>
// Another timeline node
</li>
</ol>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>I need assistance in adding the half circle and making the page responsive. Can anyone guide me on achieving this?
Note: For better understanding, please view the page in horizontal/full browser mode.