
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="<?= base_url() ?>assets/img/logo.png" type="image/x-icon">

    <link rel="stylesheet" href="<?= base_url() ?>assets/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/vendor/font/fa/css/all.min.css">
    <link rel="stylesheet" href="<?= base_url() ?>assets/css/mod.css">

    <title>404 | Halaman tidak ditemukan</title>

    <style>
        body {
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;            
        }
        h2 {
            letter-spacing: 1px;
            font-size: 1.6rem;
        }
        img {
            width: 130px;
        }
    </style>
</head>
<body>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-5 mx-auto">
                <div class="card border-0">
                    <div class="card-body text-center py-5">
                        <a href="https://www.flaticon.com/free-icons/error" title="error icons">
                            <img src="<?= base_url() ?>assets/img/404.png" >
                        </a>
                        <h2 class="mt-4 text-danger">
                            404 | ERROR
                        </h2>
                        <p class="m-0 text-muted">
                            Halaman tidak ditemukan
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="<?= base_url() ?>assets/vendor/jQuery/jquery-3.6.0.min.js"></script>
    <script src="<?= base_url() ?>assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>