<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Command Center - Otoritas Pelabuhan Tanjung Priok</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="third_party/fontawesome-6.2.0/css/all.css">
</head>
<body>
<main class="site-wrapper" style="background-image: url('image/bg.jpg'); background-position: center;
    background-size: cover;">
    <!--
    <div style="background-color: green; width: 90%; margin: auto; ">
        
    </div>
    -->

    <div class="row mt-4" style="width: 85%; margin: auto">
        <div class="col col-2">
                        <div class="hexagon-item">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://apps3.insw.go.id/dashboard_dtinsw.php">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-universal-access"></i>
                                    </span>
                                    <span class="title">DWELLING TIME</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="margin-left: 85px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://monitoring-inaportnet.dephub.go.id/">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-bullseye"></i>
                                    </span>
                                    <span class="title">INAPORTNET MONITORING</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="margin-left: 0px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://www.marinetraffic.com/en/ais/home/centerx:107.1/centery:-5.7/zoom:9">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-braille"></i>
                                    </span>
                                    <span class="title">Vessel Trafic</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="margin-left: 85px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="http://cctv.priokport.co.id/public">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-video-camera"></i>
                                    </span>
                                    <span class="title">CCTV TJ</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="margin-left: 0px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://www.google.co.id/maps/@-6.1098332,106.8835301,17z/data=!5m2!1e4!1e1">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-life-ring"></i>
                                    </span>
                                    <span class="title">Maps</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>
        </div>
        <div class="col col-8">
            <div class="row mt-4">
                    <div class="col page-title home text-center mt-4">
                        <center>
                            <h1 class="text-white">COMMAND CENTER</h1>
                            <h3 class="text-white">Otoritas Pelabuhan Tanjung Priok</h3>
                        </center>
                    </div>
            </div>
            <div class="row mt-4">
                <div class="col text-center mt-4">
                    <img src="image/logo OP.png" class="mt-3">
                </div>
            </div>
        </div>
        <div class="col col-2" style="">
                        <div class="hexagon-item" style="float: right; margin-right: 0px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://apps3.insw.go.id/dashboard_dtinsw.php">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-universal-access"></i>
                                    </span>
                                    <span class="title">DWELLING TIME</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="float: right; margin-right: 85px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://apps3.insw.go.id/dashboard_dtinsw.php">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-universal-access"></i>
                                    </span>
                                    <span class="title">DWELLING TIME</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="float: right; margin-right: 0px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://apps3.insw.go.id/dashboard_dtinsw.php">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-universal-access"></i>
                                    </span>
                                    <span class="title">DWELLING TIME</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="float: right; margin-right: 85px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://apps3.insw.go.id/dashboard_dtinsw.php">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-universal-access"></i>
                                    </span>
                                    <span class="title">DWELLING TIME</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>

                        <div class="hexagon-item" style="float: right; margin-right: 0px">
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="hex-item">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <a  class="hex-content" href="https://apps3.insw.go.id/dashboard_dtinsw.php">
                                <span class="hex-content-inner">
                                    <span class="icon">
                                        <i class="fa fa-universal-access"></i>
                                    </span>
                                    <span class="title">DWELLING TIME</span>
                                </span>
                                <svg viewBox="0 0 173.20508075688772 200" height="200" width="174" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z" fill="#1e2530"></path></svg>
                            </a>
                        </div>
                        
        </div>
    </div>
    

</main>
</body>
</html>