Untitled

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>UltraCraft.pl</title>
    <link href="https://fonts.googleapis.com/css?family=Rajdhani:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/eaec5121e7.js" crossorigin="anonymous"></script>
    <style>
        .ranking-table {
            display: none !important;
        }
        .ranking-table:nth-child(1) {
            display: block !important;
        }
        .ranking-table:nth-child(2) {
            display: block !important;
        }
        .ranking-table:nth-child(3) {
            display: block !important;
        }
        .ranking-table:nth-child(4) {
            display: block !important;
        }
        .ranking-table:nth-child(5) {
            display: block !important;
        }
        </style>
</head>

<body>
    <div class="main-container">

        <div class="overlay">
            <img src="img/logo.png" alt="" class="logo">
            <img src="img/background.png" alt="" class="background-overlay">
        </div>
        <div class="overlay2"></div>
        <div class="container">
            <div class="top-title">
                <p class="small-main-title">Sprawdź...</p>
                <p class="big-main-title">Ranking Ultracraft</p>
            </div>
            <main>
                <div class="left">
                    <div class="top-left">
                        <img src="img/left-grass.png" alt="left-grass">
                        <p class="ranking-title">Ranking<span>graczy</span></p>
                        <p class="top-5">Top<span>5</span></p>
                    </div>
                   <?php


try{
    $mng = new MongoDB\Driver\Manager("mongodb://127.0.0.1/");
    $query = new MongoDB\Driver\Query([]);

    $rows = $mng->executeQuery("topki.clients", $query);


?>

 <?php
    $x = 1;
    $idx = 4
 ?><div class="duhsafsa">

 <?php foreach($rows as $idx => $row): ?>
 <div class="ranking-table">
                        <div class="ranking-list">
                            <div class="ranking-nick">
             <?php echo $row->Name; ?>
                            </div>
                            <div class="ranking-score">
                             <?php echo $row->punkty; ?>
                            </div>
                            <div class="ranking-img">
                                <img src="img/ico.png" alt="">
                            </div>
                            <div class="ranking-number">
                            <div class="number"><?php echo $x++ ?></div>
                            </div>
                        </div>
                    </div>

                    <?php endforeach; ?></div>
                    <?php } catch(MongoDB\Driver\Exception $e){
    die("Error Encountered: ".$e);
}

?>
                </div>

                <div class="right">
                    <div class="top-right">
                        <img src="img/right-grass.png" alt="left-grass">
                        <p class="ranking-title">Ranking<span>gildii</span></p>
                        <p class="top-5">Top<span>5</span></p>
                    </div>

                    <div class="ranking-table">
                        <div class="ranking-list">
                            <div class="ranking-number">
                                <p class="number">1</p>
                            </div>
                            <div class="ranking-img">
                                <img src="img/  ico.png" alt="">
                            </div>
                            <div class="ranking-nick">
                                S3.Lisu
                            </div>
                            <div class="ranking-score">
                                900
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <footer>
            <div class="find-nick">
                <input type="text" placeholder="Szukaj gracza...">
                <i class="fas fa-search"></i>
            </div>
            <div class="more-statistic">
                <p>szczegółówe statystyki</p>
            </div>
        </footer>
    </div>
</body>

</html>