htmlcsstimelinechangelog

Vertical Line not joined with Dots while making a Timeline

I want to create a changelog component with HTML and CSS that looks like this: ChangeLogComponent. I have been able to create the component with vertical line and dots but the Verticle line is not connected with the Dot. This is what my HTML and CSS is rendering:Render

This is my Code Snippet.I have not added any functionality to my Javascript file and it is empty for now.I want to connect the Vertical Line and the Black Dots in the changelog timeline.The Vertical Line is in the center.What should I modify in my CSS so that the vertical line cross the dots in the middle and both are in the center ?

body{
    display:flex;
    justify-content:center;
    align-items: center;
    background:white;
    height:100vh;
    margin:0;
}

.changelog-container{
    border:2px solid black;
    border-radius: 12px;
    padding:2rem;
    max-width: 500px;
    width:100%;
    height:80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.changelog-header{
    text-align: center;
}

.changelog-header p{
    color:#777;
}

.timeline {
    position: relative;
    margin: 0 auto;
    padding: 0;
}
body{
    display:flex;
    justify-content:center;
    align-items: center;
    background:white;
    height:100vh;
    margin:0;
}

.changelog-container{
    border:2px solid black;
    border-radius: 12px;
    padding:2rem;
    max-width: 500px;
    width:100%;
    height:80vh;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.changelog-header{
    text-align: center;
}

.changelog-header p{
    color:#777;
}

.timeline {
    position: relative;
    margin: 0 auto;
    padding: 0;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background-color: black;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}


.timeline-item{
    position:relative;
    margin-bottom: 20px;
    width:50%;
    padding-right:40px;
    text-align: right;
}


.timeline-item::before{
    content:"";
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    width:12px;
    height:12px;
    background-color: black;
    border-radius: 50%;
    border:2px solid white;
    box-sizing: content-box;
    z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChangeLog Component</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="changelog-container">
        <div class="changelog-header">
            <h1>ChangeLog</h1>
            <p>Here's everything we have shipped in the past few days</p>
        </div>
   

        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-date">September 3,2024</div>
                <div class="timeline-content">Announcing Projects on Frontend Roadmap</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">August 8,2024</div>
                <div class="timeline-content">Build your learning habits with learning streaks</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">August 25,2024</div>
                <div class="timeline-content">Git and Github Roadmap</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">August 22,2024</div>
                <div class="timeline-content">Submit your project ideas and get feedback</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">August 15,2024</div>
                <div class="timeline-content">Backend project ideas</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">August 10,2024</div>
                <div class="timeline-content">Redis Roadmap</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-date">August 1,2024</div>
                <div class="timeline-content">Changelog page to help you stay in the loop</div>
            </div>
        </div>
        <div class="changelog-footer">
            <button>Visit Complete Changelog</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Solution

  • Convert the timeline to a grid with 3 columns, and set each item as a subgrid that spans the 3 columns. Position the date, dot, and content using the grid columns.

    body {
  display: flex;
  justify-content: center;
  background: white;
  margin: 0;
}

.changelog-container {
  border: 2px solid black;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.changelog-header {
  text-align: center;
}

.changelog-header p {
  color: #777;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 12px 1fr;
  margin: 0 auto;
  grid-gap: 40px 10px;
}

.timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + 1px);
  width: 2px;
  background-color: black;
  content: '';
}

.timeline-item {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: dense;
  align-items: center;
}

.timeline-date {
  text-align: right;
}

.timeline-item::before {
  grid-column: 2;
  width: 12px;
  height: 12px;
  background-color: black;
  border-radius: 50%;
  border: 2px solid white;
  content: "";
}
    <div class="changelog-container">
  <div class="changelog-header">
    <h1>ChangeLog</h1>
    <p>Here's everything we have shipped in the past few days</p>
  </div>

  <div class="timeline">
    <div class="timeline-item">
      <div class="timeline-date">September 3,2024</div>
      <div class="timeline-content">Announcing Projects on Frontend Roadmap</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-date">August 8,2024</div>
      <div class="timeline-content">Build your learning habits with learning streaks</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-date">August 25,2024</div>
      <div class="timeline-content">Git and Github Roadmap</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-date">August 22,2024</div>
      <div class="timeline-content">Submit your project ideas and get feedback</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-date">August 15,2024</div>
      <div class="timeline-content">Backend project ideas</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-date">August 10,2024</div>
      <div class="timeline-content">Redis Roadmap</div>
    </div>
    <div class="timeline-item">
      <div class="timeline-date">August 1,2024</div>
      <div class="timeline-content">Changelog page to help you stay in the loop</div>
    </div>
  </div>
  <div class="changelog-footer">
    <button>Visit Complete Changelog</button>
  </div>
</div>