Timeline

Testing for timeline

by dpnminh

HTML

<div class="timeline-wrapper" id="timeline">
  <ul>
    <li>
      <div class="timeline timeline-time">
      8:00 AM
      </div>
      <div class="timeline bullet pink">
      </div>
      <div class="timeline timeline-info">
        <h3>
          Wake up time
        </h3>
        
        <h4>
             Dont' forget to brush your teeth
        </h4>
      </div>
    </li>
    <li>
      <div class="timeline timeline-time">
      9:00 AM
      </div>
      <div class="timeline bullet green">
      </div>
      <div class="timeline timeline-info">
         <h3>
          Breakfast
        </h3>
        
        <h4>
             Vegetable soup and coffee
        </h4>
      </div>
    </li>
    <li>
      <div class="timeline timeline-time">
      9:30 AM
      </div>
      <div class="timeline bullet purple">
      </div>
      <div class="timeline timeline-info">
        <h3>
         At work
        </h3>
        
        <h4>
            Somewhere
        </h4>
      </div>
    </li>
  </ul>
</div>

CSS

.timeline-wrapper{
  width: 100%;
  height:100%
  background: white;
  border: 1px solid gray;
}

.timeline-time{
  width:5em;
  padding-right: 10px;
  box-sizing: border-box;
}

.bullet{
   width: 1em;
    height: 1em;
    box-sizing: border-box;
    border-radius: 50%;
    background: white;
    z-index: 1;
    margin-right: 1em;
}

.pink{
  border: 2px solid pink
}

ul {
 list-style: none;
    position: relative;
}
li{
  display:flex;
  padding: 20px 0px;
}


.green{
  border: 2px solid green;
}

.purple{
  border: 2px solid purple;
}
ul:before{
      content: ' ';
    height: 100%;
    width: 1px;
    background-color: #d9d9d9;
    position: absolute;
    top: 0;
    left:  7.9em;
    z-index: -1;
}

h3 {
    font-size: 0.9em;
    font-weight: 400;
    margin: 0;
  }
  
  h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 400;
    color: $dark-grey;
  }