<!-- ***** Header Area Start ***** -->
  <?php
   include('header.php');
   ?>
  <!-- ***** Header Area End ***** -->

  <section class="heading-page header-text" id="top">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h2>Toutes les vidéos dont vous avez besoin pour votre croissance</h2>
          <!-- <h2>Upcoming Meetings</h2> -->
        </div>
      </div>
    </div>
  </section>

  <section class="meetings-page" id="meetings">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-12">
              <div class="filters">
                <ul>
                  <li data-filter="*"  class="active">Tout</li>
                  <li data-filter=".soon">Marketing</li>
                  <li data-filter=".imp">Branding</li>
                  <li data-filter=".att">Podcast</li>
                </ul>
              </div>
            </div>
            <div class="col-lg-12">
              <div class="row grid">
                <div class="col-lg-4 templatemo-item-col all imp">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$14.00</span> -->
                      </div>
                      <a href="meeting-details.html"><img src="vendor/images/plan de travail 1 copie 2.png" alt=""></a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>12</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>New Lecturers Meeting</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all imp">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$22.00</span> -->
                      </div>
                      <a href="meeting-details.html"><img src="vendor/images/plan de travail 1 copie.png" alt=""></a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>14</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>Online Teaching Techniques</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all soon">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                      
                      </div>
                      <a href="meeting-details.html"><img src="vendor/images/plan de travail 1.png" alt=""></a>
                    </div>
                    
                  </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all imp">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$32.00</span> -->
                      </div>
                      <a href="meeting-details.html"><img src="vendor/images/poster.jpg" alt=""></a>
                    </div>
                     
                  </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all att">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$34.00</span> -->
                      </div>
                      <style>
                        .circle{
                          -moz-border-radius: 50%;
                          -webkit-border-radius: 50%;
                          border-radius: 10%;
                          overflow:hidden;
                          position:relative;
                        }
                      </style>
                      <div class="circle"> 
                      <a href="meeting-details.html">
                        <iframe width="420" height="345" src="https://www.youtube.com/embed/Xos8BQIY7ow">
                        </iframe>
                        <!-- <img src="assets/images/meeting-01.jpg" alt="New Lecturer Meeting"> -->
                      </a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>22</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>New Teaching Techniques</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
              </div>
                <div class="col-lg-4 templatemo-item-col all att">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$34.00</span> -->
                      </div>
                      <style>
                        .circle{
                          -moz-border-radius: 50%;
                          -webkit-border-radius: 50%;
                          border-radius: 10%;
                          overflow:hidden;
                          position:relative;
                        }
                      </style>
                      <div class="circle"> 
                      <a href="meeting-details.html">
                        <iframe width="420" height="345" src="https://www.youtube.com/embed/Xos8BQIY7ow">
                        </iframe>
                        <!-- <img src="assets/images/meeting-01.jpg" alt="New Lecturer Meeting"> -->
                      </a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>22</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>New Teaching Techniques</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all imp att">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$34.00</span> -->
                      </div>
                      <style>
                        .circle{
                          -moz-border-radius: 50%;
                          -webkit-border-radius: 50%;
                          border-radius: 10%;
                          overflow:hidden;
                          position:relative;
                        }
                      </style>
                      <div class="circle"> 
                      <a href="meeting-details.html">
                        <iframe width="420" height="345" src="https://www.youtube.com/embed/Xos8BQIY7ow">
                        </iframe>
                        <!-- <img src="assets/images/meeting-01.jpg" alt="New Lecturer Meeting"> -->
                      </a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>22</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>New Teaching Techniques</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all soon att">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$34.00</span> -->
                      </div>
                      <style>
                        .circle{
                          -moz-border-radius: 50%;
                          -webkit-border-radius: 50%;
                          border-radius: 10%;
                          overflow:hidden;
                          position:relative;
                        }
                      </style>
                      <div class="circle"> 
                      <a href="meeting-details.html">
                        <iframe width="420" height="345" src="https://www.youtube.com/embed/Xos8BQIY7ow">
                        </iframe>
                        <!-- <img src="assets/images/meeting-01.jpg" alt="New Lecturer Meeting"> -->
                      </a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>22</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>New Teaching Techniques</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
                </div>
                <div class="col-lg-4 templatemo-item-col all att att">
                  <div class="meeting-item">
                    <div class="thumb">
                      <div class="price">
                        <!-- <span>$34.00</span> -->
                      </div>
                      <style>
                        .circle{
                          -moz-border-radius: 50%;
                          -webkit-border-radius: 50%;
                          border-radius: 10%;
                          overflow:hidden;
                          position:relative;
                        }
                      </style>
                      <div class="circle"> 
                      <a href="meeting-details.html">
                        <iframe width="420" height="345" src="https://www.youtube.com/embed/Xos8BQIY7ow">
                        </iframe>
                        <!-- <img src="assets/images/meeting-01.jpg" alt="New Lecturer Meeting"> -->
                      </a>
                    </div>
                    <!-- <div class="down-content">
                      <div class="date">
                        <h6>Nov <span>22</span></h6>
                      </div>
                      <a href="meeting-details.html"><h4>New Teaching Techniques</h4></a>
                      <p>Morbi in libero blandit lectus<br>cursus ullamcorper.</p>
                    </div> -->
                  </div>
                </div>
                </div>
           
            </div>
            <div class="col-lg-12">
              <div class="pagination">
                <ul>
                  <li><a href="#">1</a></li>
                  <li class="active"><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Copyright © 2022 Edu Meeting Co., Ltd. All Rights Reserved. 
          <br>Design: <a href="https://templatemo.com/page/1" target="_parent" title="website templates">TemplateMo</a></p>
    </div>
  </section>


  <!-- Scripts -->
  <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="assets/js/isotope.min.js"></script>
    <script src="assets/js/owl-carousel.js"></script>
    <script src="assets/js/lightbox.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/isotope.js"></script>
    <script src="assets/js/video.js"></script>
    <script src="assets/js/slick-slider.js"></script>
    <script src="assets/js/custom.js"></script>
    <script>
        //according to loftblog tut
        $('.nav li:first').addClass('active');

        var showSection = function showSection(section, isAnimate) {
          var
          direction = section.replace(/#/, ''),
          reqSection = $('.section').filter('[data-section="' + direction + '"]'),
          reqSectionPos = reqSection.offset().top - 0;

          if (isAnimate) {
            $('body, html').animate({
              scrollTop: reqSectionPos },
            800);
          } else {
            $('body, html').scrollTop(reqSectionPos);
          }

        };

        var checkSection = function checkSection() {
          $('.section').each(function () {
            var
            $this = $(this),
            topEdge = $this.offset().top - 80,
            bottomEdge = topEdge + $this.height(),
            wScroll = $(window).scrollTop();
            if (topEdge < wScroll && bottomEdge > wScroll) {
              var
              currentId = $this.data('section'),
              reqLink = $('a').filter('[href*=\\#' + currentId + ']');
              reqLink.closest('li').addClass('active').
              siblings().removeClass('active');
            }
          });
        };

        $('.main-menu, .responsive-menu, .scroll-to-section').on('click', 'a', function (e) {
          e.preventDefault();
          showSection($(this).attr('href'), true);
        });

        $(window).scroll(function () {
          checkSection();
        });
    </script>
</body>


  </body>

</html>