<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>S. E. S.</title>
    <!-- google-fonts -->
    <link
        href="//fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Teko:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <!-- //google-fonts -->
    <!-- Font-Awesome-Icons-CSS -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/industries/css/fontawesome-all.min.css">
    <!-- Template CSS Style link -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/industries/css/style-starter.css">
</head>

<body>
    <!--header-->
    <header id="site-header" class="fixed-top">
        <div class="container-fluid">
            <nav class="navbar navbar-expand-lg stroke">
                <h1>
                    <a class="navbar-brand d-flex align-items-center" href="<?php echo base_url(); ?>landing">S. E. S.</a>
                </h1>
                <!-- if logo is image enable this
    <a class="navbar-brand" href="#index.html">
        <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
    </a> -->
                <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse"
                    data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
                    <span class="navbar-toggler-icon fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ml-lg-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="<?php echo base_url(); ?>home">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo base_url(); ?>konsultasi">Konsultasi</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo base_url(); ?>tips">Tips Perawatan</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo base_url(); ?>tentang">Tentang</a>
                        </li>
                        <!-- search button -->
                        <!--div class="search-right ml-lg-3">
                            <form action="#search" method="GET" class="search-box position-relative">
                                <div class="input-search">
                                    <input type="search" placeholder="Enter Keyword" name="search" required="required"
                                        autofocus="" class="search-popup">
                                </div>
                                <button type="submit" class="btn search-btn"><i class="fa fa-search"
                                        aria-hidden="true"></i></button>
                            </form>
                        </div-->
                        <!-- //search button -->
                    </ul>
                </div>
                <!-- toggle switch for light and dark theme -->
                <!--div class="cont-ser-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div-->
                <!-- //toggle switch for light and dark theme -->
            </nav>
        </div>
    </header>
    <!--//header-->

    <!-- banner section -->
    <section id="home" class="w3l-banner py-5">
        <div class="banner-image">

        </div>
        <div class="banner-content">
            <div class="container pt-5 pb-md-4">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-md-6 pt-md-0 pt-4">
                        <h3 class="mb-sm-4 mb-3 title">Kami adalah <span class="d-block-res">S<span class="type-js"><span
                                        class="text-js">.E.S.</span></span></span></h3>
                        <p>Sebuah website sistem pakar yang membantu anda mendiagnosa penyakit domba.</p>
                        <div class="mt-md-5 mt-4 mb-lg-0 mb-4">
                            <a class="btn btn-style" href="<?php echo base_url(); ?>home">Lihat Sekarang</a>
                        </div>
                    </div>
                    <div class="col-md-6 banner-right mt-lg-4 mt-0 text-right offset-lg-1">
                        <img class="img-fluid" src="<?php echo base_url(); ?>assets/img/expert_system_500x500.jpg" alt=" ">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner section -->

    <!-- banner bottom section -->
    <section class="about-section py-5">
        <div class="container py-lg-5 py-4">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6">
                    <div class="about-single p-3 d-flex justify-content-between">
                        <div class="about-icon mr-3">
                            <i class="fas fa-tools" aria-hidden="true"></i>
                        </div>
                        <div class="about-content">
                            <h5 class="mb-3">Who we are</h5>
                            <p>Pengembang website sistem pakar diagnosa penyakit domba dengan metode forward chaining dan berbasis framework CI3.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="about-single p-3 d-flex justify-content-between">
                        <div class="about-icon mr-3">
                            <i class="fas fa-drafting-compass" aria-hidden="true"></i>
                        </div>
                        <div class="about-content">
                            <h5 class="mb-3">How we Work</h5>
                            <p>Kami bekerja sama dengan pakar, yaitu seorang dokter hewan yang ahli mengenai penyakit domba sebagai sumber data kami.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="about-single p-3 d-flex justify-content-between">
                        <div class="about-icon mr-3">
                            <i class="fas fa-industry" aria-hidden="true"></i>
                        </div>
                        <div class="about-content">
                            <h5 class="mb-3">What we do</h5>
                            <p>Memberikan layanan diagnosa penyakit domba untuk memudahkan pengguna dalam merawat domba yang terserang penyakit.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner bottom section -->

    <!-- about section -->
    <section class="w3l-aboutblock pt-4 pb-5">
        <div class="container pb-md-5 pb-sm-4">
            <div class="row">
                <div class="col-lg-6 left-wthree-img mt-lg-0 mt-5 order-lg-first order-last">
                    <img class="img-fluid img-responsive" src="<?php echo base_url(); ?>assets/img/doktorpandu-copy.jpeg" alt="doktorpandu">
                </div>
                <div class="col-lg-6 about-right-faq align-self pl-lg-5 mt-xl-4 order-lg-last order-first">
                    <h3 class="text-bgs mb-md-3 mb-2">Pakar <span>Terpercaya</span></h3>
                    <h3 class="title-style"><span>drh.</span> Pandu Tokoh Amukti</h3>
                    <p class="ab-text mt-4 pt-lg-2">"Memelihara domba adalah hal yang gampang-gampang-susah sekaligus susah-susah-gampang, dengan adanya aplikasi ini semakin memudahkan para pelaku usaha peternakan domba lebih open minded terhadap kesehatan ternak. Semoga bermanfaat."</p>
                    <p class="mt-4">Seorang dokter hewan yang beralamat di Perumahan Tamansari Indah Jl. Cendana 7 RT 15/06, Tamansari, Bondowoso. Saat ini bekerja sebagai dokter hewan di Puskesmas Hewan Tamanan, Bondowoso.</p>
                    <img class="img-fluid mt-md-5 mt-4 img-dark-color" src="<?php echo base_url(); ?>assets/img/sign.png" alt=" ">
                </div>
            </div>
        </div>
    </section>
    <!-- //about section -->

    <!-- services section -->
    <section class="w3l-bottom-grids-6 service-w3l-bg py-5" id="services">
        <div class="container py-md-5 py-4">
            <div class="title-main text-center mx-auto mb-5" style="max-width:600px;">
                <p class="mt-2 text-white">Our Services</p>
                <h3 class="title-style text-white">Layanan Diagnosa Modern Yang Mudah Dan Cepat</h3>
            </div>
            <div class="row pt-md-4 justify-content-center">
                <div class="col-lg-4 col-md-6 grids-feature">
                    <div class="area-box">
                        <img class="img-fluid" src="<?php echo base_url(); ?>assets/img/sheep_doctor_160x160.jpg" alt=" ">
                        <h4><a href="#feature" class="title-head">Diagnosa Mudah</a></h4>
                        <p>Hanya dengan menjawab pertanyaan-pertanyaan yang ada, anda bisa mendapatkan hasil diagnosa yang akurat.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 grids-feature mt-md-0 mt-sm-5 mt-4">
                    <div class="area-box">
                        <img class="img-fluid" src="<?php echo base_url(); ?>assets/img/sheep_160x160.jpg" alt=" ">
                        <h4><a href="#feature" class="title-head">Cetak Hasil</a></h4>
                        <p>Anda dapat mencetak hasil diagnosa yang muncul untuk memudahkan anda dalam merawat domba nantinya.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 grids-feature mt-lg-0 mt-sm-5 mt-4">
                    <div class="area-box">
                        <img class="img-fluid" src="<?php echo base_url(); ?>assets/img/expert_system_160x160.jpg" alt=" ">
                        <h4><a href="#feature" class="title-head">Tips Perawatan</a></h4>
                        <p>Terdapat berbagai tips perawatan domba yang bisa anda lihat pada website ini.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- footer -->
    <footer class="w3l-footer-29-main">
        <div class="footer-29-w3l py-5">
            <div class="container py-4">
                <div class="row footer-top-29">
                    <div class="col-lg-4 col-md-6 col-sm-7 footer-list-29 footer-1 pr-lg-5">
                        <div class="footer-logo mb-3">
                            <a class="footer-brand-logo" href="<?php echo base_url(); ?>landing"><img src="<?php echo base_url(); ?>assets/img/ses_160x47.png" alt="logo"></a>
                        </div>
                        <p>Website sistem pakar untuk membantu mendiagnosis penyakit domba.</p>
                        <!--div class="main-social-footer-29 mt-4">
                            <a href="#facebook" class="facebook"><span class="fab fa-facebook-f"></span></a>
                            <a href="#instagram" class="instagram"><span class="fab fa-instagram"></span></a>
                        </div-->
                    </div>
                    <div class="col-lg-2 col-md-6 col-sm-5 col-6 footer-list-29 footer-2 mt-sm-0 mt-5">
                        <ul>
                            <h6 class="footer-title-29">Usefull Links</h6>
                            <li><a href="<?php echo base_url(); ?>home">Home</a></li>
                            <li><a href="<?php echo base_url(); ?>konsultasi">Konsultasi</a></li>
                            <li><a href="<?php echo base_url(); ?>tips">Tips Perawatan</a></li>
                            <li><a href="<?php echo base_url(); ?>tentang">Tentang</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- copyright -->
        <div class="w3l-copyright">
            <div class="container">
                <div class="row bottom-copies align-items-center">
                    <p class="col-lg-8 copy-footer-29">@ 2021 Wahyu Rama. All rights reserved.</p>
                    <div class="col-lg-4 footer-list-29 footer-copy-list">
                        <ul class="text-lg-right">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- //copyright -->
    <!-- //footer -->

    <!-- Js scripts -->
    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
        <span class="fas fa-level-up-alt" aria-hidden="true"></span>
    </button>
    <script>
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("movetop").style.display = "block";
            } else {
                document.getElementById("movetop").style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
    <!-- //move top -->

    <!-- common jquery plugin -->
    <script src="<?php echo base_url(); ?>assets/industries/js/jquery-3.3.1.min.js"></script>
    <!-- //common jquery plugin -->

    <!-- banner image moving effect -->
    <script>
        var lFollowX = 0,
            lFollowY = 0,
            x = 0,
            y = 0,
            friction = 1 / 30;

        function animate() {
            x += (lFollowX - x) * friction;
            y += (lFollowY - y) * friction;

            translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

            $('.banner-image').css({
                '-webit-transform': translate,
                '-moz-transform': translate,
                'transform': translate
            });

            window.requestAnimationFrame(animate);
        }

        $(window).on('mousemove click', function (e) {

            var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
            var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
            lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
            lFollowY = (10 * lMouseY) / 100;

        });

        animate();
    </script>
    <!-- //banner image moving effect -->

    <!-- counter for stats -->
    <script src="<?php echo base_url(); ?>assets/industries/js/counter.js"></script>
    <!-- //counter for stats -->

    <!-- magnific popup -->
    <script src="<?php echo base_url(); ?>assets/industries/js/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });

            $('.popup-with-move-anim').magnificPopup({
                type: 'inline',

                fixedContentPos: false,
                fixedBgPos: true,

                overflowY: 'auto',

                closeBtnInside: true,
                preloader: false,

                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-slide-bottom'
            });
        });
    </script>
    <!-- //magnific popup -->

    <!-- owl carousel -->
    <script src="<?php echo base_url(); ?>assets/industries/js/owl.carousel.js"></script>
    <!-- script for tesimonials carousel slider -->
    <script>
        $(document).ready(function () {
            $("#owl-demo2").owlCarousel({
                loop: true,
                nav: false,
                margin: 50,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 1,
                        nav: false
                    },
                    736: {
                        items: 1,
                        nav: false
                    },
                    991: {
                        items: 2,
                        margin: 30,
                        nav: false
                    },
                    1080: {
                        items: 2,
                        nav: false
                    }
                }
            })
        })
    </script>
    <!-- //script for tesimonials carousel slider -->
    <!-- owl carousel -->

    <!-- theme switch js (light and dark)-->
    <script src="<?php echo base_url(); ?>assets/industries/js/theme-change.js"></script>
    <script>
        function autoType(elementClass, typingSpeed) {
            var thhis = $(elementClass);
            thhis.css({
                "position": "relative",
                "display": "inline-block"
            });
            thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
            thhis = thhis.find(".text-js");
            var text = thhis.text().trim().split('');
            var amntOfChars = text.length;
            var newString = "";
            thhis.text("|");
            setTimeout(function () {
                thhis.css("opacity", 1);
                thhis.prev().removeAttr("style");
                thhis.text("");
                for (var i = 0; i < amntOfChars; i++) {
                    (function (i, char) {
                        setTimeout(function () {
                            newString += char;
                            thhis.text(newString);
                        }, i * typingSpeed);
                    })(i + 1, text[i]);
                }
            }, 1500);
        }

        $(document).ready(function () {
            // Now to start autoTyping just call the autoType function with the
            // class of outer div
            // The second paramter is the speed between each letter is typed.
            autoType(".type-js", 200);
        });
    </script>
    <!-- //theme switch js (light and dark)-->

    <!-- MENU-JS -->
    <script>
        $(window).on("scroll", function () {
            var scroll = $(window).scrollTop();

            if (scroll >= 80) {
                $("#site-header").addClass("nav-fixed");
            } else {
                $("#site-header").removeClass("nav-fixed");
            }
        });

        //Main navigation Active Class Add Remove
        $(".navbar-toggler").on("click", function () {
            $("header").toggleClass("active");
        });
        $(document).on("ready", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
            $(window).on("resize", function () {
                if ($(window).width() > 991) {
                    $("header").removeClass("active");
                }
            });
        });
    </script>
    <!-- //MENU-JS -->

    <!-- disable body scroll which navbar is in active -->
    <script>
        $(function () {
            $('.navbar-toggler').click(function () {
                $('body').toggleClass('noscroll');
            })
        });
    </script>
    <!-- //disable body scroll which navbar is in active -->

    <!--bootstrap-->
    <script src="<?php echo base_url(); ?>assets/industries/js/bootstrap.min.js"></script>
    <!-- //bootstrap-->
    <!-- //Js scripts -->
</body>

</html>
