<?php
require 'koneksi.php';
$con = open_connection();

$query = mysqli_query($con, "SELECT * FROM murid");
?>

<?php require "header.php"; ?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>About Us - Little King</title>

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <style>
        body{
            background-color: #F7F4D5;
        }

        .navbar-custom{
            background-color: #0A3323;
        }

        .navbar-brand{
            color:white !important;
            font-weight:bold;
        }

        .page-title{
            color:#0A3323;
            font-weight:bold;
            text-align:center;
            margin-top:30px;
            margin-bottom:10px;
        }

        .page-subtitle{
            text-align:center;
            color:#105666;
            margin-bottom:40px;
        }

        .member-card{
            background:white;
            border:none;
            border-radius:15px;
            padding:20px;
            text-align:center;
            box-shadow:0 2px 10px rgba(0,0,0,0.15);
            transition:0.3s;
            margin-bottom:25px;
        }

        .member-card:hover{
            transform:translateY(-5px);
        }

        .member-photo{
            width:130px;
            height:130px;
            border-radius:50%;
            object-fit:cover;
            border:4px solid #839958;
        }

        .member-name{
            margin-top:15px;
            color:#0A3323;
            font-weight:bold;
        }

        .member-role{
            color:#105666;
        }

        .btn-back{
            background:#0A3323;
            color:white;
            border:none;
        }

        .btn-back:hover{
            background:#105666;
            color:white;
        }
    </style>
</head>

<body>

<div class="container">

    <h2 class="page-title">About Us</h2>

    <p class="page-subtitle">
        Tim Pengembang Sistem Informasi Little King Pre School
    </p>

    <div class="row">

        <!-- Orang 1 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Dewi.jpg" class="member-photo">
                <h5 class="member-name">Hafsah Dewi</h5>
                <p class="member-role">202343501620</p>
                <p class="member-role">Kontribusi: Database,Login, Dashboard, Master Data, Transaksi, Laporan, About us</p>
                <a href="pwl/Y6K_202343501620/index.php">Tugas Individu
                </a>
            </div>
        </div>

        <!-- Orang 2 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Ninda.jpeg" class="member-photo">
                <h5 class="member-name">Ninda Rambu Ndai Ngana</h5>
                <p class="member-role">202343501608</p>
                <p class="member-role">Kontribusi: Sponsor</p>
                <a href="Y6K_202343501608/index.php">Tugas Individu</a>
            </div>
        </div>

        <!-- Orang 3 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Ivan.jpeg" class="member-photo">
                <h5 class="member-name">Ivan Champion Arno</h5>
                <p class="member-role">202343501639</p>
                <p class="member-role">Kontribusi: Dashboard, Sponsor</p>
                <a href="202343501639 ivan arno.html">Tugas Individu</a>
            </div>
        </div>

        <!-- Orang 4 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Zacky.jpeg" class="member-photo">
                <h5 class="member-name">M Zakhy Priatama Viando</h5>
                <p class="member-role">202343501711</p>
                <p class="member-role">Kontribusi: Sponsor</p>
                <a href>Tugas Individu</a>
            </div>
        </div>

    </div>

    <div class="row">

        <!-- Orang 5 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Rayhan.jpeg" class="member-photo">
                <h5 class="member-name">Rayhan Wirtiansyah Saputro</h5>
                <p class="member-role">202343501653</p>
                <p class="member-role">Kontribusi: Sponsor</p>
                <a href="TUGAS_PWL-1_Y6K_202343501653_Rayhan Wirtiansyah Saputro/202343501653-Rayhan-Saputro.html">Tugas Individu</a>
            </div>
        </div>

        <!-- Orang 6 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Adi.jpeg" class="member-photo">
                <h5 class="member-name">Adi Sarsono Sihotang</h5>
                <p class="member-role">202343501561</p>
                <p class="member-role">Kontribusi: Login, Sponsor</p>
                <a href="TUGAS_PWL-3_Y6K_202343501561_Adi Sarsono Sihotang/index.php">Tugas Individu</a>
            </div>
        </div>

        <!-- Orang 7 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="foto/default.png" class="member-photo">
                <h5 class="member-name">Muhammad Parhan Nur Fuadi</h5>
                <p class="member-role">202343501587</p>
                <p class="member-role">Kontribusi: Sponsor</p>
                <a href>Tugas Individu</a>
            </div>
        </div>

        <!-- Orang 8 -->
        <div class="col-md-3">
            <div class="member-card">
                <img src="assets/Fikri.jpeg" class="member-photo">
                <h5 class="member-name">Fikri Fathurrahman</h5>
                <p class="member-role">202343501633</p>
                <p class="member-role">Kontribusi: Master Data, Sponsor</p>
                <a href="Fikri/Tugas1/index.php" >Tugas Individu</a>
            </div>
        </div>

    </div>

    <div class="text-center mb-4">
        <a href="index.php" class="btn btn-back">
            Kembali ke Dashboard
        </a>
    </div>

</div>
<?php include 'footer.php';?>