templates/pages-timeline.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Timeline'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Pages', title: 'Timeline'}) }}
  27.                         
  28.                         <div class="row">
  29.                             <div class="col-lg-12">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Bootstrap Timeline</h4>
  33.                                     </div><!-- end card header -->
  35.                                     <div class="card-body">
  36.                                         
  37.                                         <div class="row justify-content-center">
  38.                                             <div class="col-xl-10">
  39.                                                 <div class="timeline">
  40.                                                     <div class="timeline-container">
  41.                                                         <div class="timeline-end">
  42.                                                             <p>Start</p>
  43.                                                         </div>
  44.                                                         <div class="timeline-continue">
  45.                                                             <div class="row timeline-right">
  46.                                                                 <div class="col-md-6">
  47.                                                                     <div class="timeline-icon">
  48.                                                                         <i class="bx bx-briefcase-alt-2 text-primary h2 mb-0"></i>
  49.                                                                     </div>
  50.                                                                 </div>
  51.                                                                 <div class="col-md-6">
  52.                                                                     <div class="timeline-box">
  53.                                                                         <div class="timeline-date bg-primary text-center rounded">
  54.                                                                             <h3 class="text-white mb-0">25</h3>
  55.                                                                             <p class="mb-0 text-white-50">June</p>
  56.                                                                         </div>
  57.                                                                         <div class="event-content">
  58.                                                                             <div class="timeline-text">
  59.                                                                                 <h3 class="font-size-18">Timeline Event One</h3>
  60.                                                                                 <p class="mb-0 mt-2 pt-1 text-muted">Perspitis unde omnis it voluptatem
  61.                                                                                     accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
  62.                                                                                     quae ab illo inventore veritatis et quasi
  63.                                                                                     architecto beatae explicabo.</p>
  64.                                                                             </div>
  65.                                                                         </div>
  66.                                                                     </div>
  67.                                                                 </div>
  68.                                                             </div>
  69.                                 
  70.                                                             <div class="row timeline-left">
  71.                                                                 <div class="col-md-6 d-md-none d-block">
  72.                                                                     <div class="timeline-icon">
  73.                                                                         <i class="bx bx-user-pin text-primary h2 mb-0"></i>
  74.                                                                         </div>
  75.                                                                 </div>
  76.                                                                 <div class="col-md-6">
  77.                                                                     <div class="timeline-box">
  78.                                                                         <div class="timeline-date bg-primary text-center rounded">
  79.                                                                             <h3 class="text-white mb-0">25</h3>
  80.                                                                             <p class="mb-0 text-white-50">June</p>
  81.                                                                         </div>
  82.                                                                         <div class="event-content">
  83.                                                                             <div class="timeline-text">
  84.                                                                                 <h3 class="font-size-18">Timeline Event two</h3>
  85.                                                                                 <p class="mb-0 mt-2 pt-1 text-muted">At vero eos dignissimos ducimus quos
  86.                                                                                     dolores chooses to enjoy pleasure that has no annoying.</p>
  87.                             
  88.                                                                                 <div class="d-flex flex-wrap align-items-start event-img mt-3 gap-2">
  89.                                                                                     <img src="/images/small/img-2.jpg" alt=""
  90.                                                                                         class="img-fluid rounded" width="60">
  91.                                                                                     <img src="/images/small/img-5.jpg" alt=""
  92.                                                                                         class="img-fluid rounded" width="60">
  93.                                                                                 </div>
  94.                                                                             </div>
  95.                                                                         </div>
  96.                                                                         
  97.                                                                     </div>
  98.                                                                 </div>
  99.                                                                 <div class="col-md-6 d-md-block d-none">
  100.                                                                     <div class="timeline-icon">
  101.                                                                         <i class="bx bx-user-pin text-primary h2 mb-0"></i>
  102.                                                                         </div>
  103.                                                                 </div>
  104.                                                             </div>
  106.                                                             <div class="row timeline-right">
  107.                                                                 <div class="col-md-6">
  108.                                                                     <div class="timeline-icon">
  109.                                                                         <i class="bx bx-bar-chart-square text-primary h2 mb-0"></i>
  110.                                                                     </div>
  111.                                                                 </div>
  112.                                                                 <div class="col-md-6">
  113.                                                                     <div class="timeline-box">
  114.                                                                         <div class="timeline-date bg-primary text-center rounded">
  115.                                                                             <h3 class="text-white mb-0">28</h3>
  116.                                                                             <p class="mb-0 text-white-50">Des</p>
  117.                                                                         </div>
  118.                                                                         <div class="event-content">
  119.                                                                             <div class="timeline-text">
  120.                                                                                 <h3 class="font-size-18">Timeline Event Three</h3>
  121.                                                                                 <p class="mb-0 mt-2 pt-1 text-muted">Vivamus ultrices massa turna interdum
  122.                                                                                     eu. Pellentesque habitant morbi tristique eget justo sit amet est
  123.                                                                                     varius mollis et quis nisi. Suspendisse potenti. senectus
  124.                                                                                     et netus et malesuada fames ac turpis egestas.</p>
  125.                                                                                 
  126.                                                                             </div>
  127.                                                                         </div>
  128.                                                                     </div>
  129.                                                                 </div>
  130.                                                             </div>
  132.                                                             <div class="row timeline-left">
  133.                                                                 <div class="col-md-6 d-md-none d-block">
  134.                                                                     <div class="timeline-icon">
  135.                                                                         <i class="bx bx-camera text-primary h2 mb-0"></i>
  136.                                                                         </div>
  137.                                                                 </div>
  138.                                                                 <div class="col-md-6">
  139.                                                                     <div class="timeline-box">
  140.                                                                         <div class="timeline-date bg-primary text-center rounded">
  141.                                                                             <h3 class="text-white mb-0">25</h3>
  142.                                                                             <p class="mb-0 text-white-50">June</p>
  143.                                                                         </div>
  144.                                                                         <div class="event-content">
  145.                                                                             <div class="timeline-text">
  146.                                                                                 <h3 class="font-size-18">Timeline Event Four</h3>
  147.                                                                                 <p class="mb-0 mt-2 pt-1 text-muted">Printing and typesetting industry. been
  148.                                                                                     the industry'scrambled
  149.                                                                                     it make a type specimen book.</p>
  150.                                 
  151.                                                                                 <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light mt-4">See
  152.                                                                                     more detail
  153.                                                                                 </button>
  154.                                                                             </div>
  155.                                                                         </div>
  156.                                                                     </div>
  157.                                                                 </div>
  158.                                                                 <div class="col-md-6 d-md-block d-none">
  159.                                                                     <div class="timeline-icon">
  160.                                                                         <i class="bx bx-camera text-primary h2 mb-0"></i>
  161.                                                                         </div>
  162.                                                                 </div>
  163.                                                             </div>
  164.                                 
  165.                                                             <div class="row timeline-right">
  166.                                                                 <div class="col-md-6">
  167.                                                                     <div class="timeline-icon">
  168.                                                                         <i class="bx bx-pie-chart-alt text-primary h2 mb-0"></i>
  169.                                                                         </div>
  170.                                                                 </div>
  171.                                                                 <div class="col-md-6">
  172.                                                                     <div class="timeline-box">
  173.                                                                         <div class="timeline-date bg-primary text-center rounded">
  174.                                                                             <h3 class="text-white mb-0">23</h3>
  175.                                                                             <p class="mb-0 text-white-50">July</p>
  176.                                                                         </div>
  177.                                                                         <div class="event-content">
  178.                                                                             <div class="timeline-text">
  179.                                                                                 <h3 class="font-size-18">Timeline Event Five</h3>
  180.                             
  181.                                                                                 <p class="mb-0 mt-2 pt-1 text-muted">Excepturi, obcaecati, quisquam id
  182.                                                                                     molestias eaque asperiores voluptatibus cupiditate error
  183.                                                                                     assumenda delectus odit
  184.                                                                                     similique earum voluptatem 
  185.                                                                                     Odit, itaque, deserunt corporis vero ipsum nisi repellat ... <a
  186.                                                                                         href="#">Read more</a></p>
  187.                                                                             </div>
  188.                                                                         </div>
  189.                                                                     </div>
  190.                                                                 </div>
  191.                                                             </div>
  193.                                                             <div class="row timeline-left">
  194.                                                                 <div class="col-md-6 d-md-none d-block">
  195.                                                                     <div class="timeline-icon">
  196.                                                                         <i class="bx bx-home-alt text-primary h2 mb-0"></i>
  197.                                                                         </div>
  198.                                                                 </div>
  199.                                                                 <div class="col-md-6">
  200.                                                                     <div class="timeline-box">
  201.                                                                         <div class="timeline-date bg-primary text-center rounded">
  202.                                                                             <h3 class="text-white mb-0">25</h3>
  203.                                                                             <p class="mb-0 text-white-50">June</p>
  204.                                                                         </div>
  205.                                                                         <div class="event-content">
  206.                                                                             <div class="timeline-text">
  207.                                                                                 <h3 class="font-size-18">Timeline Event End</h3>
  208.                                                                                 <p class="mb-0 mt-2 pt-1 text-muted">Suspendisse tempor porttitor elit non
  209.                                                                                     maximus. Sed suscipit, purus in convallis condimentum, risus ex
  210.                                                                                     pellentesque sapien, vel tempor arcu dolor ut est. Nam ac felis id
  211.                                                                                     mauris fermentum
  212.                                                                                     nisl pharetra auctor.</p>
  213.                                                                             </div>
  214.                                                                         </div>
  215.                                                                         
  216.                                                                     </div>
  217.                                                                 </div>
  218.                                                                 <div class="col-md-6 d-md-block d-none">
  219.                                                                     <div class="timeline-icon">
  220.                                                                         <i class="bx bx-home-alt text-primary h2 mb-0"></i>
  221.                                                                     </div>
  222.                                                                 </div>
  223.                                                             </div>
  224.                                                         </div>
  225.                                                         <div class="timeline-start">
  226.                                                             <p>End</p>
  227.                                                         </div>
  228.                                                         <div class="timeline-launch">
  229.                                                             <div class="timeline-box">
  230.                                                                 <div class="timeline-text">
  231.                                                                     <h3 class="font-size-18">Launched our company on 21 June 2021</h3>
  232.                                                                     <p class="text-muted mb-0">Pellentesque sapien ut est.</p>
  233.                                                                 </div>
  234.                                                             </div>
  235.                                                         </div>
  236.                                                     </div>
  237.                                                 </div>
  238.                                             </div>
  239.                                         </div>
  240.                                     </div>
  241.                                     <!-- end card body -->
  242.                                 </div>
  243.                                 <!-- end card -->
  244.                             </div>
  245.                             <!-- end col -->
  246.                         </div>
  247.                         <!-- end row -->
  248.                     </div> <!-- container-fluid -->
  249.                 </div>
  250.                 <!-- End Page-content -->
  252.                 
  253.                 {{ include('partials/footer.html.twig') }}
  254.             </div>
  255.             <!-- end main content-->
  257.         </div>
  258.         <!-- END layout-wrapper -->
  260.         {{ include('partials/right-sidebar.html.twig') }}
  262.         {{ include('partials/vendor-scripts.html.twig') }}
  264.         <script src="/js/app.js"></script>
  266.     </body>
  267. </html>