<!-- cd-timeline Start-->
<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">
      <h4>Title of section<span> 1</span></h4>
      <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum
      provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste
      voluptatibus minus veritatis qui ut.</p><span class="cd-date">Jan <span class="counter">
      14</span></span>
    </div>
  </div>
  <div class="cd-timeline-block">
    <div class="cd-timeline-img cd-movie bg-secondary"><i class="icon-video-camera"></i></div>
    <div class="cd-timeline-content">
      <h4>Title of section<span> 2</span></h4>
      <div class="ratio ratio-21x9 m-t-20">
        <iframe src="https://www.youtube.com/embed/wpmHZspl4EM" allowfullscreen=""></iframe>
      </div><span class="cd-date">Jan <span class="counter">18</span></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">
      <h4>Title of section<span> 3</span></h4><img class="img-fluid p-t-20"
      src="{% static 'assets/images/banner/1.jpg'%}" alt=""><span class="cd-date">Jan <span
      class="counter">24</span></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">
      <h4>Title of section<span> 4</span></h4>
      <audio class="m-t-20" controls="">
        <source src="{% static 'assets/audio/horse.ogg'%}" type="audio/ogg"> Your browser does not support
        the audio element.
      </audio><span class="cd-date">Feb <span class="counter">14</span></span>
    </div>
  </div>
  <div class="cd-timeline-block">
    <div class="cd-timeline-img cd-location bg-warning"><i class="icon-image"></i></div>
    <div class="cd-timeline-content">
      <h4>Title of section<span> 5</span></h4><img class="img-fluid p-t-20"
      src="{% static 'assets/images/banner/3.jpg'%}" alt=""><span class="cd-date">Feb <span
      class="counter">18</span></span>
    </div>
  </div>
  <div class="cd-timeline-block">
    <div class="cd-timeline-img cd-movie bg-danger"><i class="icon-pencil-alt"></i></div>
    <div class="cd-timeline-content">
      <h4>Final Section</h4>
      <p class="m-0">This is the content of the last section</p><span class="cd-date">Feb <span
      class="counter">26</span></span>
    </div>
  </div>
</section>
<!-- cd-timeline Ends-->

      
    <div class="timeline">
        <div class="container" v-for="(item, index) in HalfRoundedTimeline" :key="index" :class="item.class">
            <div class="date">{{ item.date }}</div><i class="icon" :class="item.icon"></i>
                <div class="content">
                <div class="timeline-wrapper">
                     <div class="badge" :class="item.badge_claC">{{ item.badge }}</div>
                </div>
                <h4 class="mb-2">{{ item.title }}</h4>
                  <p class="mb-0 f-light">
                    {{ item.description }}      
                   </p>
                    <audio controls v-if="item.audio">
                        <source src="@/assets/audio/horse.ogg" type="audio/ogg">
                   </audio>
             </div>
      </div>
  </div>             
    

   export interface RoundedTimeline {
       class: string,
       date: string,
       icon: string,
       badge: string,
       badgeClass: string,
       title: string,
       description: string,
       audio?:boolean
    }
  export const HalfRoundedTimeline :RoundedTimeline[] = [
    {
        class: 'left',
        date: '15 Dec',
        icon: 'fa fa-home',
        badge: 'app-ideas',
        badgeClass: 'bg-danger',
        title: 'Established new the app-ideas repository.',
        description: 'developers who are just beginning their learning process. those who often concentrate on developing programmes with a user interface.'
    },
    {
        class: 'right',
        date: '22 Oct',
        icon: 'fa fa-code-fork',
        badge: 'Blog',
        badgeClass: 'bg-warning',
        title: 'Implemented the program for weekly code challenges.',
        description: 'You can improve your understanding of programming and problem-solving techniques by taking on challenges.'
    },
    {
        class: 'left',
        date: '10 Jul',
        icon: 'fa fa-tencent-weibo',
        badge: 'Designer',
        badgeClass: 'bg-primary',
        title: 'Research about most recent design trends.',
        description: 'With our extensive analysis of the most recent design trends, discover the cutting edge of web aesthetics.'
    },
    {
        class: 'right',
        date: '18 May',
        icon: 'fa fa-modx',
        badge: 'Freelance UX designer',
        badgeClass: 'bg-success',
        title: 'Research about most recent design trends.',
        description: 'Our professionals improve the usability and engagement of your website by creating user-friendly interfaces and user-centered designs, resulting in an unmatched online experience. '
    },
    {
        class: 'left',
        date: '10 Feb',
        icon: 'fa fa-file-audio-o',
        badge: 'Audio testing',
        badgeClass: 'bg-primary',
        title: 'Musical trends and predictability',
        description: "So, the next time you listen to music, you might or might not consider how it's actively altering your mood.",
        audio: true
    },
    {
        class: 'right',
        date: '01 Jan',
        icon: 'fa fa-group',
        badge: 'Designer',
        badgeClass: 'bg-primary',
        title: "Web-designer's meet-up",
        description: 'Find nearby web designers to network with! A Web Design Meetup is a place where you can discuss tools.   '
    },
]