Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here
433
2
						
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Butter Cake v4.0.0 - Starter Kit</title>


  <!-- FONT AWESOME 4.7.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- BUTTER CAKE CSS 4.0.0 -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/css/butterCake.min.css">

</head>

<body>

  <div class="container py-5">

    <ol class="bc-timeline">
      <li>
        <span class="line bg-primary"></span>
        <span class="floater">2019</span>
        <h4>Title 1</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
        </p>
      </li>
      <li>
        <span class="line bg-secondary"></span>
        <span class="floater bg-secondary">2018</span>
        <h4>Title 2</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
        </p>
      </li>
      <li>
        <span class="line bg-success"></span>
        <span class="floater bg-success">2017</span>
        <h4>Title 3</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
        </p>
      </li>
      <li>
        <span class="line bg-info"></span>
        <span class="floater bg-info">2016</span>
        <h4>Title 4</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
        </p>
      </li>
      <li>
        <span class="line bg-warning"></span>
        <span class="floater bg-warning">2015</span>
        <h4>Title 5</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, placeat.
        </p>
      </li>
    </ol>

  </div>


  <style>

    .bc-timeline {
      list-style-type: none;
    }

    .bc-timeline li {
      position: relative;
      margin: 0;
      padding-bottom: 1em;
      padding-left: 50px;
    }


    .bc-timeline  li .line {
      content: ' ';
      background-color: var(--primary);
      position: absolute;
      bottom: 0;
      top: 0;
      left: 6px;
      width: 3px;
    }

    .bc-timeline  li .floater {
      content: attr(data-date);
      background-color: var(--primary);
      position: absolute;
      left: 0;
      top: 10px;
      border-radius: 4px;
      height: auto;
      width: auto;
      color: white;
      font-size: 12px;
      padding: 2px 4px;
      font-weight: 600;
    }


  </style>

  <!-- JQUERY 3.3.1 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- BUTTER CAKE JS 4.0.0 -->
  <script src="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/js/butterCake.min.js"></script>

</body>
</html>						
					
Contact forms doesn't work yet, shoot a mail to contact@getbuttercake.com,
working really hard on it, feel free to show your love and support, Thank you