LMS Timeline

by Thet Hlaing

HTML

<div id="timeline">
  <h3 class='title'>
    Timeline up to <span class='highlight'>Now</span>
  </h3>
  <div id="timeline-detail">


    <figure>
      <img src="https://www.irishtimes.com/polopoly_fs/1.3457229.1523375408!/image/image.jpg_gen/derivatives/box_620_330/image.jpg" alt="classroom" />
      <figcaption>
        <h4 class='title'>
          3 Feb 1997
        </h4>
        Fig.1 - Trulli, Puglia, Italy.
      </figcaption>
    </figure>
    <figure>
      <img src="https://www.irishtimes.com/polopoly_fs/1.3457229.1523375408!/image/image.jpg_gen/derivatives/box_620_330/image.jpg" alt="classroom" />
      <figcaption>
        <h4 class='title'>
          3 Feb 1997
        </h4>
        Fig.1 - Trulli, Puglia, Italy.
      </figcaption>
    </figure>
     <figure>
      <img src="https://www.irishtimes.com/polopoly_fs/1.3457229.1523375408!/image/image.jpg_gen/derivatives/box_620_330/image.jpg" alt="classroom" />
      <figcaption>
        <h4 class='title'>
          3 Feb 1997
        </h4>
        Fig.1 - Trulli, Puglia, Italy.
      </figcaption>
    </figure>
  </div>


</div>

SCSS

$hightlight-color:#70008C;
.timeline-title{
    font-size:1.2em;
    font-weight:bold;
  }
#timeline{
  background-color:#F5F5F5;
  padding:20px;
  min-height:100vh;
  
  h3{    
    .highlight{color:$hightlight-color}
  }
  #timeline-detail{
    padding-top:100px;
     figure{
    display:flex;  
    
    &:nth-child(2){
      figcaption{
       border-left:10px solid #fff;       
       border-right:none;
       border-radius:20px 0px 0px 0px;
       text-align:right;
    }
      img{
        order:2;
      }
    }
    &:first-child{
      img{
        margin-right:20px;
      }
    }
    figcaption{
      
       
       border-right:10px solid #fff;
       border-top:10px solid #fff;
       border-left:none;
       border-radius:0px 20px 0px 0px;
       padding:0px 50px;
       width:500px;
      
       h4{
          @extend .timeline-title;
        }
    }
   
    img{
    width:180px;
    height:180px;
    border-radius:90px;
    transform:translate(10px,-20px);
    
  }
   
  }
    
  }
  
}