Top

Timeline


<!-- cd-timeline Start-->
<section class="cd-container" id="cd-timeline" > 
  <div class="cd-timeline-block" > 
    <div class="cd-timeline-img cd-picture bg-primary bounce-in" > <i class="icon-pencil-alt" > </i></div>
    <div class="cd-timeline-content bounce-in" > 
      <div class="timeline-wrapper" > 
        <div class="badge bg-warning" > app-ideas</div>
      </div>
      <h5 class="f-w-600 m-0" > Established new the app-ideas repository.</h5>
      <p class="mb-0" > 
          developers who are just beginning their learning process. those who often concentrate on developing programmes with a user interface.</p>
      <div class="time-content pt-2" > <i class="icon-github" > </i>
        <h6 class="f-w-600" > View it on Github      </h6>
      </div><span class="cd-date" > February 02 2022</span>
    </div>
  </div>
  <div class="cd-timeline-block" > 
    <div class="cd-timeline-img bg-danger bounce-in" >  <i class="icon-youtube" > </i></div>
    <div class="cd-timeline-content bounce-in" > 
      <div class="timeline-wrapper" > 
        <div class="badge bg-danger" > Blog</div>
      </div>
      <h5 class="f-w-600 m-0" > Implemented the program for weekly code challenges.</h5>
      <p class="mb-0" > 
          Challenges <em class="font-danger" > help you build problem-solving skills, better understand the programming. If you want to improve your skills in programming.           </p>
      <div class="ratio ratio-21x9 m-t-20" > 
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen="" > </iframe>
      </div><span class="cd-date" > March 12 2022</span>
    </div>
  </div>
  <div class="cd-timeline-block" > 
    <div class="cd-timeline-img cd-picture bg-success bounce-in" > <i class="icon-image" > </i></div>
    <div class="cd-timeline-content bounce-in" > 
      <div class="timeline-wrapper" > 
        <div class="badge bg-info" > Designer</div>
      </div>
      <h5 class="f-w-600 m-0" > Research about most recent design trends.</h5>
      <p class="mb-0" > 
          Spend some time looking up current design trend.         </p>
      <div class="carousel slide" id="carouselExampleIndicators" data-bs-ride="true" > 
        <div class="carousel-indicators" > 
          <button class="active" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1" > </button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" > </button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" > </button>
        </div>
        <div class="carousel-inner" > 
          <div class="carousel-item active" > <img class="d-block w-100" src="../assets/images/banner/2.jpg" alt="office-work" > </div>
          <div class="carousel-item" > <img class="d-block w-100" src="../assets/images/banner/1.jpg" alt="office-work" > </div>
          <div class="carousel-item" > <img class="d-block w-100" src="../assets/images/banner/3.jpg" alt="office-work" > </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true" > </span><span class="visually-hidden" > Previous</span></button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true" > </span><span class="visually-hidden" > Next</span></button>
      </div><span class="cd-date" > April 23 2022</span>
    </div>
  </div>
  <div class="cd-timeline-block" > 
    <div class="cd-timeline-img cd-location bg-info bounce-in" > <i class="icon-pulse" > </i></div>
    <div class="cd-timeline-content bounce-in" > 
      <div class="timeline-wrapper" > 
        <div class="badge bg-primary" > Audio testing</div>
      </div>
      <h5 class="f-w-600 m-0" > Musical trends and predictability</h5>
      <p class="mb-0" > 
          So, the next time you listen to music, you might or might not consider how it's actively altering your mood.</p>
      <audio controls="" > 
        <source src="../assets/audio/horse.ogg" type="audio/ogg" > 
      </audio><span class="cd-date" > June 12 2022</span>
    </div>
  </div>
  <div class="cd-timeline-block" > 
    <div class="cd-timeline-img cd-location bg-secondary bounce-in" > <i class="icon-pin-alt" > </i></div>
    <div class="cd-timeline-content bounce-in" > 
      <div class="timeline-wrapper" > 
        <div class="badge bg-success" > Meet-up</div>
      </div>
      <h5 class="f-w-600 m-0" > Web-designer's meet-up</h5>
      <p class="mb-0" > 
          Find nearby web designers to network with! A Web Design Meetup is a place where you can discuss tools.                        </p>
      <div class="time-content pt-2" > <i class="icon-android" > </i>
        <h6 class="f-w-600" > Please! Meet-up</h6>
      </div><span class="cd-date" > November 04 2022</span>
    </div>
  </div>
  <div class="cd-timeline-block" > 
    <div class="cd-timeline-img cd-movie bg-danger bounce-in" > <i class="icon-agenda" > </i></div>
    <div class="cd-timeline-content bounce-in" > 
      <div class="timeline-wrapper" > 
        <div class="badge bg-warning" > Resolutions</div>
      </div>
      <h5 class="f-w-600 m-0" > My Resolutions for 2024</h5>
      <p class="mb-0" > 
          I'm determined to streamline, organism, systematism, realign, and embrace life in 2024.                          </p>
      <div class="time-content pt-2" > <i class="icon-write" > </i>
        <h6 class="f-w-600" > My Resolutions    </h6>
      </div><span class="cd-date" > December 31 2022</span>
    </div>
  </div>
</section>
To use timeline you have to add the following script js files
<!-- Timeline js-->
<script src="../assets/js/modernizr.js" ></script>
<script src="../assets/js/timeline/timeline-custom.js" ></script>