Responsive CSS Timeline Boilerplate – Timenil.css

Timenil.css is a very small CSS library used to generate a responsive, pretty nice timeline using plain HTML & CSS.

How to use it:

Load the Timenil.css in the document and we’re ready to go.

<link rel="stylesheet" href="timenil.css">

The example HTML to create a basic timeline on the webpage.

<div id="timenil">
  <div class="timenil-vertical-line"></div>
  <div class="timenil-node">
    <div class="timenil-node-child-left timenil-node-child-left-theme">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
              <p>Garnishing with a bit of JS for fade-in animation , you can ignore JS part if you dont want that.
          </div>
      </div>
    </div>
    <div class="timenil-node-center"></div>
    <div class="timenil-node-trace"></div>
    
    <div class="timenil-node-child-right">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
              <p><h1>Right</h1></p>
              <p>Some text about heading</p>
          </div>
      </div>
    </div>
  </div>
  
  
  <div class="timenil-node">
    <div class="timenil-node-child-left">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
          
          <p><h1>Left</h1></p>
            <p>Some text about heading</p>
              
          </div>
      </div>
    </div>
    <div class="timenil-node-center"></div>
    <div class="timenil-node-trace"></div>
    
    <div class="timenil-node-child-right timenil-node-child-right-theme">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
              <p>And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.</p>
          <button style="background-color:#2ecc71; color:white; border:1px solid #2ecc71;">Submit</button>
          </div>
      </div>
    </div>
  </div>
  
  <div class="timenil-node">
    <div class="timenil-node-separator">
      2017
    </div>
  </div>
  <div class="timenil-node">
    <div class="timenil-node-child-left timenil-node-child-left-theme">
      <div class="timenil-content-box">
              <img src="assets/img2.jpg" style="width:100%; height:100%;"/>
      </div>
    </div>
    <div class="timenil-node-center"></div>
    <div class="timenil-node-trace"></div>
    
    <div class="timenil-node-child-right">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
              <p><h1>Right</h1></p>
              <p>Some text about heading</p>
          </div>
      </div>
    </div>
  </div>
  
  <div class="timenil-node">
    <div class="timenil-node-child-left">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
          
          <p><h1>Left</h1></p>
            <p>Some text about heading</p>
              
          </div>
      </div>
    </div>
    <div class="timenil-node-center"></div>
    <div class="timenil-node-trace"></div>
    
    <div class="timenil-node-child-right timenil-node-child-right-theme">
      <div class="timenil-content-box">
          <div class="timenil-content-text">
              <p>And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.</p>
              <button>Submit</button>
          </div>
      </div>
    </div>
  </div>
  
</div>