@extends('homepage.layout')
@section('content')
    <style>
        body {
            background-color: green;
        }

        section {
            background-color: #033e3a;
        }

        .card {
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            max-width: 300px;
            margin: auto;
            text-align: center;
        }

        .title_list {
            color: grey;
            font-size: 18px;
        }

        button {
            border: none;
            outline: 0;
            display: inline-block;
            padding: 8px;
            color: white;
            background-color: #000;
            text-align: center;
            cursor: pointer;
            width: 100%;
            font-size: 18px;
        }

        a {
            text-decoration: none;
            font-size: 22px;
            color: black;
        }

        button:hover,
        a:hover {
            opacity: 0.7;
        }

        .informasi {
            background-color: white;
            border-radius: 10px;
        }
    </style>
    <div>
        <div>
            <div class="informasi">
                <center>
                    <h3 style="color: white;"><b>Pejabat Pengelola Informasi dan Dokumentasi (PPID)</b></h3>
                </center>
                <br>
                <div class="container">
                    <div class="col-sm-12  col-md-4">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/sufian.jpg" alt="John" style="width:100%">
                            <h5>Pengarah</h5>
                            <p class="title_list">Drs. H. Sufian Agus, M.Si</p>
                            <p>Pembina Utama Muda (IV/c) <br> NIP. 19660204 198803 1 016</p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <p><button>Contact</button></p> --}}
                        </div>
                    </div>
                    <div class="col-sm-12  col-md-4">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/sidik.jpg" alt="John" style="width:100%">
                            <h5>Ketua</h5>
                            <p class="title_list">Sidik, SE, M.Si</p>
                            <p>Pembina Tk. I (IV/b)<br>NIP. 19650512 198601 1 001</p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a> --}}
                            {{-- <p><button>Contact</button></p> --}}
                        </div>
                    </div>
                    <div class="col-sm-12  col-md-4">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/juanda.jpg" alt="John" style="width:100%">
                            <h5>Sekretaris</h5>
                            <p class="title_list">Juanda, SE</p>
                            <p>Penata Tk. I (III/d) <br> NIP. 19740110 199603 1 003 </p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a> --}}
                            <p><button><i class="fa fa-whatsapp"></i> Contact</button></p>
                        </div>
                    </div>
                </div>
                <br><br>
                <div class="container">
                    <div class="col-sm-12  col-md-3">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/ismed.jpg" alt="John" style="width:100%">
                            <h5>Bidang Pelayanan Data dan Klasifikasi Informasi</h5>
                            <p class="title_list">Ismed Indah, SE, M.Si</p>
                            <p>Penata Tk. I (III/d) <br> NIP. 19650608 198601 2 001</p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a> --}}
                            <p><button><i class="fa fa-whatsapp"></i> Contact</button></p>
                        </div>
                    </div>
                    <div class="col-sm-12  col-md-3">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/firdaus.jpeg" alt="John" style="width:100%">
                            <h5>Bidang Pelayanan Informasi Dokumentasi</h5>
                            <p class="title_list">Ahmad Firdaus Kurniawan,S.Sos, M.Si</p>
                            <p>Penata Tk. I (III/d) <br> NIP. 19700420 199103 1 008</p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a> --}}
                            <p><button><i class="fa fa-whatsapp"></i> Contact</button></p>
                        </div>
                    </div>
                    <div class="col-sm-12  col-md-3">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/ratna.jpg" alt="John" style="width:100%">
                            <h5>Bidang Fasilitas Sengketa Informasi</h5>
                            <p class="title_list">Hj. Ratna, S.Sos, M.Si</p>
                            <p>Pembina (IV/a) <br> NIP. 19651110 198903 2 016</p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a> --}}
                            <p><button><i class="fa fa-whatsapp"></i> Contact</button></p>
                        </div>
                    </div>
                    <div class="col-sm-12  col-md-3">
                        <div class="card">
                            <img src="https://web.kesbangpolkaltim.info/img/fatimah.jpg" alt="John" style="width:100%">
                            <h5>Sekretariat</h5>
                            <p class="title_list">Fatimah Waty, SE, MM</p>
                            <p>Penata Tk. I (III/d) <br> NIP. 19740110 199603 1 003</p>
                            {{-- <a href="#"><i class="fa fa-dribbble"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-linkedin"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a> --}}
                            <p><button><i class="fa fa-whatsapp"></i> Contact</button></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--== Blog Classic Post Start ==-->
@endsection