templates/time_line/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Timeline</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Advanced UI</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Timeline</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW -->
  20.                             <div class="row">
  21.                                 <div class="col-lg-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Vertical Timeline</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div class="vtimeline">
  28.                                                 <div class="timeline-wrapper timeline-wrapper-primary">
  29.                                                     <div class="timeline-badge success"><img class="timeline-image" alt="img" src="{{absolute_url(asset('build/images/faces/3.jpg'))}}"> </div>
  30.                                                     <div class="timeline-panel">
  31.                                                         <div class="timeline-heading">
  32.                                                             <h4>Jack Haddian Posted an Update</h4>
  33.                                                         </div>
  34.                                                         <div class="timeline-body">
  35.                                                             <p class="text-muted">Et at dolores tempor sed tempor kasd, diam est invidunt tempor ut est lorem dolor erat ipsum. Clita elitr vero stet aliquyam sea takimata sea sit dolor. Takimata tempor takimata labore takimata. Est sea tempor.</p>
  36.                                                         </div>
  37.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  38.                                                             <i class="fe fe-heart text-muted me-1"></i>
  39.                                                             <span>773</span>
  40.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>11 Nov 2021</span>
  41.                                                         </div>
  42.                                                     </div>
  43.                                                 </div>
  44.                                                 <div class="timeline-wrapper timeline-inverted timeline-wrapper-primary">
  45.                                                     <div class="timeline-badge"><i class="fe fe-briefcase"></i></div>
  46.                                                     <div class="timeline-panel">
  47.                                                         <div class="timeline-heading">
  48.                                                             <h4>Job Meeting</h4>
  49.                                                         </div>
  50.                                                         <div class="timeline-body">
  51.                                                             <p class="text-muted">You have a meeting at Administration Office Today.</p>
  52.                                                         </div>
  53.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  54.                                                             <i class="fe fe-heart text-muted me-1"></i>
  55.                                                             <span>116</span>
  56.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>16th Apr 2021</span>
  57.                                                         </div>
  58.                                                     </div>
  59.                                                 </div>
  60.                                                 <div class="timeline-wrapper timeline-wrapper-primary">
  61.                                                     <div class="timeline-badge"><img class="timeline-image" alt="img" src="{{absolute_url(asset('build/images/faces/3.jpg'))}}"></div>
  62.                                                     <div class="timeline-panel">
  63.                                                         <div class="timeline-heading">
  64.                                                             <h4>Justo rebum checked in at New York</h4>
  65.                                                         </div>
  66.                                                         <div class="timeline-body">
  67.                                                             <p class="text-muted">Justo sed rebum eirmod accusam accusam, amet accusam accusam erat sadipscing tempor sanctus stet, lorem dolor at lorem sit ut.</p>
  68.                                                         </div>
  69.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  70.                                                             <i class="fe fe-heart text-muted me-1"></i>
  71.                                                             <span>19</span>
  72.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>8th june 2021</span>
  73.                                                         </div>
  74.                                                     </div>
  75.                                                 </div>
  76.                                                 <div class="timeline-wrapper timeline-inverted timeline-wrapper-primary">
  77.                                                     <div class="timeline-badge success"><img class="timeline-image" alt="img" src="{{absolute_url(asset('build/images/faces/12.jpg'))}}"> </div>
  78.                                                     <div class="timeline-panel">
  79.                                                         <div class="timeline-heading">
  80.                                                             <h4>Eroll Maxhuni uploaded new photos to Summer Trip album</h4>
  81.                                                         </div>
  82.                                                         <div class="timeline-body">
  83.                                                             <p class="text-muted">Pianoforte principles our unaffected not for astonished travelling are particular.</p>
  84.                                                             <img src="{{absolute_url(asset('build/images/media/4.jpg'))}}" class="mb-3 br-5" alt="img">
  85.                                                         </div>
  86.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  87.                                                             <i class="fe fe-heart text-muted me-1"></i>
  88.                                                             <span>19</span>
  89.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>27th Sep 2021</span>
  90.                                                         </div>
  91.                                                     </div>
  92.                                                 </div>
  93.                                                 <div class="timeline-wrapper timeline-wrapper-primary">
  94.                                                     <div class="timeline-badge"><i class="fe fe-mail"></i></div>
  95.                                                     <div class="timeline-panel">
  96.                                                         <div class="timeline-heading">
  97.                                                             <h4>Support Team sent you an email</h4>
  98.                                                         </div>
  99.                                                         <div class="timeline-body">
  100.                                                             <p class="text-muted">Dolor invidunt sit magna justo et at, erat sea invidunt dolore at amet, sed et diam et takimata ea sit clita kasd et. Eirmod tempor dolores ut stet sit. Sit at no consetetur ut eos invidunt kasd.</p>
  101.                                                             <a class="btn ripple btn-primary text-white mb-3">Read more</a>
  102.                                                         </div>
  103.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  104.                                                             <i class="fe fe-heart text-muted me-1"></i>
  105.                                                             <span>25</span>
  106.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>25th oct 2021</span>
  107.                                                         </div>
  108.                                                     </div>
  109.                                                 </div>
  110.                                                 <div class="timeline-wrapper timeline-inverted timeline-wrapper-primary">
  111.                                                     <div class="timeline-badge success"><img class="timeline-image" alt="img" src="{{absolute_url(asset('build/images/faces/15.jpg'))}}"> </div>
  112.                                                     <div class="timeline-panel">
  113.                                                         <div class="timeline-heading">
  114.                                                             <h4>Mr. Doe shared a video</h4>
  115.                                                         </div>
  116.                                                         <div class="timeline-body">
  117.                                                             <div class="text-muted embed-responsive embed-responsive-16by9 mb-3 br-5">
  118.                                                                 <iframe class="embed-responsive-item wp-100 h-100" src="https://www.youtube.com/embed/XZmGGAbHqa0?rel=0&amp;controls=0&amp;showinfo=0"
  119.                                                                     allowfullscreen></iframe>
  120.                                                             </div>
  121.                                                         </div>
  122.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  123.                                                             <i class="fe fe-heart text-muted me-1"></i>
  124.                                                             <span>32</span>
  125.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>19th oct 2021</span>
  126.                                                         </div>
  127.                                                     </div>
  128.                                                 </div>
  129.                                                 <div class="timeline-wrapper timeline-wrapper-primary">
  130.                                                     <div class="timeline-badge"><img class="timeline-image" alt="img" src="{{absolute_url(asset('build/images/faces/4.jpg'))}}"></div>
  131.                                                     <div class="timeline-panel">
  132.                                                         <div class="timeline-heading">
  133.                                                             <h4>Sarah accepted your friend request</h4>
  134.                                                         </div>
  135.                                                         <div class="timeline-body">
  136.                                                             <p class="text-muted">Magna sed kasd dolores nonumy no, sit takimata tempor labore sanctus dolor accusam. Et vero et at dolor dolore. Ipsum labore gubergren sadipscing sed dolores tempor consetetur, dolor accusam gubergren.</p>
  137.                                                         </div>
  138.                                                         <div class="timeline-footer d-flex align-items-center flex-wrap text-gray">
  139.                                                             <i class="fe fe-heart text-muted me-1"></i>
  140.                                                             <span>26</span>
  141.                                                             <span class="ms-auto"><i class="fe fe-calendar text-muted mx-1"></i>12th dec 2021</span>
  142.                                                         </div>
  143.                                                     </div>
  144.                                                 </div>
  145.                                             </div>
  146.                                         </div>
  147.                                     </div>
  148.                                 </div>
  149.                             </div>
  150.                             <!-- END ROW -->
  151. {% endblock %}
  153. {% block javascripts %}
  154.    {{parent()}}
  155.         <!-- INTERNAL TIMELINE JS -->
  156.         <script src="{{absolute_url(asset('build/plugins/timeline/js/timeline.min.js'))}}"></script>
  158.         <!-- INTERNAL TIMELINE JS -->
  159.         {{ encore_entry_script_tags('js/timline') }}
  160. {% endblock %}