timeline v0.1

by John Doe

HTML

<div id="wrapper">
  <div id="timeline">
    <div id="projects">
      <div class="project">
        <div class="year">2022</div>
        <div class="dotline">
          <div class="dot"></div>
          <div class="line"></div>
        </div>
        <div class="bubble">test</div>
      </div>
      <div class="project">
        <div class="year"></div>
        <div class="dotline">
          <div class="dot"></div>
          <div class="line"></div>
        </div>
        <div class="bubble">test</div>
      </div>
      <div class="project">
        <div class="year"></div>
        <div class="dotline">
          <div class="dot"></div>
          <div class="line"></div>
        </div>
        <div class="bubble">test</div>
      </div>
    </div>
  </div>
</div>

CSS

:root {
  --timeline-width: 12px;
  --entry-height: 100px;
  --color-timeline: lightgrey;
  --color-background: #fbfcfd;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto';
}

html, body {
  height: 100%;
  width: 100%;
  background-color: var(--color-background);
}

#timeline {
  margin-left: 2rem;
}
.project {
  display: flex;
  align-items: center;
}

.year {
  width: 40px;
}

.dotline {
    position: relative;
    height: var(--entry-height);
    width: var(--timeline-width);
}
.dot {
    background-color: var(--color-timeline);
    width: var(--timeline-width);
    height: var(--timeline-width);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
}

.line {
    background-color: var(--color-timeline);
    width: 3px;
    height: var(--entry-height);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.project:nth-child(1) .line {
  transform: translate(-50%, 50%);
}
.project:nth-last-child(1) .line {
  transform: translate(-50%, -50%);
}

.bubble {
  cursor: pointer;
  background-color: white;
  padding: 1rem;
  margin: 1rem;
  border-radius: 15px;
  box-shadow: 0px 1px 20px 0px #e0e0e0ad;
}