<!-- cd-timeline Start-->
<div class="card">
    <div class="card-header card-no-border pb-0">
        <h3>Timeline</h3>
        <p class="f-m-light mt-1"> This is a Boho timeline chart.</p>
    </div>
    <div class="card-body">
        <section class="cd-container" id="cd-timeline">
            <div class="cd-timeline-block">
                <div class="cd-timeline-img cd-picture bg-primary"><i class="icon-pencil-alt"></i></div>
                <div class="cd-timeline-content">
                  <div class="timeline-wrapper">
                    <div class="badge bg-warning">app-ideas</div>
                  </div>
                  <h4 class="f-w-700 m-0">Established new the app-ideas repository.</h4>
                  <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>
                    <h4 class="f-w-700">View it on Github      </h4>
                  </div><span class="cd-date">February 02 2022</span>
                </div>
            </div>
            <div class="cd-timeline-block">
                <div class="cd-timeline-img bg-danger"> <i class="icon-youtube"></i></div>
                <div class="cd-timeline-content">
                  <div class="timeline-wrapper">
                    <div class="badge bg-danger">Blog</div>
                  </div>
                  <h4 class="f-18 f-w-700 m-0">Implemented the program for weekly code challenges.</h4>
                  <p class="mb-0">
                      Challenges <em class="txt-danger">help you build problem-solving skills, better understand the programming. </em>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/sqRk0Ly66Ps" 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"><i class="icon-image"></i></div>
                <div class="cd-timeline-content">
                  <div class="timeline-wrapper">
                    <div class="badge bg-info">Designer</div>
                  </div>
                  <h4 class="f-18 f-w-700 m-0">Research about most recent design trends.</h4>
                  <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-inner">
                        <owl-carousel-o [options]="customOptions ">
                            <ng-template carouselSlide class="carousel-item" >
                                <img class="d-block w-100" src="assets/images/banner/2.jpg" alt="office-work">
                            </ng-template>
                            <ng-template carouselSlide class="carousel-item" >
                                <img class="d-block w-100" src="assets/images/banner/1.jpg" alt="office-work">
                            </ng-template>
                            <ng-template carouselSlide class="carousel-item" >
                                <img class="d-block w-100" src="assets/images/banner/3.jpg" alt="office-work">
                            </ng-template>
                        </owl-carousel-o>
                    </div>
                  </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"><i class="icon-pulse"></i></div>
                <div class="cd-timeline-content">
                  <div class="timeline-wrapper">
                    <div class="badge bg-primary">Audio testing</div>
                  </div>
                  <h4 class="f-18 f-w-700 m-0">Musical trends and predictability</h4>
                  <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"><i class="icon-pin-alt"></i></div>
                <div class="cd-timeline-content">
                  <div class="timeline-wrapper">
                    <div class="badge bg-success">Meet-up</div>
                  </div>
                  <h4 class="f-18 f-w-700 m-0">Web-designer's meet-up</h4>
                  <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>
                    <h4 class="f-w-700">Please! Meet-up</h4>
                  </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"><i class="icon-agenda"></i></div>
                <div class="cd-timeline-content">
                  <div class="timeline-wrapper">
                    <div class="badge bg-warning">Resolutions</div>
                  </div>
                  <h4 class="f-18 f-w-700 m-0">My Resolutions for 2025</h4>
                  <p class="mb-0">
                      I'm determined to streamline, organism, systematism, realign, and embrace life in 2025.</p>
                  <div class="time-content pt-2"><i class="icon-write"></i>
                    <h4 class="f-w-700">My Resolutions    </h4>
                  </div><span class="cd-date">December 31 2022</span>
                </div>
              </div>
        </section>
    </div>
</div>

<!-- ts file-->
import { Component } from '@angular/core';
import { OwlOptions, CarouselModule } from 'ngx-owl-carousel-o';

@Component({
    selector: 'app-timeline',
    templateUrl: './timeline.html',
    styleUrls: ['./timeline.scss'],
    imports: [CarouselModule]
})
export class Timeline {

  customOptions: OwlOptions = {
    loop: true,
    autoplay : true,
    mouseDrag: false,
    dots: false,
    nav: true,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
        0: {
            items: 1
        }
    },
  }
}