Timeline with CSS
Tags: css, webdev, beginners, tutorial
Published: 2021-11-10 07:59:46

In this article, we are gonna build a timeline for your website which you can use later on in your portfolio to display your work history or maybe something else you want. Let's first look at what are we building -

![preview](https://i.imgur.com/BLrZCnJ.gif)

Now you have seen what we are up to so let's get hands in the code -

**HTML**

```html
<div class="timeline">
  <div class="outer">
    <!-- .... card before this -->
    <div class="card">
      <div class="info">
        <h3 class="title">Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>

    <!-- ..... you can add more div with "card" class -->
  </div>
</div>
```

In the HTML code, the `timeline` class is the main container and the `outer` class is the wrapper for all the cards. and then we have a `card` in which we add data.

Now let's look at the CSS -

**CSS**

```css
/* Timeline Container */
.timeline {
  background: #fff;
  margin: 20px auto;
  padding: 20px;
}

/* Outer Layer with the timeline border */
.outer {
  border-left: 2px solid #333;
}

/* Card container */
.card {
  position: relative;
  margin: 0 0 20px 20px;
  padding: 10px;
  background: #333;
  color: gray;
  border-radius: 8px;
  max-width: 400px;
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Title of the card */
.title {
  color: orangered;
  position: relative;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 999px;
  left: -39px;
  border: 3px solid orangered;
}
```

### Codepen is Here

{% codepen https://codepen.io/j471n/pen/wvqXRjm %}

<iframe height="600" style="width: 100%;" scrolling="no" title="css-timeline" src="https://codepen.io/j471n/embed/wvqXRjm?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/j471n/pen/wvqXRjm"> css-timeline</a> by Jatin (<a href="https://codepen.io/j471n">@j471n</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>



### Conclusion

This is just the beginning, you can customize it to the next level, and maybe I'll do in the future article to stay tuned for that if you have any suggestions then comment below.

<blockquote>
<p>You can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" loading="lazy" width="545" height="153"></a>

- [10 CSS Resources that you should bookmark](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [Fully functional google search with next.js](https://dev.to/j471n/fully-functional-google-clone-with-nextjs-223o)
- [How to share anything from your website by Web Share API](https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g)