<section id="trainers" class="trainers">
    <div class="container" data-aos="fade-up">

        <div class="section-title mt-5">
            <h2>Guru</h2>
            <p>GURU SMKN 2 GUGUAK</p>
        </div>

        <div class="row" data-aos="zoom-in" data-aos-delay="100">
            <?php
            $dataguru = $koneksi->query("SELECT * FROM tbl_guru");
            foreach ($dataguru as $pecah) :
            ?>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
                    <div class="show" style="display: none;">
                        <div class="member">
                            <img src="admin/dist/img/imgguru/<?= $pecah['guru_foto'] ?>" class="img-fluid" alt="">
                            <div class="member-content">
                                <h4><?= $pecah['guru_nama'] ?></h4>
                                <p>NIP :<?= $pecah['guru_nip'] ?></p>
                                <div class="social">
                                    <p>
                                        <a href=""><i class=""></i><b>lihat Profil</b></a>
                                    </p>
                                    <a href=""><i class="icofont-twitter"></i></a>
                                    <a href=""><i class="icofont-facebook"></i></a>
                                    <a href=""><i class="icofont-instagram"></i></a>
                                    <a href=""><i class="icofont-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            endforeach;
            ?>
        </div>

        <a href="#" class="btn mb-5" id="load" style="background-color: #5fcf80; color:white;">Lihat Lagi</a>
        <a href="" class="btn mb-5" style="background-color: #5fcf80; color:white;">Back to top</a>

    </div>
</section>

<script>
    $(function() {
        $('.show').slice(0, 3).show();
        $('#load').on('click', function(e) {
            e.preventDefault();
            $('.show:hidden').slice(0, 3).slideDown();
            if ($('.show:hidden').length == 0) {
                $('#load').fadeOut('slow');
            }

            $('html,body').animate({
                scrolltop: $(this).offset().top
            }, 3200)

        })


    })
</script>